Scribd
Upload
138 views

Chapter 15 AJAX

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server in the background without reloading the entire page. It uses a combination of XMLHttpRequest, JavaScript, DOM, and XML/JSON to retrieve data from the server and update parts of the web page. The XMLHttpRequest object is used to send and receive data from the server asynchronously. On the client side, JavaScript code handles the response and updates the appropriate elements. This allows parts of the web page to change dynamically without reloading.

Uploaded by

alaa abu madi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
138 views

Chapter 15 AJAX

AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server in the background without reloading the entire page. It uses a combination of XMLHttpRequest, JavaScript, DOM, and XML/JSON to retrieve data from the server and update parts of the web page. The XMLHttpRequest object is used to send and receive data from the server asynchronously. On the client side, JavaScript code handles the response and updates the appropriate elements. This allows parts of the web page to change dynamically without reloading.

Uploaded by

alaa abu madi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

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

You might also like