Ajax入门到精通（一）

Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成

1. 创建新的 XMLHttpRequest 对象

var xmlHttp = false; try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e2) { xmlHttp = false; } } //非IE浏览器支持 if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { xmlHttp = new XMLHttpRequest(); }

2. 发出 Ajax 请求
function callServer() { // Get the city and state from the web form var city = document.getElementById("city").value; var state = document.getElementById("state").value; // Only go on if there are values for both fields if ((city == null) || (city == "")) return; if ((state == null) || (state == "")) return; // Build the URL to connect to var url = "/scripts/getZipCode.jsp?city=" + escape(city) + "&state=" + escape(state); // Open a connection to the server xmlHttp.open("GET", url, true); // Setup a function for the server to run when it's done xmlHttp.onreadystatechange = updatePage; // Send the request xmlHttp.send(null); }

open方法：其中指定了连接方法（GET）和要连接的 URL。最后一个参数如果设为 true，那么将请求一个异步连接（这就是 Ajax 的由来）。如果使用 false，那么代码发出请求后将等待服务器返回的响应。如果设为 true，当服务器在后台处理请求的时候用户仍然可以使用表单（甚至调用其他 JavaScript 方法）。

open()方法的5个参数：

• open()：建立到服务器的新请求。
• send()：向服务器发送请求。
• abort()：退出当前请求。
• readyState：提供当前 HTML 的就绪状态。
• responseText：服务器返回的请求响应文本。

• onreadystatechange属性：告诉服务器在运行完成 后（可能要用五分钟或者五个小时）做什么。因为代码没有等待服务器，必须让服务器知道怎么做以便您能作出响应。在这个示例中，如果服务器处理完了请求，一个特殊的名为 updatePage() 的方法将被触发。

  send()方法：因为已经在请求 URL 中添加了要发送给服务器的数据（city 和 state），所以请求中不需要发送任何数据。这样就发出了请求，服务器按照您的要求工作。

  • 如果需要发送安全信息或 XML，可能要考虑使用 send() 发送内容

  3. 处理服务器响应

  function updatePage() { if (xmlHttp.readyState == 4&&xmlHttp.status == 200) { var response = xmlHttp.responseText; document.getElementById("zipCode").value = response; } }

  xmlHttp.readyState 属性的值：返回服务器响应状态

• 0：请求没有发出（在调用 open() 之前）。
• 1：请求已经建立但还没有发出（调用 send() 之前）。
• 2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。
• 3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。
• 4：响应已完成，可以访问服务器响应并使用它。

• xmlHttp.status 检查 HTTP 状态，我们期望的状态码是 200

• 401：未经授权
• 403：禁止
• 404：没找到
• 200：一切正常

• xmlHttp.responseText 属性，服务器将把响应填充到responseText 属性中

  4. 启动一个 Ajax 过程

  <form> <p>City: <input type="text" name="city" id="city" size="25" onChange="callServer();" /></p> <p>State: <input type="text" name="state" id="state" size="25" onChange="callServer();" /></p> <p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p> </form>

  5.使用 Ajax 生成一个 HEAD 请求

  function getSalesData() { createRequest(); var url = "/boards/servlet/UpdateBoardSales"; request.open("HEAD", url, true); request.onreadystatechange = updatePage; request.send(null); }

  获取响应的长度 request.getResponseHeader("Content-Length");

  获取内容类型 request.getResponseHeader("Content-Type");