Yes, AJAX happens to be the name of a wonderful soap that is “Stronger than grease,” but AJAX is also the name of a web technology that powers some of the internet’s most popular websites. If you’ve ever used Twitter, Google Maps, or Facebook, you’ve seen AJAX in action.

AJAX and the Web

AJAX (Asynchronous JavaScript and XML) allows web pages to send new information to or fetch new information from a web server without causing the page to reload (asynchronously). You can see this in action when you scroll down on Twitter and new tweets start to load without the page being refreshed and when you’re panning around a map on Google Maps. If you want to see AJAX working you can open up your browser’s developer console (CMD+Option+J on Chrome for Mac) and then right click in the console and select LogXMLHTTPrequests.

As you can see in the above photo, Google Maps is making numerous GET calls to the server, a GET request is used when we want to receive new information from the server. When making a GET request we can pass data to the server, such as a location you type into the google map search box, and then the server will respond to that request, for example, sending the proper information for the location you requested.

In addition to GET requests, there are also POST requests. POST requests are used when the information sent to the server should be stored, such as your login information when you sign up for Twitter. There are a few more types of requests, but they aren’t used that often, you can read more about them here.

AJAX makes all of the previous server communication possible by using a JavaScript object called XMLHttpRequest

Now, let’s take a look at how you actually make an Http Request.

HTTP Requests

There are four steps to making an Http Request:

  1. Create a new XMLHttpRequest Object
  2. Define a callback function (tells the program what to do when a response from the request is received from the server)
  3. Call the open method (this is where you specify the type of request)
  4. Call the send method (this sends the request to the server)

Now, I will show a simple example of the previous four steps in action.

In the above code, when the button on the page is pressed, the document “addMe.html” will be added to the page where the id=”addHere” is located.

What’s next?

As we’ve seen AJAX is an extremely powerful and cool web technology and this post only briefly introduced what AJAX is and how it works. If you want to learn more I would recommend taking a look at the following resources:

In my next blog post, we’ll take a look at how to use AJAX along with jQuery, jQuery makes things a little easier so be sure to check it out.