Web Technology

1. AJAX IN
WEB PROGRAMMING
BY
M.SRI NANDHINI,
II- MSC(CS),
NADAR SARASWATHI COLLEGE
OF ARTS & SCIENCE,
VADAPUTHUPATTI, THENI.

2. AJAX
• Ajax is not a programming language/
technology.
• Ajax is a design approach and a set of
techniques for creating a highly interactive
user experience for web applications.
• It makes applications faster and user friendly.

3. REAL LIFE EXAMPLES OF AJAX
• Google Maps
• Google Suggest
• Gmail

4. AJAX BASICS
• AJAX uses XMLHttpRequest
• JavaScript communicates directly with the
server, through the JavaScript
XMLHttpRequest object.
• With an XMLHttpRequest, a web page can
make a request to, and get a response from a
web server without reloading the page.

5. BUILDING APPLICATIONS
AJAX Applications are:
• Three-tier client/ server apps
-Browser <-> App Server <-> Data Source
• Event driven
-User clicks, user drags, user change data
• Graphics Intensive
-Visual effects, Rich visual controls
• Are Data Oriented
-Users are manipulating and entering data

6. AJAX TERMINOLOGY
• Onreadystatechange
• readyState
• status
• responseText
• responseXML

7. WORK OF AJAX
JavaScript
-Define an object for sending XML HttpRequest
i. Initiate request
• Get request object
• Designate a request handler function
-Supply as onreadystatechange attribute of
request
• Initiate a GET or POST request
• Send data

8. CONT…
ii. Handle response
• Wait for readyState of 4 and HTTP status of 200
• Extract return text with response Text or
response XML
• Do something with result
HTML
-Loads javaScript
-Gives ids to input elements that will be read by
script

9. DEFINE OBJECT
var request;
function getRequestObject()
{ if(window.ActiveXObject)
return(new ActiveXObject(“Microsoft.XMLHTTP”));
} else if (window.XMLHttpRequest)
return(new XMLHttpRequest());
} else{
return(null);
} }

10. INITIATE REQUEST
function sendRequest(){
request=getRequestObject();
request.onreadystatechange=handleResponse;
request.open(“GET”.”message-data.html”, true);
request.send(null);
}

11. HANDLING RESPONSE
function handleResponse()
{
if(request.readyState == 4 && request.status ==
200)
{
alert(request.responseText);
}
}

12. AJAX ready states AJAX status
0 - Uninitialized 200- ok
1- Loading 404- Page Not found
2- Loaded
3- Processing
4- Request Finished

13. Thank you!!!!!!!!