Search results

JavaScript: AJAX

AJAX ("Asynchronous JavaScript and XML") is a technique that allows you to make calls to the server without reloading the page. The calls take place repeatedly in the background, allowing the server to return information to show new content in a seamless experience for the user.

Some common examples of AJAX include Google's auto-complete responses in the search field. As soon as you start typing in the search field, you see responses in real time, without any page refreshes.

Another example of AJAX is Google Maps. As you drag the screen in new areas, new map content loads from the server dynamically.

The infinite scrolling in Gmail and Google Reader also use AJAX functionality. As you scroll down, calls are made in the background to load new content from the server. The new content loads dynamically, without requiring page refreshes.

Two Components of an AJAX Call

Although making AJAX calls is more of an advanced technique in JavaScript, the following notes show the basic pattern so you can better recognize when AJAX is present.

AJAX uses a new object to make the calls: XMLHttpRequest. However, unlike other functions, AJAX splits the call and response into two separate steps. This division of steps with the call and response allows for the asynchronous element of AJAX.

The XMLHttpRequest Object

The first step is to create a new XMLHttpRequest object. Because of some cross-browser incompatibility in calling the XMLHttpRequest object, you have to create a conditional statement to account for Internet Explorer. With this conditional statement in mind, you create the new object as follows:

var sampleRequest;
//check the browser -- if a non-IE browser, create this object
if (window.XMLHttpRequest) {
    sampleRequest = new XMLHttpRequest();
//otherwise, if IE, create this object
} else if (window.ActiveXObject)  {
    sampleRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

This above code doesn't specify exactly where on the server the request is being made. However, before you specify more details about the request, you have to specify how to handle the response that will come back from the server.

To handle this response, you use the onreadystatechange event to call an anonymous function. The basic format of this event in a JavaScript statement is as follows:

//apply the onreadystatechange method for this request
sampleRequest.onreadystatechange = function() {
//run some code here...
};

Now that you've defined how to handle the responses from the server, you can write a more specific request to send. The specific request might look as follows:

//specify the type of request and where to send it.
//"true" means as soon as you send,
//let browser to respond without waiting.
sampleRequest.open("GET","http://testsite.com/data.php", true);
//send the request. In parentheses, insert parameters.
sampleRequest.send();

AJAX calls are more advanced and would contain more detail, but this is the basic pattern of the call.

About Tom Johnson

Tom Johnson

I'm an API technical writer based in the Seattle area. On this blog, I write about topics related to technical writing and communication — such as software documentation, API documentation, AI, information architecture, content strategy, writing processes, plain language, tech comm careers, and more. Check out my API documentation course if you're looking for more info about documenting APIs. Or see my posts on AI and AI course section for more on the latest in AI and tech comm.

If you're a technical writer and want to keep on top of the latest trends in the tech comm, be sure to subscribe to email updates below. You can also learn more about me or contact me. Finally, note that the opinions I express on my blog are my own points of view, not that of my employer.

© 2024 Tom Johnson