Ajax (Asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client-side to create interactive web applications.
AJAX is the art of exchanging data with a server, and update parts of a web page – without reloading the whole page.
The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages.
AJAX is a technique for creating fast and dynamic web pages.
AJAX is based on internet standards, and uses a combination of:
- XMLHttpRequest object (to exchange data asynchronously with a server)
- JavaScript/DOM (to display/interact with the information)
- CSS (to style the data)
- XML (often used as the format for transferring data)
AJAX Example:
HTML Page:
<html>
<head>
<script type=”text/javascript”>
function loadXMLDoc()
{
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_msg.php”,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id=”myDiv”><h2>Let AJAX change this text</h2></div>
<button type=”button” onclick=”loadXMLDoc()”>Change Content</button>
</body>
</html>
PHP File (ajax_msg.php)
The page on the server called by the JavaScript above is an PHP file called “ajax_msg.php”.
<?php
echo “Ajax Message from server.”;
?>
More Details: http://www.w3schools.com/Ajax/ajax_example.asp
If you are use any JavaScript framework like jQuery, YUI, ExtJS, Dojo and Prototype etc., you need not write all the above code, you can use inbuilt AJAX functions and methods of the framework.
jQuery Example:
$.ajax({
type: “POST”,
url: “save.php”,
data: “name=John&location=Boston”,
success: function(msg){
$(“#results”).html(“Data Saved: ” + msg );
}
});
More Details: http://api.jquery.com/jQuery.ajax/
History:
Microsoft first implemented the XMLHttpRequest object in Internet Explorer 5 for Windows as an ActiveX object. Engineers on the Mozilla project implemented a compatible native version for Mozilla 1.0 (and Netscape 7). Apple has done the same starting with Safari 1.2.
Reference:
Ajax (programming)
AJAX Tutorial
Dynamic HTML and XML
Ajax: A New Approach to Web Applications
