What Is AJAX

Jobs from Indeed
Published:
By:

Technically speaking AJAX is a term used to describe a group of web application development techniques and technologies such as asynchronous communication, XML, JSON, etc. But in layman or simplified terms AJAX is a method of utilizing content or user interaction within a web page without having to reload the page. This technique is also commonly referred to as Web 2.0.
 
As an example, assuming that a developer has a hyperactive blog on the internet where they discuss their AJAX coding adventures. When a user enters the blog address in their web browser the web page for the blog is requested from the web server and is delivered over the internet to the web browser on the user's PC.
 

The developer who writes to the blog creates many posts live while he is developing code and wants his blog users to be updated with the most recent blog posts on his web page without the need to keep reloading the entire page. So the developer includes an AJAX based component in the web page that automatically requests updates from the blogging web server. The AJAX component will send its own request to the web server for the specific updates it requires and when the updates are returned the AJAX component will update that part of the web page with the latest blog information from the web server.
 
 
 
The live blog feed can automatically and continually update the blogging portion of the web page without ever requiring a refresh of the page itself or requiring any actions by the user. It is also important to note that the AJAX response from the server does not need to be an XML response. The server response can be as simple as plain text from the blog post that will be displayed on the web page, HTML formatted for display in the blog page, or JSON to be converted into a Javascript object.
 
The AJAX method can also be used for user interaction. Again assume we have a developer blog site and the developer has a contact form on the web site where users can enter their name and an e-mail address so the developer can contact them via e-mail with relevant information from the developer blogging site. Rather than use a normal form submission that will reload the entire page the developer can implement AJAX to submit the form to the web server and receive a response.
 
The AJAX component will send the AJAX request to the web server with the values from the form submission and can replace the form in the page with the web server's response without ever refreshing the page.
 
 

AJAX benefits.

Using AJAX for dynamic web page content and user interaction can reduce the load on the web server and Internet connections by transmitting only the necessary information to update a page or interact with a user while the rest of the web page remains loaded and static in the web browser.
 
The use of AJAX for user interaction can also make a web site more responsive. Rather than reload the entire web page each time a user submits a form or clicks on links and buttons, AJAX can be used to process the user interaction in a more granular fashion and refresh only the significant parts of the web page currently displayed in the user's browser.
 

Potential AJAX Issues

The use of AJAX does not come without its own set of issues. First it requires that the user's browser have Javascript enabled. If the user has disabled Javascript then a web site that is dependent upon AJAX will no longer function properly. When using AJAX in a web site a developer must decide whether they will make Javascript mandatory for the web site or if they will invest in additional code and testing to ensure the site will work with and without AJAX.
 

AJAX Implementation Tip

There are some differences between web browsers in their implementation of AJAX components and cross browser compatibility can be an issue. A good work around to cross browser compatibility is to use one of the various Javascript libraries that provides AJAX functionality. The jQuery library is an excellent example of a Javascript library that provides AJAX functionality and cross browser compatibility.
 
Looking back to the live blog AJAX example if we assume the live blog feed is always updated in a file named livefeed.html on the web server we can use the following jQuery AJAX call to get the live feed from the web server without refreshing the entire web page.
 
$.get('http://myblog.com/livefeed.html', function(feedresults) {
  // feedresults has the fresh feed 
});
 
The jQuery get command will request the livefeed.html page and the results will be returned in the feedresults variable.

Conclusion

AJAX can be used to provide additional features to a web site, improve performance, and make the user experience more positive. While the technical details required for AJAX implementation can be rather complicated there are many Javascript libraries available the simplify this process significantly.