AJAX tutorial for PHP developers

PHP developers sometimes get confused by AJAX. This is not due to the fact that AJAX is difficult to grasp, but it's all because they often don't know how AJAX actually works. JavaScript makes a request, PHP responds by returning some kind of output. Is that all? No. The first thing you need to understand about AJAX is that many times the final result depends on how the request is constructed and how the web browser interprets the response. In this post I'm going to discuss with you some of the key aspects that a PHP developer should know about AJAX.

Response formats

An AJAX request is always followed by a PHP response. This response comes in the form of an output sent by the PHP script. Such output can be returned in several formats, including:

1. text/plain

   This is useful for simple messages that are often inserted by JavaScript as the text content of an HTML element:

   header('Content-Type: text/plain');
   // process request parameters,
   // store the output in $output
   
   echo $output;
   

   JavaScript uses this output as follows:

   // using jQuery's ajax()
   
   success: function(message) {
     $('#message').text(message);
   }
   

   You can use this format also for delivering CSV files to browsers, which can't handle the application/csv content type.

2. text/xml, application/xml

   This is useful for more complex data and returns an XML document or any XML-based document format (such as RSS or even an Excel file):

   header('Content-Type: text/xml');
   // create an XML document, such as $xml
   echo $xml;
   

   You can create an XML document either using a string-based approach or more advanced XML-based approaches (such as DomDocument). When you return such format, JavaScripts expects an XML document and uses this format as follows:

   // using jQuery's ajax()
   
   success: function(xml) {
   
     $(xml).find('item').each(function() {
     
     
       // process each item element
     
     });
   
   }
   

3. application/json

   The JSON format is also useful for more complex data as the XML format, but it's much lighter:

   header('Content-Type: application/json');
   // create a JSON object, such as $json
   echo $json;
   

   You can create a JSON object using the json_encode() function, typically from an associative array. JavaScript expects a JSON object to be returned:

   // using jQuery's ajax()
   
   success: function(json) {
   
     $.each(json, function(index, value) {
     
     
       // process the JSON object's properties
     
     });
   
   }
   

4. text/html

   The HTML format is a subtype of text/plain and is often used for inserting large portions on new content into a page:

   header('Content-Type: text/html');
   // create HTML content, such as $html
   echo $html;
   

   It's preferable to specify the content type even though PHP automatically returns HTML by default for consistency reasons. JavaScript processes this output as follows:

   // using jQuery's ajax()
   
   success: function(html) {
   
     $('#message').html(html);
   
   }
   

URL parameters

Most JavaScript frameworks handle URL parameters in two ways: as objects or as plain parameters. Objects are automatically converted to URL parameters when sent to the PHP script. So the following object:

var params = {
  q: 'css',
  results: 10
};

becomes:

q=css&results=10

On the contrary, plain parameters are usually sent as normal dynamic PHP URL parameters:

// using jQuery's ajax()
data: 'q=css&results=10'

JavaScript can also encode URL components using its built-in functions, so it's always a good thing to decode such components before processing the request. Always remember that since AJAX is asynchronous, the URL will never be shown by the browser.

Request types

JavaScript can actually sends either GET or POST requests that a PHP script can handle very easily. JavaScript always specifies the type of request when it performs an AJAX call:

// using jQuery's ajax()
type: 'GET'

It's always better to stick to $_GET and $_POST instead of relying on $_REQUEST.

Errors

If something goes wrong, AJAX fails. This can actually occur either when your PHP script produces an error or when JavaScript sends a wrong request. For example, if your script returns a MySQL error, this error will be returned to the web browser. If the JavaScript code didn't set an error handling routine, then it won't notice the error but it will simply see that its call returns no results. Fortunately, JavaScript frameworks provide useful error handling routines:

// using jQuery's ajax()

error: function(message) {

  // handle the error


}

Sometimes, instead, it's JavaScript that produces an error, simply because it has sent a wrong request, for example by omitting some parameters. In this case, it's always a good thing to run a full preliminary validation routine in order to check if the request has been sent correctly. If not, you will return an error message.