Introduction to AJAX

What is AJAX?

AJAX stands for Asynchronous JavaScript and XML. AJAX communicates with the server in the background through HTTP GET and POST requests. AJAX allows us to load data from a server without a page refresh. An essential component for developing interactive websites, almost every modern website utilizes the AJAX framework.

Traditional vs AJAX web model

The workflow on an HTTP request in a traditional web model is shown below:

The workflow on an HTTP request in an AJAX-based web model is shown here:

The above illustrations show the difference between a traditional web model and an AJAX-based web model.

• In the case of a traditional web model:

  • The browser sends a blocking HTTP request to the server and waits for the server response.
  • The server returns a complete new web page with the entire HTML and CSS content.
  • The browser loads the new webpage.

• In the case of an AJAX-based web model:

  • The browser calls the appropriate AJAX method in jQuery.
  • The AJAX method sends a non-blocking HTTP request to the server in the background.
  • Instead of an entire web page, the server returns only the relevant new content to the web page in JSON, XML, or text format.
  • The jQuery AJAX method receives that data in its callback function and updates the web page HTML or CSS content accordingly, without reloading the entire page.

Advantages of using AJAX in jQuery

The main advantages of using AJAX, and particularly AJAX, in jQuery are:

• Avoid page reload - AJAX requests, as mentioned above, update the web page dynamically without a page refresh.
• Cross-browser compatibility - Different browsers can have different syntaxes for making AJAX requests. jQuery eliminates this problem by providing a single interface for all browsers.
• jQuery AJAX methods - jQuery provides us with various AJAX methods such as GET, POST, etc. These straightforward methods remove the unnecessary complexity of underlying AJAX requests.

AJAX methods in jQuery

The two most common AJAX methods in jQuery are:

• GET method
• POST method

GET and POST methods are often confused. There is a misconception that GET is only used for fetching data, whereas POST is for uploading. However, that is not the case. Both methods can fetch and upload data. The difference lies in the transfer of data.

• In the case of the GET method, information is sent to the server using the request URL.
• But in the case of the POST method, information is sent to the server separately via the request message body, not the URL.