What Is Ajax (Ajax in action?Ajax stands for Asynchronous Javascript And XML. Although strictly speaking Ajax itself is not a technology, it mixes well-known programming techniques in an uncommon way to enable web developers to build Internet applications with much more appealing user interfaces than those to which we have become accustomed.
How Does Ajax Work?(Ajax in action)With Ajax, Web applications finally start feeling like desktop applications to your users. That’s because Ajax enables your Web applications to work behind the scenes, getting data as they need it, and displaying that data as you want. And as more and more people get fast Internet connections, working behind the scenes to access data is going to become all the rage. Soon, it’ll be impossible to distinguish dedicated desktop software from software that’s actually on the Internet, far from the user’s machine. To help you understand how Ajax works, the following sections look at Ajax from a user’s and a programmer’s perspective. Google Maps and AjaxOne of the most famous Ajax application is Google Maps, at http://maps.google.com, First ajax example (Ajax in action)Fetching data from address.txt, see following code <html>
<head>
<title>Ajax in action</title>
<script language = "javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(dataSource, addressID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(addressID);
//Opens the dataSource to the server
XMLHttpRequestObject.open("GET", dataSource);
XMLHttpRequestObject.onreadystatechange = function()
{
//readyState meane "Holds the state of the request"
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
//Holds the response body as a string
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<H1>Ajax In Action</H1>
<form>
<input type = "button" value = "Display Address"
onclick = "getData('address.txt', 'Address')">
</form>
<div id="Address">
<p>The address will show here.</p>
</div>
</body>
\</html> Before click "Display Address"
After click "Display Address"
Related Tutorials:A collection of AJAX tutorials Refernce :Ajax in Action (Manning) Ajax For Dummies ( For Dummies) |
HTML & CSS Tutorials 
