1:AJAX stands for Asynchronous javascript and XML

2:AJAX is not a programming language

3:AJAX is used to make a dynamic web application

4:AJAX is popularised by google in 2005 when it was used as google suggestion while typing for search

Application of AJAX

1:To recall the standard HTTP transaction

2:In AJAX first javascript code execute after that communication between client and server execute

3:In AJAX data exchange take place without loading the page Asynchronously

4:AJAX is used for fast and dynamic web application

Pros and Cons of AJAX

pros:

1:Allows web application to interact with data on server

2:Avoid clunky GET/POST send/receive interfaces

cons:

1:Tough to make compatible across all browsers

2:Can be server intensive

Example:Google Suggest generates a search for every keystroke entered

Setting up an AJAX Transaction

1:Create an XMLHTTPRequest object

2:Set up the request’s onreadystatechange function

3:Open the request

4:Send the request

Creating an XMLHTTPRequest Object

function sendRequest()  
{
var xmlHttp = GetXmlHttpObject(); 
if (!xmlHttp) {    
return false;  
}  
xmlHttp.onreadystatechange = function() {    
if (xmlHttp.readyState == 4) { 
alert("Request complete");
   }  
} 
var requestURI =     "http://myserver.org/somepage.txt"; 
xmlHttp.open("GET", requestURI, true); 
xmlHttp.send(null); 
}

The XMLHTTPRequest Object

• An XMLHTTPRequest object is in one of 5 states, as indicated by the readyState property

0.The request is not initialized

1.The request has been set up

2.The request has been sent

3.The request is in process

4.The request is complete

• Every time the readyState property changes the onreadystatechange property (a function) is called

Setting onreadystatechange

xmlHttp.onreadystatechange = function() {    
if (xmlHttp.readyState == 4) {     
 alert("Request complete");   
 } 
 } 

The open and send functions

• The open function of an XML HTTP request takes three arguments

– xmlHttp.open(method, uri, async)

– method is either “GET” or “POST”

– uri is the (relative) URI to retrieve

– async determines whether to send the request asynchronously (true) or synchronously (false)

– The domain of the uri argument must be the same as the domain of the current page

• The send function takes one argument – xmlHttp.send(content);

– content is the content to send (useful when method=”POST”)

Sending the Request

var requestURI = "http://myserver.org/somepage.txt";  
xmlHttp.open("GET", requestURI, true);  xmlHttp.send(null); 

The responseText Property

• When an XMLHTTPRequest is complete (readyState == 4) the responseText property contains the server’s response, as a String

function sendRequest(textNode) {
var xmlHttp = GetXmlHttpObject();
if (!xmlHttp) {
return false;
}
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
textNode.nodeValue = xmlHttp.responseText;
}
}
var requestURI = “https://yashpalsinghblog.com”;
xmlHttp.open(“GET”, requestURI, true); xmlHttp.send(null);
}

Putting the X in AJAX

• The X in AJAX comes from XML

• In an XML HTTP request, we usually expect the server to respond with some XML

• What is XML?

• Short answer: like HTML but – You can make up your own tag names – All tags have to be closed (and there is a shorthand)

An Example XML File

<?xml version="1.0" encoding="ISO-8859-1"?> 
<note> <to>Tove</to>
<from>Jani</from> 
<heading>Reminder</heading> 
<body>Don't forget me this weekend!</body> 
</note>

Summary

• An AJAX transaction involves the client sending an asynchronous HTTP request and the server responding with XML – The client processes the resulting XML document tree

• AJAX applications run entirely on the client except when they need to access data on the server – Can treat the server as a database/file system

• Well-written AJAX applications, running with a fast Internet connection, can be as nice to use as traditional applications

email:[email protected]

Leave a Reply

Your email address will not be published. Required fields are marked *