Ajax allows for asynchronous data exchange in the background without reloading the webpage. It uses JavaScript and XMLHttpRequest objects to make requests to the server and update portions of the webpage. The process involves creating an XMLHttpRequest object, opening a request with a method like GET and a URL, sending the request, handling the response, and updating the HTML page without reloading. Key properties and methods of the XMLHttpRequest object allow processing the asynchronous request and response. Ajax improves the user experience by updating parts of pages in the background without interfering with other actions on the page.

1. Ajax

2. 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.

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

4. Browser Web server
Web pages without Ajax

5. Browser Web server
Web pages with Ajax

6. 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

7. 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");
}

8. 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");
}
Creating a normal variable
which will be assigned as
an object in coming lines

9. Step 1: creating xmlHttpRequest
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
Else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
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

10. Step 1: creating xmlHttpRequest
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
Else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
If it returns true we make
the the variable xmlhttp
assigned to the
XMLHttpRequest object

11. Step 1: creating xmlHttpRequest
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
Else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
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

12. 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

13. Step 2: Send a request to server
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
Sends the request off to the
server.

14. 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

15. <script>
function loadXMLDoc()
{
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");
}
xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
</script>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>

16. 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

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

18. 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

19. 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

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

21. 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

22. function loadXMLDoc()
{
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");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}

23. End of day

24. 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

25. 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