The function ask() communicates with the server and assigns a callback to process the server's response (see the following code). Later, we'll look at the content of the dual-natured resolveZip.jsp that looks up the city or state information depending on the number of characters in the zip field. Importantly, ask() uses the asynchronous flavor of the XmlHttpRequest so that populating the state and city fields or coloring the zip border is done without slowing data entry down. First, we call request.open(), which opens the socket channel with the server using one of the HTTP verbs (GET or POST) as the first argument and the URL of the data provider as a second one. The last argument of the request.open() is set to true, which indicates the asynchronous nature of the request. Note that the request hasn't been submitted yet. That happens with the request.send() call, which can provide any necessary payload for POST. With asynchronous requests we have to assign the request's callback using the request.onreadystatechanged attribute. (If the request had been synchronous, we could have processed the results immediately after request.send, but we would have blocked the user until the request was completed.)

HTTPRequest = function () {
   var xmlhttp=null;
   try {
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
   } catch (_e) {
      try {
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (_E) {    }
   }
   if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
     try {
        xmlhttp = new XMLHttpRequest();
     } catch (e) {
        xmlhttp = false;
   }  }
   return xmlhttp;
}

function ask(url, fieldToFill, lookupField) {
	  var http = new HTTPRequest();
   	  http.open("GET", url, true);
	  http.onreadystatechange = function (){ handleHttpResponse(http, fieldToFill,
	   lookupField)};
	  http.send(null);
}

function handleHttpResponse(http, fieldToFill, lookupField) {
  if (http.readyState == 4) {
    result = http.responseText;
   	if ( -1 != result.search("null") ) {
		lookupField.style.borderColor = "red";
		fieldToFill.value = "";
	} else {
		lookupField.style.borderColor = "";
		fieldToFill.value = result;
} } }

The code for that function is dynamically created and compiled every time we do an assignment to the http.onreadstatechange property. As a result, JavaScript creates a pointer to the context with all variables that the enclosing method - ask() - has access to. It's done so the anonymous function and handleResponse() are guaranteed full access to all context-hosted variables until the reference to the anonymous function is garbage-collected. In other words, whenever our anonymous function gets invoked, it can refer to the request, fieldToFill, and lookupField variables as seamlessly as if they were global. It's also true that every invocation of ask() will create a separate copy of the environment with the variables holding the values of the moment the closure was formed.

Let's look at the function handleResponse(). Since it can be invoked at different states of the request processing, the function ignores all cases except the one when the request processing is complete. This corresponds to the request.readyState property equal to 4 ("Completed"). At this point the function reads the server's response text. Contrary to what its name may suggest, neither the input nor the output of XmlHttpRequest has to be restrained to XML. In particular, our resolveZip.jsp (see Listing 1) returns plain text. If the return value is "unknown" the function assumes that the zip code was invalid and changes the border color of the lookup field (zip) to red. Otherwise, the return value is used to populate the fill field (state or city), and zip's border is assigned a default color.

XMLHttpRequest - the Transport Object
Let's return to our cross-browser implementation of XMLHTTPRequest. The last listing contains an HttpRequest() function that's upward-compatible with IE5.0 and Mozilla 1.8/FireFox. For simplicity's sake, we just try to create a Microsoft XMLHTTPRequest object - and if that fails we assume it's Firefox/Mozilla.

At the heart of this function is the XMLHTTPRequest - a native browser object, which facilitates anything that involves HTTP protocol in communicating with the server. It allows specifying any HTTP verbs, headers, and payload and works in either asynchronous or synchronous mode. No downloads or plugins are required, although in the case of IE, XMLHTTPRequest is an ActiveX integrated inside the browser. Accordingly, the "Run ActiveX Control and Plugins" default IE permission should be in place to use it.

Most important, XMLHTTPRequest allows an RPC-style programmatic query to the server without any page refresh. It does it in a predictable, controlled way, offering complete access to all details of the HTTP protocol, including the headers and any custom formatting of the data. In future articles, we'll show you industrial protocols that you can run on top of this transport including Web Services and XML-RPC that greatly simplify developing and maintaining large-scale applications.

The Server-Side Logic
Finally, the server-side resolveZip.jsp is invoked from the function ask() as shown in Listing 1. The resolveZip.jsp is called in two separate scenarios differentiated by the current length of the zip code (see the zipChanged() function.) The value of the request parameter lookupType is either state or city. For simplicity's sake, we'll assume that two files, state.properties and city.properties, are located in the root directory of the c: drive of the server. The resolveZip.jsp logic is confined to returning the lookup value with the appropriate pre-loaded file - once in each case of course.