Ajax

Introduction
• Traditionally Web applications have been somewhat clumsy and slow,
and the level of interactivity and usability inferior to their counterpart
desktop applications
• But, as with the present situation, web applications have out
numbered windows applications
• Part of this growth can be credited to AJAX - Asynchronous JavaScript
and XML
• It is methodology for creating fast, user-friendly, and interactive Web
applications
Introduction
• The technique is by allowing a Web page to request small fragments
of information from the server instead of an entire page
• Ajax in turn will update that portion of the Web page
• Some usage of AJAX:
• Google search box
• Cricket score page
• Google maps
• Filling out a registration form
The Steps for Creating Ajax Communication
• The steps to create and send requests to the server:
• Create an XMLHttpRequest object, a JavaScript object with
properties and methods used to handle communication between
the browser and server.
• The object’s open() method is used next to initialize the object; i.e.
• how the data will be sent, GET or POST
• the URL of the file data that is being requested (a text file, XML data, or a server side
program such as PHP, ASP.NET, CGI, Java Servlet, and so on)
• The request is sent to the server with the send() method
• After the request is sent to the server, the object’s readyState
property keeps track of the state of the request object; for
example, if a request has been made, the state changes.
The Steps for Creating Ajax Communication
Step 1: Create the XMLHttpRequest Object
• The HTTP request/response cycle is used for synchronous calls to the
server from a browser.
• But the XMLHttpRequest object allows to make asynchronous calls to
the server (without refreshing the page for each HTTP request)

var ajaxRequest;
ajaxRequest = new XMLHttpRequest();
The Steps for Creating Ajax Communication
Step 2: Initializing the Object
• The open() method prepares or initializes the object for
communication with the server
• The open() method takes three arguments:
• The request type; that is, how the data is submitted, either GET or
POST
• The URL of the file or server-side program and parameters
representing the data being sent as key/value pairs.
• An optional third parameter of Boolean true (asynchronous) or
false (synchronous).
The Steps for Creating Ajax Communication
• Except for simple file retrieval or searches, the POST method is used

ajaxRequest.open("GET", "myfile.txt", true);

ajaxRequestObject.open("GET","http://localhost/ajaxform.php?username="+
namevalue+"&userphone="+phonevalue, true);

ajaxRequest .open("POST", http://localhost/hello.php?);

 The Steps for Creating Ajax Communication
Step 3: Sending the Request to the Server
• Once the object has been initialized, the browser can send a request to the
server with the send() method.
• This method takes one argument of “null” if you use the GET method for
sending the data.
• With the POST method, an additional step is required.
• The setRequestHeader() method tells the server the “Content-type”, and the
send() method sends the query string as name/value pairs to the server.
 The Steps for Creating Ajax Communication
Example: Get Method
ajaxRequest.open(“GET”, “http://localhost/test.php?name=George”, true);
ajaxRequest.send(null);

Example: POST Method

ajaxRequest.open(“POST”, “http://localhost/hello.php”);
ajaxRequest.setRequestHeader(“Content-Type”,
“application/x-www-form-urlencoded”);
ajaxRequest.send(“first=Joe&last=Mathew”);
 The Steps for Creating Ajax Communication
Step 4: Monitoring the State of the Server Response
• After sending a request to the server, we need to know when the
request has completed and what to do with the information when it
comes back.
• The onreadystatechange event handler of the XMLHttpRequest object is
assigned a function that will be called automatically when the
onreadystatechange event handler is triggered;

ajaxRequest.onreadystatechange = function(){
// The function will defined later
}
 The Steps for Creating Ajax Communication
• The XMLHttpRequest object keeps track of the status of the server’s
response in another property called readyState.
• This property has one of the values
 The Steps for Creating Ajax Communication
//Callback function
ajaxRequest.onreadystatechange = function() {
var textObj;
textObj=document.getElementById("message");
if(ajaxRequest.readyState == 4){
textObj.innerHTML=ajaxRequest.responseText;
/* Get text in a string returned by the server. */
}
 The Steps for Creating Ajax Communication
Summary:
1)The user clicks a button or presses a key to initiate a function that will start
the process of Ajax communicating with the server.
2) Most important, JavaScript uses the XMLHttpRequest constructor method
to create a new object that will serve as the Ajax communication layer
between the browser and the server.
3) Once the XMLHttpRequest object is created, it is initialized with the object’s
open() method to set up the type of HTTP request (GET or POST), the URL
(where the request is going), and whether the request will be asynchronous
(true and the default), or synchronous (false).
 The Steps for Creating Ajax Communication
4) The request is then sent to the server with the object’s send() method.
5) The server processes the request and sends a response to the browser in
either XML or text format. It contains the data only of the page elements that
need to be changed. In most cases this data will include of just a fraction of
the total page markup.
6) JavaScript processes the server response, updates the relevant page
content, or performs another operation with the new data received from the
server.