Scripting and Applications - Web Standards: Mastering HTML5, CSS3, and XML - page 196

Ajax
Ajax is an acronym for Asynchronous JavaScript and XML . It is not a programming language but a group of web
technologies that can be used together, such as HTML, CSS, DOM, JavaScript, XML, and XSLT. Ajax can be used on
the client side to create interactive web applications. Web site applications empowered with Ajax can send data to and
retrieve data from servers asynchronously (which is the reason for the name). Ajax is suitable for avoiding full-page
reloads when exchanging data asynchronously. This approach ensures that the display and behavior of the current
page won't be affected. Despite the name, Ajax does not require XML; the JavaScript Object Notation (JSON), a
lightweight text-based open standard [3], is often used instead. The requests are not necessarily asynchronous either.
Ajax usually retrieves data using the XMLHttpRequest object [4]. The DOM is used along with JavaScript to dynamically
display information and allow the user to interact with the information presented. The data interchanged using Ajax
can be manipulated using XSLT.

■ Modern browsers have a built-in XMLHttpRequest object. Before ie7, internet explorer provided an object
called ActiveXObject .

Note

To demonstrate Ajax, the code in Listing 6-1 creates a link that will replace the content of a div element with the
content of a text file. The Document Object Model is used to manipulate the object. The XMLHTTPRequest object is
used to make the HTTP request load the file ajaxdemo.txt and display its content.

Listing 6-1. Ajax Demonstration

<script type="text/javascript">
var http = false;
if (navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}

function replace() {
http.open("GET", "ajaxdemo.txt", true);
http.onreadystatechange=function() {
if (http.readyState == 4) {
document.getElementById('repdiv').innerHTML = http.responseText;
}
}
http.send(null);
}
</script>