Post
Ask Question

What Is AJAX

What is meant by AJAX?

  • AJAX stands for Asynchronous JavaScript And XML. It enables web applications to retrieve data from the server asynchronously. A web application using AJAX is capable of partial page updates.
  • AJAX is "the method of exchanging data with a server, and updating parts of a web page - without reloading the entire page".
  • AJAX is not a programming language but a technique for creating fast and dynamic webpages.

AJAX syntax

 
$.ajax({name:value, name:value, ... })
 

AJAX Method Parameters

 
Name Description
type It is used to specify the type of request (GET/POST).
url It is used to specify the URL to send the request to. Default is the current page.
username It is used to specify a username to be used in an HTTP access authentication request.

xhr		 It is used for creating the XMLHttpRequest object.
async Its default value is true. A Boolean value indicating whether the request should be handled asynchronously or not.
beforeSend(xhr) It is a function which is to be run before the request is being sent.
dataType The data type expected of the server response.
error(xhr, status, error) It is used to run if the request fails.
global Its default value is true. It is used to specify whether or not to trigger global AJAX event handles for the request.
ifModified Its default value is false. It is used to specify whether a request is only successful if the response has changed since the last request.
jsonp A string overriding the callback function in a jsonp request.
jsonpCallback It is used to specify a name for the callback function in a jsonp request.
cache Its default value is true. It indicates whether the browser should cache the requested pages.
complete(xhr, status) It is a function which is to be run when the request is being finished.
contentType Its default value is: “application/x-www-form-urlencoded” and it is used when data send to the server.
context It is used to specify the “this” value for all AJAX related callback functions.
data It is used to specify data to be sent to the server.
dataFilter(data, type) It is used to handle the raw response data of the XMLHttpRequest.
password It is used to specify a password to be used in an HTTP access authentication request.
processData Its default value is true. It is used to specify whether or not data sent with the request should be transformed into a query string.
scriptCharset It is used to specify the charset for the request.
success(result, status, xhr) It is to be run when the request succeeds.
timeout It is the local timeout for the request. It measured in terms of milliseconds.
traditional It is used to specify whether or not to use the traditional style of param serialization.
 

How AJAX works?

 
What is AJAX
  • A user sends a request from the UI and a JavaScript call goes to XML HttpRequest object.
  • An HTTP Request is sent to the server by XML HttpRequest object.
  • Server interacts with the database using a programming language (JSP, PHP, Servlet, ASP.NET, etc.)
  • Data is retrieved.
  • Server sends XML data or JSON data to the XML Http Request callback function. 

Advantages of AJAX

  • AJAX applications are non-blocking. As AJAX request are asynchronous, the user does not have to wait for the request processing to complete.
  • AJAX is not difficult, you can easily implement AJAX in a meaningful manner.
  • Better performance and reduced network traffic.
  • No screen flickers when the portion of the page updated.
  • Very much useful for real-time applications.
  • AJAX improves speed and performance when fetching data from the database and storing data into a database. In fact, both the tasks are performed in the background without reloading the page.
  • AJAX is generally used to implement features like Auto Complete, Auto Save, Remote validation, etc.

Disadvantages of AJAX

  • AJAX relies on JavaScript. If JavaScript is disabled, the AJAX application won't work.
  • AJAX requests cannot be bookmarked easily.
  • Harder to debug.
  • Very bad for SEO; Search engines like Google, Yahoo, Bing etc. cannot easily index the AJAX pages.

Summary

 
The purpose of this blog was to explain the basics of AJAX, AJAX syntax, method parameters, how AJAX works, and its advantages and disadvantages.
 
Here are some further readings on AJAX.
Next Recommended Reading Solution - Ajax Post Method Form Serialization Data Passing Issue