What is AJAX?

AJAX

Ajax, or Asynchronous JavaScript and XML, is a powerful tool utilized by many websites to facilitate loading data into webpages without having to refresh the page. Ajax is everywhere. For example, the live search results in the Google search bar are powered by Ajax. Ajax can also be found on websites that display a feed of their latest tweets, or a shopping application that updates a shopping cart every time an item is added. Let’s dive in to the specifics of what Ajax is and how it works.

Synchronous vs. Asynchronous

Since the A in Ajax stands for asynchronous, we need to define what that exactly entails. An asynchronous processing model is a model in which a user can do other things while the web browser is waiting for the data to load. This is in contrast to the synchronous processing model, which defines the standard behavior of the web browser. In this model, when a browser comes across a tag, it will typically stop processing the rest of the page until the script itself has been loaded and processed (this is why we typically put tags at the end of the page).

With Ajax, the browser can request some data from a server and continue to load the rest of the page, after the data has been requested. Additionally, Ajax allows you to update the content of one element on the page if you don’t want to update the entire thing.

How it Works

Ajax works in 3 steps:

  1. The browser requests information from a web server

  2. The browser processes the server’s response

  3. The browser shows the information on the page

Let’s create a sample request:

var request = new XMLHttpRequest(); // create an instance of request object
request.open('GET', 'test.html', true); // prepare request
request.send(null); // send the request

Response:

request.onload = function() {
    if (request.status === 200){ // make sure the response was okay (doesn't work locally)
        // process
    }
}

This was just a simple introduction into what Ajax is, I will go over how to actually use it to process data in a later post. Be sure to check it out!

Advertisements
What is AJAX?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s