An In-Depth Look at XMLHttpRequest

The XHR (XMLHttpRequest) object is the core of the Ajax engine. It is the object that enables a page to get data from (using the GET method) or post data to (using the POST method) the server as a background request, which means that it does not refresh the browser during this process. As we covered in , "Introduction to Ajax," the hype surrounding Ajax has been based on this object and the fact that the interaction model it creates is more intuitive than a standard HTTP (Hypertext Transport Protocol) request. This is because changes happen on demand when the user makes them, and allow web applications to feel more like desktop applications. The XHR eliminates the need to wait on the server to respond with a new page for each request and allows users to continue to interact with the page while the requests are made in the background. This is a key factor in maintaining an intuitive user experience: Users should never be aware of the process; rather, they should be focused on the task at hand, which is using your service. The on-demand nature of the XHR is extremely beneficial when dealing with web applications where users are trying to accomplish tasks because the standard HTTP request is better suited for presentation-type websites.

Aside from the background data processing, the GET and POST methods of the XHR object work the same as a standard HTTP request. Using either the POST or the GET method allows you to make a request for data from the server and receive a response in any standardized format. The most common formats in which to receive a response are XML, JSON (JavaScript Object Notation), and text. We will cover all formats , "The Response." POST is specifically useful when sending data that is larger than 512 bytes (an amount that the GET method cannot handle). After a response is received, the application can be populated with new data from the server by using the DOM with DHTML, which is a combination of XHTML, JavaScript, and CSS.

All Ajax requests start with a client-side interaction that is typically managed by JavaScript. JavaScript creates the XHR object and makes an HTTP request to the server. What happens from here can take on many different forms. Let's take a look at three of the most common request models and their processes.