Chapter 20. Scripting HTTP

The Hypertext Transfer Protocol (HTTP) specifies how web browsers request documents from and post form contents to web servers, and how web servers respond to those requests and posts. Web browsers obviously handle a lot of HTTP. Usually, however, HTTP is not under the control of scripts and instead occurs when the user clicks on a link, submits a form, or types a URL. Usually, but not always: it is possible for JavaScript code to script HTTP.

HTTP requests can be initiated when a script sets the location property of a window object or calls the submit() method of a form object. In both cases, the browser loads a new page into the window, overwriting any script that was running there. This kind of trivial HTTP scripting can be useful in a multiframed web page but is not the subject of this chapter. Here we consider how JavaScript code can communicate with a web server without causing the web browser to reload the currently displayed page.

The <img>, <iframe>, and <script> tags have src properties. When a script sets these properties to a URL, an HTTP GET request is initiated to download the content of the URL. A script can therefore pass information to a web server by encoding that information into the query-string portion of the URL of an image and setting the src property of an <img> element. The web server must actually return some image as the result of this request, but it can be invisible: a transparent 1-pixel-by-1-pixel image, for instance.^[*]

^[*] Images of this sort are sometimes called web bugs. They have a bad repuration because privacy concerns arise when web bugs are used to communicate information to a server other than the one from which the web page was loaded. One common, and legitimate, use of this kind of third-party web bug is for hit counting and traffic analysis. When a web page scripts the src property of an image to send information back to the server from which the page was originally loaded, there are no third-party privacy issues to worry about.

<iframe> tags are a newer addition to HTML and are more versatile than <img> tags because the web server can return a result that can be inspected by the script instead of a binary image file. To do HTTP scripting with an <iframe> tag, the script first encodes information for the web server into a URL and then sets the src property of the <iframe> to that URL. The server creates an HTML document containing its response and sends it back to the web browser which displays it in the <iframe>. The <iframe> need not be visible to the user; it can be hidden with CSS, for example. A script can access the server's response by traversing the document object of the <iframe>. Note that this traversal is subject to the constraints of the same-origin policy described in Section 13.8.2.

Even the <script> tag has a src property that can be set to cause a dynamic HTTP request. Doing HTTP scripting with <script> tags is particularly attractive because when the server's response takes the form of JavaScript code, no parsing is required: the JavaScript interpreter executes the server's response.

Although HTTP scripting with <img>, <iframe>, and <script> tags is possible, it is harder than it sounds to do it portably, and this chapter focuses on another, more powerful way to do it. The XMLHttpRequest object is well supported in modern browsers and provides full access to the HTTP protocol, including the ability to make POST and HEAD requests, in addition to regular GET requests. XMLHttpRequest can return the web server's response synchronously or asynchronously, and can return the content as text or as a DOM document. Despite its name, the XMLHttpRequest object is not limited to use with XML documents: it can fetch any kind of text document. The XMLHttpRequest object is the key feature of a web application architecture known as Ajax. I'll discuss Ajax applications after illustrating how XMLHttpRequest works.

At the end of the chapter, I'll return to the topic of scripting HTTP with <script> tags and show how you can do this when an XMLHttpRequest object is not available.