Introduction

You surely know how typical web applications work. You enter a URL in your browser and the browser loads that page for you. If you are required to submit a form, you will fill it and the browser sends the filled data to the server side for processing. During this time you wait for the entire page to load. If you are on a slow connection, the wait is even longer.

Let me describe another typical scenario, a web page has two select boxes. The first select box asks you to select the name of a country. You make your selection and the whole page loads to populate the second select box with the names of the cities in that country. If by mistake you made a wrong selection, fixing your mistake means another page load. Irritating isn't it?

The point I am trying to make here is: why load the complete page every time? Why can't you just select the country name and using some magic in the background be provided with the city list without loading the complete page? Maybe you can fill some other fields if the request is taking longer.

This is where AJAX fits. AJAX is short for Asynchronous JavaScript and XML. AJAX is a technique through which client-side scripts can interact with the server-side scripts using standard HTTP protocols. Data can be moved back and forth between a client and a server script without full page reloads.

Let's find out the meaning of AJAX word by word.

  • Asynchronous: Asynchronous means that requests are made in the background eliminating the need for a full page load. They can also be sent in parallel, and in the meantime the user can continue interacting with other elements on the page. Users do not have to wait for AJAX requests to complete. Remember the previous country-city example? Yes it can be done.
  • JavaScript: JavaScript means that the request to the server originates from JavaScript. Browsers have their own implementation of what is called an XMLHttpRequest object. It is not a standard but different browsers have their own implementation for it.
  • XML: AJAX requests can be made to any platform be it a PHP page or a Java page. Therefore, to exchange any data between a client and server, there arises the need for a common format that can be understood by both JavaScript and server-side language. One such format is XML. Data can be transferred between both client and server using XML format.
  • The XML in AJAX does not necessarily mean XML only. Data can be exchanged in other formats as well. It can be your custom format, text, HTML, or JSON too. Most common formats today are HTML and JSON.

Since the XMLHttpRequest implementation of browsers vary, jQuery has wrapped this functionality providing us with an array of cross-browser methods to work with AJAX requests.

In this chapter, you will get to know multiple AJAX methods of jQuery to transfer data between JavaScript and PHP. You will learn to create AJAX requests, send data to the PHP script, and perform actions on the received data.

We will also go through error handling mechanisms provided by jQuery.

In this chapter, we will primarily work with HTML or text response. Since JSON and XML are topics that need to be looked upon in detail, we will discuss both of these in separate chapters.

Tip

In all the recipes, we will add the jQuery file and other jQuery code just before the body tag closes and not in the head section as you might have seen so far. Placing the files in the head section blocks the rendering of a page until all JavaScript files have been loaded. By putting them at the end of page, the HTML will be rendered without the browser blocking anything and DOM will be ready. After the page is loaded, we can then add the JavaScript or jQuery files. This will make your pages faster.

上一章目录下一章