The Power of jQuery with Ajax

As the web evolves, new technologies are emerging and uniting in remarkable ways. The combination of Ajax and jQuery, in particular, is one of the most powerful unions to date. The purpose of this article is to give a brief and generalized overview of both Ajax and jQuery, and also discuss how jQuery has made Ajax development easier than ever before.

What is Ajax?

Since its conception in 2005^[1], Ajax (Asynchronous JavaScript and XML) has changed the web as we know it today. It’s helped websites evolve into Rich Internet Applications (RIAs) by allowing web pages to make direct requests to web servers without reloading the page. This capability is vital in replicating the rich user experiences achieved in client applications.

Ajax in Practice

Let’s say that you have a login form for your web application. To ensure that the provided login name and password entered by the user is a match without using Ajax, your web application would have to load a whole new web page that shows an account screen if the login was successful, or show an error screen if the login failed. This is the old way of handling logins.

A more savvy approach to this problem would be to check if the login and password is correct using Ajax. Here’s how Ajax would work in this instance: Once the user has typed in a login name and password and submitted the login web form, you could have a JavaScript function that invokes an Ajax call that sends two parameters — the login name and password. The web server (usually through a server-side script/language such as PHP) takes the two parameters and then queries your user database to see if there is a match.

If there is a match found in your database, then the web server can return a success flag. Otherwise, the web server could return an error message. Next, you would then have a JavaScript function that accepts the Ajax response.

If the response is successful, it could use window.location to send the user to their account screen. If the response contains an error message, the application can display the error on the screen without ever reloading the page. The main thing to take away from this is that you don’t have to reload an entire page just to handle username/password verification, making your web application more responsive and, if the page is heavy, saving you some significant bandwidth.

What is jQuery?

Released in January of 2006^[2], jQuery is a cross-browser JavaScript library designed to simplify the client-side script of HTML. Used by close to a million websites^[3], jQuery is the most popular JavaScript library in use to date. jQuery makes it easy to handle DOM objects, events, effects and Ajax, automatically takes care of JavaScript leaks, and has countless third-party plugins.

The Problem with Ajax

Despite its revolutionary impact on the web, Ajax can be difficult to use even for veteran developers. People will usually create their own custom functions to handle Ajax calls so that the functionality can be reused across a web application. This can become very tedious when a web application makes use of different types of Ajax calls — such as the ability to handle both synchronous and asynchronous calls — or the ability to handle different response formats such as string messages, HTML, CSV, XML, JSON, etc.

As a professional web developer, I’ve personally spent countless hours building custom methods to handle Ajax calls. Traditional Ajax calls usually take on the following form:

function httpRequest(id) { if (window.XMLHttpRequest) { // code for IE7+, FF, Chrome, Opera, Safari http=new XMLHttpRequest(); } else { // code for IE6, IE5 http=new ActiveXObject("Microsoft.XMLHTTP”); } http.onreadystatechange=function() { if (http.readyState==4 && http.status==200) { response = http.responseText; // do something with response } } dest=”servlet.php?id=” + id; http.open("GET”, dest); http.send(); }

If your web application only uses one Ajax call, it’s not that big of a deal to implement. The problem occurs, however, when your web application leverages lots of Ajax calls and you try to break the code apart to make it reusable.

The idea of Ajax is to send a request to some web server, wait for a response, and update your HTML page. It would be convenient to create a custom function like httpRequest() that takes two parameters — a request URL and a response function — that could be reused throughout your system. Once you start setting this up, however, you’ll immediately see that the simple task of making an Ajax call suddenly becomes a nightmare when you try to construct response function evaluations using eval() and figuring out how to make your new function handle synchronous calls, asynchronous calls, and different response formats.

At the end of the day, the simple idea of creating a custom httpRequest() function quickly turns into a big project. The other advantage of jQuery is that it has additional Ajax functions and methods that you can use, which can further reduce development and debugging time.

Hello Ajax.

Meet jQuery.

Among other advantages, one of my favorite features of jQuery is its ability to leverage Ajax with very little effort. To make an Ajax call, you can do something like this:

$.Ajax({ type: "POST", url: "some.php", data: "name=John&location=Boston", success: function(msg){ alert( "Data Saved: " + msg ); } });

If you’ve developed Ajax applications before without jQuery, you’ll immediately see the value here. jQuery has put all of the properties of Ajax into one simple API.

You can control everything including the url, cache, success function, data type, and even synchronization, all from one neat declaration. It’s nothing short of beautiful.

Get Started with Ajax + jQuery

If you’re not using a JavaScript Web Development framework like jQuery or MooTools yet, and you’re planning on creating responsive web applications, you should leverage these awesome libraries.

For jQuery, the following list highlights some tutorials you can check out.

• AJAX Contact Form without page reload
• Easy Ajax with jQuery
• How to Load In and Animate Content with jQuery

References

1. Ajax: A New Approach to Web Applications
2. jQuery 1.0
3. jQuery Usage Statistics

Related Content

• Getting Started with jQuery
• Create a Slick and Accessible Slideshow Using jQuery
• 10 Easy jQuery Tricks for Designers
• Related categories: JavaScript and Web Development