用AJAX开发智能Web应用程序之基础篇

让我们首先创建一个简单的包含三个INPUT字段的HTML：zip，city和state。请注意，一旦一个字符输入进邮政区号字段域中，即调用方法zipChanged()。JavaScript函数zipChanged()(见下)在当zip长度为3时调用函数updateState()，而在当zip长度为5时调用函数up-dateCity()。而updateCity()和updateState()把大部分的工作代理到另一个函数ask()。

Zip:＜input id="zipcode" type="text" maxlength="5" onKeyUp="zipChanged()" style="width:60"/＞ City: ＜input id="city" disabled maxlength="32" style="width:160"/＞ State:＜input id="state" disabled maxlength="2" style="width:30"/＞ ＜script src="xmlhttp.js"＞＜/script＞ ＜script＞ var zipField = null; function zipChanged(){ zipField = document.getElementById("zipcode") var zip = zipField.value; zip.length == 3?updateState(zip):zip.length == 5?updateCity(zip):""; } function updateState(zip) { 　var stateField = document.getElementById("state"); 　ask("resolveZip.jsp?lookupType=state&zip="+zip， stateField， zipField); } function updateCity(zip) { 　var cityField = document.getElementById("city"); 　ask("resolveZip.jsp? lookupType=city&zip="+zip， cityField， zipField); } ＜/script＞

函数ask()与服务器进行通讯并分配一个回调函数来处理服务器的响应（见下列代码）。后面，我们将分析具有双重特点的resolveZip.jsp的内容-它根据zip字段中的字符数查找city或state信息。重要的是，ask()使用了具有异步特点的XmlHttpRequest，这样填充state和city字段或着色zip字段边界就可以不必减慢数据入口而得以实现。首先，我们调用request.open()-它用服务器打开套接字频道，使用一个HTTP动词(GET或POST)作为第一个参数并且以数据提供者的URL作为第二个参数。request.open()的最后一个参数被设置为true-它指示该请求的异步特性。注意，该请求还没有被提交。随着对request.send()的调用，开始提交-这可以为POST提供任何必要的有效载荷。在使用异步请求时，我们必须使用request.onreadystatechanged属性来分配请求的回调函数。(如果请求是同步的话，我们应该能够在调用request.send之后立即处理结果，但是我们也有可能阻断用户，直到该请求完成为止。)

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; } 　} }

为ask()所使用的HttpRequest()函数(见上)是一跨浏览器的XMLHTTPRequest的一个实例的构造器；稍后我们将分析它。到目前为止，请注意对于handleResponse()的调用是如何用一匿名函数包装的-这个函数是function(){handleHttpResponse(http，fieldToFill， lookupField)}。