Ajax is a technique the lets you request data from a web server, update content on a web page without loading a new page and post data to web server without refreshing the page. The data is often sent in a format called JavaScript Object Notation (or JSON).

What is Ajax

Have you ever been on a website and begin to type in a word and it autocompletes for you? Have you ever shopped online and added an item to your cart and noticed the cart is updated with out leaving the page? Maybe you have completed a registration form online and it lets you know whether it was completed successfully without refreshing the page or even checks to see if a username has been taken before submitted the for. Have you ever used Twitter or Facebook? Do you notice how you are able to post a message or tweet and see other message or tweets without the page refreshing? All of this happens with the magic of Ajax.

Ajax stands for Asynchronous JavaScript and XML, which has actually been around since 1999 but was referred to back then as XMLHttpRequest Object. JavaScript is the programming language that makes Ajax happen in that it sends a request, gets a response and updates content asynchronously. The asynchronous processing model means that a user can do other things on the website with the browser is waiting for the data to load on the page, allowing for a better user experience.

Why use Ajax?

Typically when a browser comes across a <script> tag, it will stop processing the rest of the page until it has loaded the script. This is a synchronous processing model. If a page is loading and has to wait to collect data from the server it also has to not only wait for the script to be loaded and processed but it also has to wait for the server to send the data (the response) that the script is going to display.

With Ajax the browser can request something from the server and while it is waiting a response, the rest of the page can still load allowing the user to still interact with the web page. This is an asynchronous processing model and the beauty of Ajax. When the response comes back you want to update the page with the new information. Typically this would be done with refreshing and loading a whole new page. With Ajax it allows you to just update a specific part of the page with content, by utilizing an event handler and requesting the content from the server with an asynchronous request. Meanwhile the user can continue to interact with the web page and will thus allow the data to load faster.

How Ajax Works

As stated before Ajax is really and XMLHttpRequest Object (XHR). It is the process of using JavaScript to send a request to the web server, get a response from the server and then update the content on the web page with that response. A user can continue interacting with the browser until a response is ready to comeback at which point and event is fired and JavaScript calls a function which then updates the content on the page.

You can break the Ajax processing into four parts 1. Create an XMLHttpRequest Object 2. Define a Callback Function 3. Open a Request 4. Send a request

Let look how you handle requests and responses

1
2
3
4
5
6
7
8

  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if(xhr.readyState === 4 && xhr.status === 200) {
      // code to process results from the server;
    }
  };
  xhr.open('GET', '../data/students.json');
  xhr.send();

Let’s discuss every aspect of this request and the response

The Request

1. var xhr = new XMLHttpRequest();: creates an instance of the XMLHttpRequest Object using the new keyword and stores that instance in a variable. You can name the variable whatever you like in our case we named it xhr, which is the abbreviation for the XMLHttpRequest.
2. xhr.open('GET', '../data/students.json');: this method prepares the request and it takes two required parameters:
   1. The HTTP Method usually a GET or a POST.
      • GET Request – Used when wanting to receive information from a database or server.
      • POST Request – Used when wanting to save information, save from a form, to a database.
   2. The url of the page that will handle the request.
3. xhr.send();: is the method that sends the request to the server.

javascript The Response – The Callback

1
2
3
4
5

 xhr.onreadystatechange = function () {`
  if(xhr.readyState === 4 && xhr.status === 200) {
      // code to process results from the server;
    }
  };

This is the callback function and it is the programming you want to run when the server sends back its response.

1. xhr.onreadystatechange = function (): In our example the callback sends back a readystatechange. When the browser has received and loaded a response from the server the onreadystatechange will fire and trigger a function.
2. if(xhr.readyState === 4 && xhr.status === 200): Once the request/response goes through many changes before it is ready to comeback to the browser. Once it hits a readyState of 4 the web server has sent back everything it is going to send. The response also has a statusText, which lets us know if the status came back successfully. We ultimately want a status code of 200-‘OK’ before content is loaded on the page, but there are several status that the response can come back as:
   1. 2xx – Success, 200 – OK
   2. 3xx – Redirection
   3. 4xx – Client Error, most common 404 – File not found
   4. 5xx – Server Error The Internet Assigned Numbers Authority (IANA) maintains a complete list of HTTP Status Codes

Data Formats

The response (callback) to the request can come back in one of three formats HTML, XML or JSON. The format in which you receive information back is important because you could receive a lot of information back and you want to ensure you have a good data structure in place in order to utilize the data to display on the page * HTML: Hypertext Markup Language – The simplest way to get data into a page * XML: Extensible Markup Language – which is very similar to HTML but uses its own tags names to describe the data it contains * JSON: JavaScript Object Notation – uses syntax like object literal notation to represent data

For the purposes of this blog we are going to focus on JSON, which is more concise than HTML/XML and is commonly used with JavaScript.

JSON: JavaScript Object Notation

JSON data looks a lot like object notation, but it isn’t an object it is plain text. The object notation consists of key and values.

• The object notation is placed in curly brackets {}
• Keys – or name is placed in double quotes and is separated by the value with a colon.
• Values – can be any of the following data types: string, number, boolean, array, object
• The key/value pairs are separated by commas.

This is an example of Object Notation

1
2
3
4
5

  {
   "name": "Amy",
   "registered": false,
   "age": 15
  },

JSON can also be written in Array Notation in which we can have an array called students and we can have say a series of students in object notation.

• The array uses square bracket notation
• The array holds several objects

This is an example of Array Notation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  "students": [
    {
     "name": "Amy",
     "registered": false,
     "age": 15
    },
    {
     "name": "Amber",
     "registered": false,
     "age": 12
    },
    {
     "name": "Bojana",
     "registered": true,
     "age": 13
    }
  ]

As stated earlier JSON is really just string of plain text. In order for JavaScript to use the data we need to format it into an object. JSON.parse() will convert a string of JSON data into a JavaScript objects ready for the browser to use and then we store it into a variable var students. The HTML added using the innerHTML property. We will first create a variable var statusHTML which will store the HTML data. Because we are bringing back an array of objects we will need to loop through the object to access the data using dot notation. The contents of the object are added to statusHTML variable. When the loop has finished the stuents objects, the new HTML is added to the page using the inner HTML property.

This is a full example of Loading JSON with Ajax. In this example we are taking an array of students and determining if they have registered for a class. If they have registered it will be false if they have not registered it will be true. We will show a yes button if registered and a no button if not registered.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var xhr = new XMLHttpRequest();                   //Create XMLHttpRequest object

xhr.onreadystatechange = function () {            //When readystate changes 
  if(xhr.readyState === 4 && xhr.status === 200) { //If readyState is 4 and status ok
    var students = JSON.parse(xhr.responseText);

    //Build up the string with statusHTML
    var statusHTML = '<ul class="bulleted">';
    for (var i=0; i<students.length; i += 1) {  //Loop through the Object
      if (students[i].registered === true) {
        statusHTML += '<li class="yes">';
      } else {
        statusHTML += '<li class="no">';
      }
      statusHTML += students[i].name;
      statusHTML += '</li>';
    }
    statusHTML += '</ul>';

    //Update the page with new contenct
    document.getElementById('studentList').innerHTML = statusHTML;
  }
};
xhr.open('GET', '../data/students.json');        //Prepare the request
xhr.send();                                      //Send the request

If you want to see the full code for this please visit my Git Repository Ajax Basics. Remember you will need this on a server in order like localhost:3000 in order for this to work.

jQuery and Ajax

jQuery and Ajax Requests

jQuery provides several methods to handle Ajax requests. Below are 6 methods

• .load() Loads HTML fragments into an element and is the simplest method for retrieving data.
• $.get() Loads data using the HTTP GET method and is used to request data from a server or get retrieve data from a database
• $.post() Loads data using the HTTP POST method and is used to send data to a server and exampler would be storing data from a submitted form to a database.
• $.getJSON() Loads JSON data using a GET request Used for JSON data.
• $.getScript() Loads and executes JavaScript data using GET.

• $.ajax() This method is used to perform all requests. There are a few reasons you would use $.ajax() method over the $.get() or $.post()methods

• The $.ajax() method has more options and provides greater control over Ajax requests

• The method lets you set a timeout to control how long you are willing to wait for a response from the server
• The method lets you send a username + password to resources that require user authentication.

You can see a list of the requests on the jQuery API Documentation and a comparison of the different request at this Comparison Table

jQuery and Ajax Responses

With The .load() method, the HTML returned from the server is directly inserted into the jQuery selection. Below is an example of this

1
2
3

function sendAjax(){
  $('#ajax').load('sidebar.html')
}

This is the shorthand notation that loads the contents from sidebar.html into an HTML element with and ID of ajax. For other methods aside from the .load() method, utilize the jqXHR object to specify what should be done when the data is returned. Below are JQXHR Properties

• responseText – Text-based data returned
• responseXML – XML data returned
• status – Status code
• statusText – Status description (typically used to display information about an error if one occurs)

The jQuery Ajax Shorthand methods

GET Method Request

The structure of the GET method is as follows $.get(url, data, callback)

• url – specifies where the data is coming from
• data – provides any extra information to send to the server.
• callback – indicated that the function should be called when data is returned.

The get method could be used instead of the .load() method used above

1
2
3

$.get('sidebar.html', function(response) {   //in this case there is no data 
  $('#ajax').html('response');
});

POST Method request

Like the GET method the structure of the POST method is the same $.post(url, data, callback) In the below we are going to look at submitting a form to a data base

1
2
3
4
5
6
7
8
9
10
11

  $(document).ready(function() {                  //JavaScript doesn't until page loaded
  $('form').submit(function(e) {                  //Submits the Form
    e.preventDefault();                           //Prevents new page load when form submitted 
    var url = $(this).attr("action");             //post action by clicking the submit button
    var data = $(this).serialize();               //captures the data entered in form fields
     console.log(data);
    $.post(url,data,function(response) {          // Post Method and callback function
      $('#signup').html("<p>Thanks for signing up!</p>")   //Replaces the html
    });
  });
}); // end ready

Let’s dissect this code.

1. $(document).ready(function() is needed when you put the script tags at the top of your index.html file. It prevents the javaScript from running until the page is load.
2. e.preventDefault(); is a method used to stop the form from submitting and going to another page.
3. .serialize() is a method used to capture the name and attributes of the form. The puts information in a nice format in order to send the data to the server and store it in the database.
4. $.post(url,data,function(response) This is the POST method Ajax request that request information from the server and once complete brings back a response to be loaded to the page
5. $('#signup').html("<p>Thanks for signing up!</p>" This is the HTML that will be loaded on the page.

To understand this more or to see more of this code you can visit my GITHUB Repo jQuery Ajax, but I highly recommend going through the Ajax tutorial on TeamTreehouse. This specific example and several other demonstrated in this blog are on that tutorial and really helped me learn the material. Go through it in detail and it will discuss more about the jQuery Ajax methods and error handling. For a full list of the jQuery Ajax Shorthand methods visit the jQuery API Documentation

Ajax Limitations

One big limitation of Ajax is that works great with data from your own server but for security reasons – browsers don’t load Ajax responses from other domains. You will have trouble doing the following

• Requesting data from another site
• Switching ports – You can’t switch from port 80 to port 8888
• Switching host – You can’t go from www.myblog.com to db.myblog.com

There are 3 workarounds however that will allow you to receive Ajax responses from other domains.

1. Web Proxy – in which you create a file on your server that collect data from the remote server using a server side language like (Ruby, PHP, Node.js etc.). The other pages on your site then request the data from the file on your site. This is called a proxy.
2. JSONP – This is JSON with padding which involves adding <script></script> into the page which will load the JSON data from another server.
3. CORS – CORS is Cross Origin Resource Sharing, which involves adding extra information to the HTTP headers to let the browser and server know that they should be communicating with each other. CORS is a W3C specification but is only supported by the most recent browsers.

I hope this has been helpful for you. In my next blog post on Ajax, I will discuss how you can use APIs using Ajax.