Posted in Web Tech

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.

Author:

I'm really glad that you stopped by. If you like blog posts feel free to follow, like, share, comment etc. If you have any suggestions or would like to learn or understand any topic, you can always write to me. I believe that, reading and writing heals and fuels the soul 🙂 Keep visiting and happy reading 🙂Twitter handle @_ViniTweet_ Cheers to You! ♥

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s