AJAX
1 Prepared by: Mohammed Jabary
Adapted with minor changes from w3schools.com
WHAT IS AJAX?
AJAX: Asynchronous Javascript And Xml
It’s a technique to produce fast and dynamic webpages
AJAX allow web pages to be updated Asynchronously
by exchanging small data with the server behind the
scenes
This means it’s possible to update parts of the web page
without the need to reload the whole page.
Classic web pages (without AJAX), must reload the
whole page if the content should change
Examples of websites using AJAX: Google Suggest,
2
Google map, Gmail, facebook, youtube
HOW DOES AJAX WORK?
AJAX is based on the Internet standards, and uses
combination of:
XMLHttpRequest (to exchange data asynchronously
with the server)
Javascript/DOM (to display/interact with data)
CSS to style the data
XML (often – not always – used as the format for
transfering data)
Note: AJAX is supposed to be Browser and Platform
independent (why?)
3
HOW DOES AJAX WORK?
4
EXAMPLE EXPLAINED
The following code represents a single <div> with a button, when the button is clicked
a function called “loadXMLDoc()” is called
<html>
<head>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content<button>
</body>
</html>
5
CREATING JAVASCRIPT FUNCTION
The function to be called when the button is clocked is
defined in the script section in the head of the html,
add the following the head of html document
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
// Ajax code goes here
}
</script>
</head> 6
CREATING XMLHTTPREQUEST OBJECT
XMLHttpRequest is supported by most the modern
browsers (Chrome, Safari, Firefox)
These browsers have build-in XMLHttpRequest
The XMLHttpRequest is used to exchanged data
asynchronously with the server
Syntax for creating XMLHttpRequest:
// for most browsers
Variable = new XMLHttpRequest();
// for IE 5 and 6
7
Variable = new ActiveXObject(“Microsoft.XMLHTTP”);
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
SENDING A REQUEST TO THE SERVER
Tosend a request to the server using
XMLHttpRequest we use its open and send methods
Syntax:
xmlhttp.open("GET",”getcomments.php",true);
xmlhttp.send();
Open(method, URL, Asyn);
Method: POST or GET
URL: the requested URL on server
Asyn: True/False. For asynchronous use true
Send(String);
Sends the request off to the server
9
String is used only with POST requests
WAITING FOR THE RESPONSE
With AJAX, javascript does not have to wait for the server response, instead it can:
Execute other scripts while waiting for the response
Deal with response when the response is ready
Use the onreadystatechange event of the XMLHttpRequest to specify a function to be executed
when the response is ready
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();
10
THE ONREADYSTATECHANGE EVENT
After sending the request to the server, we want to
perform some actions based on the response
The onreadystatechange event is triggered every
time the readystate changes
The readystate property holds the status of the
XMLHttpRequest
11
THE RESPONSE
The response object sent from the server can take two
forms:
responseText:
gets the response data as String
responseXML: gets the response data as XML
12
THE
<html>
COMPLETE EXAMPLE
<head>
<script type="text/javascript">
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;
}
} 13
xmlhttp.open("GET",”getcomment.php",true);
xmlhttp.send();
COMPLETE EXAMPLE (CONT..)
<body>
<div id="myDiv"><h2>Let AJAX change this
text</h2></div>
<button type="button” id=“b1”
onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
14
AJAX USING JQUERY
jQuery support AJAX calls
The code to make AJAX calls is simple
Syntax:
$(document).ready(function(){
$(”Selector").click(function(){
$.ajax({
url:”URL to page",
success:function(result){
$(”Selector").html(result);
}
});
}); 15
});
AJAX USING JQUERY
Rewriting the Previous Example using jQuery AJAX:
$(document).ready(function(){
$(”#b1").click(function(){
$.ajax({
url:”getcomment.php",
success:function(result){
$(”#myDiv").html(result);
}
});
}); 16
});
REFERNCES
W3schools.com
17
