Setup Menus in Admin Panel

  • No products in the cart.



AJAX Introduction

AJAX: It stands for Asynchronous JavaScript and XML.
AJAX was introduced on 18 Feb 2005 by Jesse James Garrett.
AJAX is a technique creating better, faster, and more interactive web applications.



AJAX Advantage:


Reduce the server traffic at both side request. Also reducing the time consuming on both side response.


2) XMLHttpRequest:

XMLHttpRequest has an important role in the Ajax web development technique. It is a special JavaScript object that was designed by Microsoft.


3) Asynchronous calls :

AJAX make asynchronous calls to a web server. This means client browsers avoid waiting for all data arrive before start the rendering.


4) Form Validation :

This is the biggest advantage. Forms are the common element in the web page. Validation should be instant and properly, AJAX gives you all of that and more.


5) Bandwidth Usage:

No require to completely reload the page again. AJAX has improved the speed and performance. Fetching data from the database and storing data into database perform background without reloading page.



AJAX Disadvantage:

1.AJAX application would be a mistake because search engines would not be able to index an AJAX application.
2.Open Source: View source is allowed and anyone can view the code source written for AJAX.
3. ActiveX requests are enabled only in Internet Explorer and newer latest browser.
4.The last disadvantage, XMLHttpRequest object itself. For a security reason, you can only use to access information from the web host that serves initial pages. If you need to fetching information from another server, it’s is not possible within the AJAX.



Who uses AJAX?

The world largest company like:
Yahoo(YMail), etc.



AJAX autocomplete in Google



How AJAX works?


Core Ajax concepts:

  • JavaScript’s XMLHttpRequest object can fetch files from a web server.
    supported in IE5+, Firefox, Opera (with minor compatibilities)
  • It can do this asynchronously (in the background, transparent to the user).
  • contents of a fetched file can be put into the current web page using DOM.
    result: user’s web page updates dynamically without a page reload.


A typical Ajax request:

  1. User clicks, invoking event handler that handler’s JS code creates an XMLHttpRequest object.
  2. XMLHttpRequest object requests a document from a web server.
  3. The server retrieves appropriate data, sends it back XMLHttpRequest fires event to say that the data has arrived this is often called a callback you can attach a handler to be notified when the data has arrived.
  4. Your callback event handler processes the data and displays it.





Using XMLHttpRequest:

The XMLHttpRequest object the core JavaScript object that makes Ajax possible:

  • methods: abort, getAllResponseHeaders, getResponseHeader, open, send,setRequestHeader
  • properties: onreadystatechange, readyState, responseText,responseXML,status, statusText
  • IE6 doesn’t follow standards and uses its own ActiveXObject instead
  • we’ll learn to use Ajax in 4 steps:

1. synchronous, text-only (SJAT?).
2. asynchronous, text-only (AJAT?).
3. asynchronous w/ Prototype (AJAP?).
4. asynchronous w/ XML data (real Ajax).



1. Synchronous requests:

var ajax = new XMLHttpRequest();"GET", url, false);
// at this point, the request will have returned with its data
do something with ajax.responseText;

create the request object, open a connection, send the request when send returns, the fetched text will be stored in request’s responseText property


2. Asynchronous requests, basic idea:

var ajax = new XMLHttpRequest();
ajax.onreadystatechange = functionName;"get", url, true);
// don't process ajax.responseText here, but in your function


attach an event handler to the request’s onreadystatechange event pass true as the third parameter to open handler will be called when request state changes, e.g. finish function’s code will be run when the request is complete.


The readyState property:

  • holds the status of the XMLHttpRequest
  • possible values for the readyState property:

State                           Description
0                                     not initialized
1                                      set up
2                                     sent
3                                     in progress
4                                     complete


  • readyState changes → onreadystatechange handler runs
  • usually we are only interested in readyState of 4 (complete)

Asynchronous XMLHttpRequest template:


var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) { // 4 means request is finished
do something with ajax.responseText;
};"get", url, true);


  • most Ajax code uses an anonymous function as the event handler
  • useful to declare it as an inner anonymous function, because then it can access surrounding local
    variables (e.g. ajax).


ASSIGNMENT : How many types of ready states in ajax ? MARKS : 10  DURATION : 10 minutes

SEE ALL Add a note
Add your Comment

Advanced Course Search Widget

Popular Courses

Course Categories

© PHPhelp. 2002 - 2018 All rights reserved.