Simple AJAX Example

This aims to be the easiest possible example demonstrating AJAX (Asynchronous JavaScript and XML).

AJAX is a technique rather than a technology: It describes how JavaScript can be used to pull data from the server using the XML HTTP Request object and then insert this data into the website using DOM. This is done asynchronously – that is, in the background, without having to refresh the whole page. The technology which AJAX is based on has already been available for a while, the combination is what makes it new.

You can try the examples online or download them and run them locally (except for the PHP script, that would require a webserver with PHP).

1. The DOM

The Document Object Model is the internal representation of your website. The DOM is accessible by JavaScript and provides a way to programmatically insert, remove and modify tags in your website (except that they are called elements or nodes instead of tags, because the DOM manipulates the data model in memory and not the representation as XML). This example shows how to set the content of the

<script type="text/javascript">
function replace() {
document.getElementById('foo').innerHTML = "Hello, <b>AJAX</b> world!";
}
</script>
<p><a href="javascript:replace()">Replace Text</a></p>
<div id="foo">
Hello, world!
</div>

Try here: dom.html
Read the Rough Guide to the DOM for more information. Read more…