What is Ajax and Why Use It?

Ajax is a JavaScript library that you plug in to your HTML pages. Just like previous lessons used the "script" tag to link external JS files, Ajax is also an external library file you link to in your HTML pages. Ajax has expanded to several library versions that contain different functionality, so you might notice that some developers link to several Ajax files.

In previous lessons, we loaded the web page and sent input from the user to a JavaScript function. The entire page sends back input to a server-side processing page and then returns the entire response page back to the user. With Ajax, input and response are asynchronous, which means that you don't need to send the entire page back to the server. At first you might wonder how this is an advantage over using simple JavaScript, but asynchronous calls are not only more convenient and user friendly, but they also take a processing load off of your server and save resources.

A good example of Ajax benefits can come from the previous lesson. We had a select box that loaded options when the user clicked a radio button. What if we had several hundred options in a database and needed to load a subset based on user input. We can't put all of the options statically in a JavaScript function. This type of logic would become increasingly cumbersome and difficult to manage. Instead, we make a call to the web server that then calls the database for a list of options. What's the best way to do this? Using Ajax!

Using the select drop-down example, Ajax lets you make a call to the web server in the background. The web page stays on the user's window, so it's invisible to the user. The user just sees a change in drop-down options after a radio box selection is made. This type of user interface is more convenient to the user and adds faster response times to your UI. Since user friendly interfaces can attract users, implementing Ajax is a benefit to your web pages especially when you have database intensive queries and front-end pages.