AJAX is Asynchronous JavaScript and XML. It works by pinging a desired URL with providing some data. After that, the remote URL (usually PHP file) will process your request and make a respond for you. After the respond is created, AJAX XMLHttpRequest will read the respond and sends it back to you in XML format. After you receive this raw XML, the next function is triggered, inject this XML data, whole or some part of it, into your HTML elements. That is simple simulation how does AJAX works.

Here is an example of calling a remote content and inject it into HTML:

<script>
ajax = new XMLHttpRequest();
layer = document.getElementById("layer");
ajax.open("GET","http://site.com/remote-page.php",true);
ajax.onreadystatechange = function () {
if (ajax.readyState==4) {
layer.innerHTML = ajax.responseBody;
}
}
ajax.send(null);
</script>

Definition

1. XMLHttpRequest is a type of javaScript object to carry on the data and request along the connection
2. Layer is an example HTML element. The element have an ID “layer”. Just a place to load the output of the AJAX.
3. Open is a function to open a connection to remote page.
4. GET is the type of AJAX connection.
5. True in Open is a declaration to use the request asynchronously.
6. OnReadyStateChange triggers specified tasks whenever the AJAX status changed (fail, success, ready, etc)
7. Ready State = 4 means the request was answered and already responded.
8. Send(null) starts the AJAX Connection. It was null because there are no data required to be send to the remote site.

That’s all, have some words to say ?