Dynamic Page Updating through XMLHttpRequest

With the introduction of "Web 2.0" and its dynamic paradigm(i.e., fetching new data without having to refetch the whole page), the way the HTTP(S) world works has greatly changed. However, how are these new methods accomplished?

The answer would be through the use of the XMLHttpRequest Javascript function - a function which does a usual page request, but accomplishes this entirely from inside the script, removing the need to reload the entire site. One can immediately see how this can improve the functionality of many applications(e.g., address locators, search engines, etc.), and make the end-user's experience that much cleaner.

As to how this is accomplished would be as such:

        [Call XMLHttpRequest, with wanted URL]  [Use results to change the main document]
                        |                         ^
                        v                         |
        [Page is requested, then returns the response]

The required Javascript function would be as such:

nRequest.js

function nRequest(url) {
	var response = null;
// Browser check
	if (!/*@cc_on!@*/false) {
		var connection = new XMLHttpRequest();
	} else {
		var connection = new ActiveXObject("Microsoft.XMLHTTP");
	}
	try {
// Open a non-asynchronous connection with GET.
		connection.open("GET", url, false);
// Send the request.
		connection.send();
// If data receiving is complete, set response to the received data.
		if(connection.readyState == 4) {
			response = connection.responseText;
		}
	}
	catch(e) {
		return false;
	}
// Return our data.
	return response;
}

Although making a request does not need to be as complex as the prior example, if one wishes to have a minor amount of error checking and cross-browser compatibility, as explained in the comments, it has to be.
If you choose to use a separate Javascript file, as done in this example, ensure that the Javascript file is located in the same directory as your HTML file(or adjust the <script> tags accordingly).

Now to showcase this function we will create a simple page that will replace the contents of a div with the nRequest r esults:

<script type="text/javascript" src="nRequest.js"></script>

<div id="page">
All this text will be replaced when you press the "change" button.
<a href="javascript:;" onClick="this.parentNode.innerHTML=nRequest('new');">change</a>
</div>

Now we must create the file "new", which should be located in the same folder as the initial page:

new

Wooo, the div contents have been changed. Awesome.

After following all of this, the results should be somewhat like the following:

In conclusion, it is very easy to see what a useful tool XMLHTTPRequest can be -- but what about applications that require constant communication, such as instant messaging and the like? Wouldn't it be terribly excessive to open new page requests just to send and recieve updates?

The answer would be, yes, as that is a great deal of overhead just to recieve a minuet amount of data - however, this can be accomplished through asynchronous communcation; that is to say, if we open the XMLHTTPRequest, but instead of reading all the data and closing, we keep the connection open, allowing new data to be read in without having to open a new connection. This method, however, requires the usage of server-side programming, as the server also needs to never close the connection and stream out any new updates to the client.

This method is covered in XHR2, where it is accomplished through the use of PHP.