Use AJAX and PHP to Build your Mailing List

The beauty of this setup is that structure of the page is totally isolated from its functionality, which makes development and maintenance hassle-free.

Using AJAX to Deliver the Address

Inside the js folder, alongside the prototype.js file, is a file called mailingList.js. This file contains the code that drives the AJAX functionality specific to this page. Our first item of business in this file is to add an event listener to the form element’s submit event, which will trigger the AJAX call to the server. However, we can’t do this straight away — we need to wait until the page is loaded, which is signified by the window object’s load event.

To add these event listeners, we’ll use Prototype’s convenient observe method. We first add a listener for the page’s load event. Inside this listener, we attach an event listener to our form’s submit event:

// Attach handler to window load event <br>
Event.observe(window, 'load', init, false); <br>
 <br>
function init() { <br>
  // Attach handler to form's submit event <br>
  Event.observe('addressForm', 'submit', storeAddress); <br>
}

Notice that the event listener for our form will call the JavaScript function storeAddress when the form is submitted. This storeAddress function contains the JavaScript to make an AJAX call to our PHP script. Here’s what it looks like:

function storeAddress(e) { <br>
  // Update user interface <br>
  $('response').innerHTML = 'Adding email address...'; <br>
  // Prepare query string and send AJAX request <br>
  var pars = 'address=' + escape($F('address')); <br>
  var myAjax = new Ajax.Updater('response', 'ajaxServer.php', {method: 'get', parameters: pars}); <br>
  // Stop form from submitting when JavaScript is enabled <br>
  Event.stop(e); <br>
}

This function is very simple. It starts by letting the user that something’s going on by displaying an “Adding email address…” message. Next, we collect the information from the form in preparation for sending an AJAX request. Notice how we access the contents of the text field using Prototype’s $F function, which grabs the value of a given form element when supplied with that form element’s ID. We use the JavaScript escape function to convert the user input to Unicode format; this way, its URL is ready for delivery to the PHP script via the GET method.

Then comes the most important part of this function: the creation of a new Ajax.Updater object. When we create an Ajax.Updater object, we pass it some parameters, including:

1. the ID of the element in which you want to show the response from the server


2. the URL of the PHP script


3. the data you want to send to the server-side script, and the method of delivery (i.e. POST or GET)

The Ajax.Updater will send the email address to the server and wait patiently for a response. When it receives a response, it will display it in place of the “Adding email address…” message we inserted at the start of the method. Finally, we call Event.stop (another function supplied by the Prototype library) to stop the form from actually being submitted to the server.

Set Up your Mailing List Database

Before we can write any PHP to store email addresses, we need a place to put them. This SQL will build a table named mailinglist for you:

// Attach handler to window load event <br>
Event.observe(window, 'load', init, false); <br>
 <br>
function init() { <br>
  // Attach handler to form's submit event <br>
  Event.observe('addressForm', 'submit', storeAddress); <br>
}

Included in the code archive is a PHP file called createTable.php, which will create this table for you. However, before you run this file, you’ll need to update the dbConstants.php file with the details of your MySQL database. I suggest you update this file now, as we’ll be using these constants in the next section.

Storing the Email Address

We’ve set everything up to deliver the address to the server; now PHP will finish up the process by storing the address in your database and returning a string to our Ajax object to indicate success or failure. Let’s take a look at the ajaxServer.php file to which the email address is sent.

function storeAddress(e) { <br>
  // Update user interface <br>
  $('response').innerHTML = 'Adding email address...'; <br>
  // Prepare query string and send AJAX request <br>
  var pars = 'address=' + escape($F('address')); <br>
  var myAjax = new Ajax.Updater('response', 'ajaxServer.php', {method: 'get', parameters: pars}); <br>
  // Stop form from submitting when JavaScript is enabled <br>
  Event.stop(e); <br>
}

This very simple PHP script calls a function called storeAddress and returns to the Ajax object the message that’s returned by storeAddress. Communicating with the Ajax object is as simple as printing a string.

The first thing storeAddress does is initialize a variable called $message to a non-breaking space. Then, it makes sure the script has received an email address in the query string. If it hasn’t, we’ll leave $message variable set as a non-breaking space. $message will be returned to the caller at the end of this function.

CREATE TABLE `mailinglist` ( <br>
  `id` INT NOT NULL AUTO_INCREMENT , <br>
  `email` TEXT NOT NULL , <br>
  PRIMARY KEY ( `id` ) <br>
);

Once we are certain we have an email address to work with, we’ll want to make sure it’s a valid address. We’ll use a regular expression to look for some alphanumeric characters followed by the @ symbol, more alphanumeric characters, a period, and some more alphanumeric characters. If this test fails, we’ll set $message to an error message, informing the user that the entered email address was invalid:

<?php <br>
require_once("inc/storeAddress.php"); <br>
echo(storeAddress()); <br>
?>

If the address passes this test, we’ll store it in the database. To do this, we connect to MySQL, select the database, and run our INSERT query. If the address was stored properly, we set $message to a success message; otherwise, we set $message to an error message.

function storeAddress() { <br>
  $message = " "; <br>
  // Check for an email address in the query string <br>
  if( !isset($_GET['address']) ){ <br>
    // No email address provided <br>
  }

Finally, we return $message to ajaxServer.php:

  else { <br>
    // Get email address from the query string <br>
    $address = $_GET['address']; <br>
    // Validate Address <br>
    if(!preg_match("/^[_a-z0-9-]+(.[_a-z0-9-]+)*@ <br>
    [a-z0-9-]+(.[a-z0-9-]+)*$/i", $address)) { <br>
      $message = "<strong>Error</strong>: An invalid email address was provided."; <br>
    }

Now, load the page, enter your email address, and submit the form — you should see your email address added to the mailinglist table without the page reloading. Even if you disable JavaScript, the page will work in a very similar fashion, except that instead of inserting the output of storeAddress into the page dynamically using JavaScript, it’s inserted directly into the HTML in the page’s PHP code.

AJAX really makes signing up for your mailing list a piece of cake. There’s no waiting for the page to reload, which interrupts your visitor’s browsing experience, and there’s no need to exclude those who browse with JavaScript disabled. Prototype makes the process of building AJAX functionality quick and painless, allowing you to keep in close touch with your site’s fans.

Frequently Asked Questions (FAQs) about Using AJAX with PHP to Build a Mailing List

How can I use AJAX with PHP to build a mailing list?

AJAX, which stands for Asynchronous JavaScript and XML, is a web development technique used to create interactive web applications. PHP is a server-side scripting language designed for web development. When combined, AJAX and PHP can be used to build a mailing list by sending data from a form to a server-side script (PHP) without refreshing the page. This is done using the XMLHttpRequest object in AJAX, which communicates with the server and updates the page content asynchronously.

What is the role of the XMLHttpRequest object in AJAX?

The XMLHttpRequest object is a developer’s dream, as it allows for the updating of a web page without reloading the entire page. It is used to send and receive data from a server asynchronously, which means that it exchanges data behind the scenes with the server, and updates parts of a web page without reloading the whole page.

How can I handle AJAX responses in PHP?

AJAX responses can be handled in PHP using the echo statement. The echo statement is used to output one or more strings. In the context of AJAX, the echo statement can be used to send a response back to the AJAX request.

How can I use jQuery with AJAX and PHP?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. You can use jQuery’s AJAX methods to send asynchronous HTTP requests to your PHP scripts.

How can I debug AJAX and PHP?

Debugging AJAX and PHP can be a bit tricky because AJAX runs asynchronously. However, you can use the browser’s developer tools to inspect the AJAX requests and responses. You can also use PHP’s error reporting functions to catch and handle errors in your PHP scripts.

How can I handle errors in AJAX and PHP?

Error handling in AJAX and PHP can be done using the error() method in AJAX and the die() function in PHP. The error() method is called if the request fails. The die() function prints a message and exits the current script.

How can I use AJAX to submit a form to a PHP script?

You can use AJAX’s post() method to submit a form to a PHP script. The post() method sends a POST request to the server, and it can send form data to be processed by the PHP script.

How can I use AJAX to update a database using PHP?

You can use AJAX to send data to a PHP script, which can then update a database. This is done using the post() method in AJAX, which sends a POST request to the server with the data to be updated.

How can I use AJAX to retrieve data from a database using PHP?

You can use AJAX to send a request to a PHP script to retrieve data from a database. The PHP script can then send a response back to the AJAX request with the retrieved data.

How can I use AJAX to delete data from a database using PHP?

You can use AJAX to send a request to a PHP script to delete data from a database. The PHP script can then send a response back to the AJAX request to confirm that the data has been deleted.

The above is the detailed content of Use AJAX and PHP to Build your Mailing List. For more information, please follow other related articles on the PHP Chinese website!