AJAX

What is AJAX?
AJAX stands for Asynchronous JavaScript and XML. It uses the XMLHttpRequest, which is a Javascript object used to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including JSON, XML, HTML, and even text files.

AJAX’s most unique characteristic, is its “asynchronous” nature, which means it can do all of this without having to refresh the page. This lets you update portions of a page based upon user events.

With AJAX you can

  • Update a web page without reloading the page
  • Request data from a server – after the page has loaded
  • Receive data from a server – after the page has loaded
  • Send data to a server – in the background

Steps of AJAX Operation

  1. A client event occurs.
  2. An XMLHttpRequest object is created.
  3. The XMLHttpRequest object is configured.
  4. The XMLHttpRequest object makes an asynchronous request to the Webserver.
  5. The Webserver returns the result containing XML document.
  6. The XMLHttpRequest object calls the callback() function and processes the result.
  7. The HTML DOM is updated.

XMLHttpRequest Methods:

  • abort(): Cancels the current request.
  • open(method, URL, async, userName, password): Specifies the method, URL, and other optional attributes of a request.The method parameter can have a value of HTTP methods “GET”, “POST”, “HEAD”, “PUT” and “DELETE”.
  • send(content): Sends the request.
  • getAllResponseHeaders(): Returns the complete set of HTTP headers as a string.
  • getResponseHeader(headerName): Returns the value of the specified HTTP header.
  • setRequestHeader(label, value): Adds a label/value pair to the HTTP header to be sent.

XMLHttpRequest Properties:

  • onreadystatechange: An event handler for an event that fires at every state change.
  • readyState: Holds the status of the XMLHttpRequest. Changes from 0 to 4:
    0: request not initialized
    1: server connection established
    2: request received
    3: processing request
    4: request finished and response is ready
  • responseText: Returns the response as a string.
  • status: Returns the status as a number. eg. 200: “OK”; 404: Page not found

List of some famous web applications that make use of AJAX.
Google Maps: A user can drag an entire map by using the mouse, rather than clicking on a button.
Google Suggest: As you type, Google will offer suggestions. Use the arrow keys to navigate the results.
Gmail: Gmail is a webmail, built on the idea that email can be more intuitive, efficient and useful.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s