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 Chapter 1, "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 in detail in Chapter 3, "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.

A Standard XHR

If you were to break down an Ajax request to its bare functionality, this is what you would be left with. In this scenario, a static XML, JSON, or text file residing on the same domain is requested by the XHR object through the GET method. It is then returned by the server to be handled by the client-side code that requested it. Take a look at Figure 2.1 to see the flow of a standard Ajax model.

Figure 2.1. This request is the simplest form of the Ajax request/response model, involving only a static XML, JSON, or text file residing on the same domain.

This type of request can be beneficial if a web-savvy client or a developer is updating the requested file on the server, which is typically not the case, especially with large-scale applications. If this model is not going to meet your needs, the next approach has what this model is missing most: a database.

A Database-Enabled XHR

Learning how to create a database-enabled XHR is like making your first database interaction. It opens a whole new world of possibilities and is not as complicated as you would think; it is trivial compared to the complex functionality that you can achieve with database-integrated Ajax. To use this model, we would start with a request to a server-side language. The server-side language would query the database, based on what was requested, via custom methods that we would write to handle specific database interactions. After the data has been received by the server-side language, it can be returned to the XHR that originally requested it as XML, JSON, or text and handled by the client-side code. This request allows users to retrieve custom data based on the requests that they make. See Figure 2.2 to get a better understanding of the flow in a database-enabled XHR.

Figure 2.2. A database-enabled XHR opens up a world of possibilities and will take your Ajax applications to a whole new level.

Although this request model is quite a bit more powerful than a standard request, you might want even more control. The next model will provide you with the ability to post data to the database and receive data based on the request, or simply receive a Boolean for a successful database INSERT, all without refreshing the page.

Sending Data to a Database-Enabled XHR

Sending data to the database starts with an XHR GET or POST to a server-side language/engine. After the server receives the request, it parses the XML or simple key/value pair sent by the XHR and updates the database accordingly. This request model updates the database based on user interaction, without ever refreshing the browser. This is a great way to replicate the Save button in a desktop application. We will use this model in the sample by saving sent emails to the database to allow the user to retrieve it at a later time. Figure 2.3 shows the flow of this request type with optional response data, which we will cover in Chapter 3.

Figure 2.3. A database-enabled XHR POST allows you to combine the XHR with complete database access.

Sending data to a database-enabled XHR provides the most power out of the request models mentioned in this chapter. Essentially, it provides us with full database control through the XHR. There are many different situations in which you will want to post data to the server with the XHR. For example, you might want to password-protect your XHR by sending a password to the server, and then authenticate it before querying the database. Or, you might want to insert or update records in a database, or select records based on the request.

Server-side interaction with Ajax allows us to create on-demand database updates, just as a desktop application would save our progress. There is so much to cover on the server side of a request, which is why I dedicated an entire section of the book to this very topic in Part V, "Server-Side Interaction." But first, it is important that there be a solid understanding of the object and its capabilities before diving into complex code.