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