Ajax入门到精通（一）

Love The Way You Lie 2022-08-05 00:52 180阅读 0赞

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

**1. 创建新的 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");`