INTRODUCTION
What is AJAX?
AJAX = Asynchronous JavaScript and XML. AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page. Classic web pages, (which do not use AJAX) must reload the entire page if the content should change. Examples of applications using AJAX: Google Maps, Gmail, Youtube, and Facebook tabs.
AJAX was made popular in 2005 by Google, with Google Suggest. Google Suggest is using AJAX to create a very dynamic web interface: When you start typing in Google's search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions.
Read more at http://www.w3schools.com/ajax/ajax_intro.asp
STEPS
0) Pre-requisite:
1) In Notepad++ Project, create Project201.
2) Create an html file, ajax101.html
2.1) Add the following codes to ajax101.html:
<!DOCTYPE html>
<html>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
|
2.1.1) Take note that the Line No. says <!DOCTYPE html> which means this is HTML 5 document.
2.2) Browse the file.
- At the moment, clicking the Change Content button will not give any effect. Refer Line No. 6 in Step 2.1, function loadXMLDoc() doesn’t exist.
3) Adding function loadXMLDoc()
3.1) Insert the <head> element to ajax101.html by adding the following codes in between the tag <html> and <body>
<head>
<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.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
|
- Take note that since this is HTML 5 document (refer Step 2.1.1) by default <script> refers to JavaScript.
3.2) Run AJAX.
3.2.1) Activate Chrome Developer Tools.
3.2.2) Browse http://localhost/php201/ajax101.html
3.2.3) Click Change Content.
3.2.4) Observe that:
a) Chrome is requesting the file ajax_info.txt from the directory /php201.
b) GET request is used.
c) Status is 404 Not Found
4) Add AJAX resource file.
4.1) Create a file ajax_info.txt . Add the following codes:
<p>AJAX is not a new programming language.</p>
<p>AJAX is a technique for creating fast and dynamic web pages.</p>
|
4.2) Reload http://localhost/php201/ajax101.html
4.3) This time, the server returns Status 200 (OK) and you see the output as above.
5) Change resource file to PHP script.
5.1) create ajax_info.php. Add the following codes:
<?php
echo "<p>AJAX is not a new programming language.</p>";
echo "<p>AJAX is a technique for creating fast and dynamic web pages.</p>";
?>
|
5.2) Edit ajax101.html. Change ajax_info.txt to ajax_info.php:
5.3) Reload http://localhost/php201/ajax101.html
SUMMARY
With AJAX, the JavaScript does not have to wait for the server response, but can instead:
- execute other scripts while waiting for server response
- deal with the response when the response ready
Important keywords used:
- XMLHttpRequest()
- xmlhttp.onreadystatechange
- xmlhttp.readyState
- xmlhttp.responseText
- xmlhttp.open
- xmlhttp.send
