Ajax

Relevance of Ajax
• Normally we exchange data with server in any of following scenarios
 We click on a link to request a new page
 We submit a form to send the user data to server
• In both cases the whole webpage reloads
• AJAX is the art of exchanging data with a server, and updating parts of a web
page - without reloading the whole page.

A - Asynchronous
J - JavaScript
A - And
X - XML
“AJAX is not a new programming language, but a new way to use existing standards.”

Browser Web server
Web pages without Ajax

Browser Web server
Web pages with Ajax

How to code ajax?
Ajax is just a JavaScript function which can be called like any other
functions in JavaScript
Step 1 : create XMLHttpRequest : which is a special object to exchange data with
server
Step 2 : send server request using the above XMLHttpRequest send() method
Step 3 : Receive response from server (response can be success or error)
Step 4 : If response is success get the resposeText and display it on the html page
using JavaScript DOM manipulation
Step 5 : if repose is error acknowledge accordingly

Step 1: creating xmlHttpRequest
var xmlhttp;
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
Else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

var xmlhttp;
{ // code for IE7+, Firefox, Chrome, Opera, Safari
}
Else
}
Creating a normal variable
which will be assigned as
an object in coming lines

var xmlhttp;
{
}
Else
{
}
All modern browsers
(IE7+, Firefox, Chrome,
Safari, and Opera) have a
built-in XMLHttpRequest
object.
Old versions of Internet
Explorer (IE5 and IE6) use
an ActiveX Object: for
data exchange
So this code Detects if the
browser has
XMLHTTPRequest
functionality or not

var xmlhttp;
{
}
Else
}
If it returns true we make
the the variable xmlhttp
assigned to the
XMLHttpRequest object

var xmlhttp;
{
}
Else
{
}
Else statement evaluates
true if the browser doesnt
support
XMLHttpRequest(means
the browser id old
version)
So in old versions
ActiveXobject serve the
same purpose . So we
assign xmlhttp into
ActiveX object

Step 2: Send a request to server
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
As xmlhttp is an object it will
have several methods associated
with him like open(),send() etc
Open() : Specifies the type of
request, the URL, and if the
request should be handled
asynchronously or not.
Type: GET / POST
URL : the path to page from
where we want the data from
TRUE : means data has to be
transmitted asynchronously

Step 2: Send a request to server
xmlhttp.send();
Sends the request off to the
server.

Step 3: Server response
To get the response from a server, use the responseText or responseXML
property of the XMLHttpRequest object.
« responseText : Get the response data as a string
« responseXML : Get the response data as XML
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
We receive the respose from server in a string format
which will be stored in resposeText property of
xmlhttp object

Properties
Onreadystatechange
readyState
Status
responseText
responseXml
Methods
Send()
Open()
setRequestHeader()
XMLHTTP in detail
As you are well aware xmlhtp is just an object,
Which means it will have number of member
functions and properties . We will look detailed
into it

Properties
Onreadystatechange
readyState
Status
responseText
responseXml
Methods
Send()
Open()
setRequestHeader()
xmlhttp
We’ve already discussed about this
properties and methods
XMLHTTP in detail

Properties
Onreadystatechange
readyState
Status
responseText
responseXml
Methods
Send()
Open()
setRequestHeader()
xmlhttp
Stores a function (or the name of a
function) to be called automatically
each time the readyState property
changes
XMLHTTP in detail

Properties
Onreadystatechange
readyState
Status
responseText
responseXml
Methods
Send()
Open()
setRequestHeader()
xmlhttp
Holds the status of the
XMLHttpRequest.
Changes from 0 to 4:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is
ready
XMLHTTP in detail

Properties
Onreadystatechange
readyState
Status
responseText
responseXml
Methods
Send()
Open()
setRequestHeader()
xmlhttp
200: "OK"
404: Page not found
XMLHTTP in detail

Properties
Onreadystatechange
readyState
Status
responseText
responseXml
Methods
Send()
Open()
setRequestHeader()
xmlhttp
Adds HTTP headers to the request.
This method takes 2 parameters
header: specifies the header name
value: specifies the header value
Eg:
xmlhttp.setRequestHeader("Content-
type","application/x-www-form-
urlencoded");
XMLHTTP in detail

function loadXMLDoc()
{
var xmlhttp;
{// code for IE7+, Firefox, Chrome, Opera, Safari
}
else
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
}
}
xmlhttp.send();
}

If this presentation helped you, please visit our
page facebook.com/baabtra and like it.
Thanks in advance.
www.baabtra.com | www.massbaab.com |www.baabte.com

Contact Us
Emarald Mall (Big Bazar Building)
Mavoor Road, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
NC Complex, Near Bus Stand
Mukkam, Kozhikode,
Kerala, India.
Ph: + 91 – 495 40 25 550
Start up Village
Eranakulam,
Kerala, India.
Email: info@baabtra.com

Ajax

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Ajax (20)

More from baabtra.com - No. 1 supplier of quality freshers (20)

Recently uploaded (20)

Ajax