By.P.S.

Malani
 INTRODUCTION
• AJAX = Asynchronous JavaScript and XML.
• AJAX is a set of web development techniques that
uses various web technologies on client side to create
asynchronous web applications.
• Ajax Uses Asynchronous Data Transfer between
browsers and Web servers.
• Examples of applications using AJAX: Google Maps,
Gmail, YouTube, and Face book, Google Suggestions.
 Asynchronous JavaScript & xml is a new technique for creating
better, faster & more interactive web application with help of xml,
html, css & JavaScript.
 Ajax is not a technology but group of interrelated technologies
which are given below.
1.HTML& CSS- These technologies are used for displaying contents
& styles. It is mainly used for presentations.
2.DOM-DOM is used for dynamic display & interaction with data.
3.XML & JSON(javascript object notation)-for carrying data to &
from server JSON is like XML but short & faster than XML.
4.XMLHttpRequest-for asynchronous communication between
client & server.
5.Javascript-used to bring all above technology together.

AJAX allows web pages to be updated asynchronously by

exchanging small amounts of data with server behind the scene.
 How ajax works
BROWSER SERVER
An Event Occur
Process
Create HttpRequest
XMLHttpRequest internet
object Create response
and send database
Send HttpRequest to browser

BROWSER

Process returned
data using
JavaScript internet

Update page
content
 The JavaScript code on client side can request
or fetch data from server as and when needed.
 This data is processed by server by using
XmlHttpRequest object but without refreshing
page.
 The data that comes as a response might be
XML or just a plain text. The Javascript code
reads this data, process it and update page
content immediately.
AJAX WEB APPLICATION MODEL
 CLASSICAL WEB APPLICATION
MODEL
 User makes an Http request to server using a browser
 Server receives the user’s request and take appropriate
actions –interacting with data stores, doing back and
processing etc
 The content thus generated is sent to the user in HTML
format as response.
 After user makes request to the server, he has to wait till the
time the server finishes the required processing and sends an
HTML page as response
AJAX WEB APPLICATION MODEL
 An Ajax application eliminates the start-stop-start-stop
nature of client server interaction.
 By introducing an Ajax engine between user and the server.
 Ajax engine responsible for :
1]what the user sees and what is sent to the server
2]i.e. communicating with the server on user’s behalf.
3]Allow Asynchronous interaction of the user with the web
application
4]Thus, user does not have to wait for the server to process any
request. Server does the required processing in back.
XMLHttpRequest Object
 This Object is Key to Ajax.
 This Object is Used for Asynchronous Communication
Between Client & Server
 Sends the Data From the Client in background
 Receives data from the server
 Updates the Webpage Without Reloading it
 APPLICATIONS OF AJAX
 Ajax is used in live searching where you can search
results instantly.
 Ajax updates parts of webpage asynchronously . It is
applicable in web based chat program where multiple
clients or users can chat simultaneously at same time.
 We can create dragging and drop shopping cards with
ajax.
 Ajax is also used in google maps to give location pointer.
ADVANTAGES
 BETTER INTERACTIVITY: AJAX allows easier and
quicker interaction between user and website as whole
page not reloaded for content to be displayed.
 EASIER NAVIGATION :AJAX application or websites
can be build to allow easier navigation to users in
comparison to using traditional forward and backward
button.
 It loads page on demand.
 Service based approach to web development.
 Reduced Page Bandwidth
DISADVANTAGES
 AJAX is dependent on JavaScript, if there is some
JavaScript problem with browser or in OS then AJAX
will not support.
 Debugging is difficult.
 All browsers do not support javascript or
XMLHttpsRequest object
 Increase size of request.
 Write an Ajax program to print the
content of the file myfile.dat.
This code asks the user to click a
button, fetches data from the server
using Ajax techniques and displays that
data in the same web page as the button
without refreshing the page.
We will write the code first and then
see to its line by line explanation.
fetch.html
<html>
<head>
<script language=“JavaScript”>
var XHRobj=false;
if(window.XMLHttpRequest)
{
XHRobj=newXMLHttpRequest();
}
else if(window.ActiveXObject)
{
XHRobj=new ActiveXObject(“Microsoft.XMLHttp”);
}
function fetchdata(datasource,divID)
{
if(XHRobj)
{
XHRobj.open(“GET”,datasource);
XHRobj.onreadystatechange=function()
{
if(XHRobj.readyState==4 && XHRobj.ststus=200)
{
document.getElementById(divId).innerHtml=XHRobj.responseText;
}}
XHRobj.send(null);
}}
</script></head><body>
<h3>fetching data with ajax<h3>
<form>
<input type=button value=“fetch message” onclick=“fetchdata(‘myfile.txt’,myDiv)”>
</form>
<div id=“myDiv”><b>the fetched data will be here</b></div>
</body></html>
output
Properties of XMLHttpRequest object
1.onreadystatechange- it is an event handler for an event that
fires at every state change.
2.readystate- this property defines the current state of
XMLHttpRequest object. There are different values of
ready state property.
a. readystate=0:-the request is not initialized.
b. readystate=1:-the request has been setup or loading.
c. readystate=2:-the request has been sent or loaded.
d. readystate=3:-the request is in process.
e. readystate=4:-the request is completed.
3.readystatus- return the status as a number .few possible
values of status are
a. 200-OK
b. 404-not found
c. 201-created
d. 500-internal server error
e. 400-bad request
XMLHttpRequest Methods
1.open(method,URL)- it opens the connection to
the particular URL.
2.send(content)-sends the http request to the server
and receives the response when readystate value
is 1.
3. abort- cancel the current XMLHttpRequest