| 转：AJAX核心对象–XMLHttpRequest 对象使用详解 ·open()：建立到服务器的新请求。 ·send()：向服务器发送请求。 ·abort()：退出当前请求。 ·readyState：提供当前 HTML 的就绪状态。 ·responseText：服务器返回的请求响应文本。 . 增加对 Microsoft 浏览器的支持 { request = } { { //尝试使用较新版本的 Microsoft 浏览器创建 Microsoft 兼容的对象(Msxml2.XMLHTTP) request = } { { //尝试使用较老版本的 Microsoft 浏览器创建 Microsoft 兼容的对象(Microsoft.XMLHTTP) request = } { request = false; } } } alert(“Error initializing XMLHttpRequest!”); 得到请求对象之后就可以进入请求/响应循环了。记住，XMLHttpRequest Ajax 采用一种沙箱安全模型。因此，Ajax 代码（具体来说就是 XMLHttpRequest 对象）只能对所在的同一个域发送请求。以后的文章中将进一步介绍安全和 Ajax，现在只要知道在本地机器上运行的代码只能对本地机器上的服务器端脚本发送请求。如果让 Ajax 代码在 www.breakneckpizza.com 上运行，则必须 www.breakneck.com 中运行的脚本发送请求。 首先要确定连接的服务器的 URL。这并不是 Ajax 的特殊要求，但仍然是建立连接所必需的，显然现在您应该知道如何构造 URL 了。多数应用程序中都会结合一些静态数据和用户处理的表单中的数据来构造该 URL。比如，清单 7 中的 java script 代码获取电话号码字段的值并用其构造 URL。 . 建立请求 URL { request = } { { //尝试使用较新版本的 Microsoft 浏览器创建 Microsoft 兼容的对象(Msxml2.XMLHTTP) request = } { { //尝试使用较老版本的 Microsoft 浏览器创建 Microsoft 兼容的对象(Microsoft.XMLHTTP) request = } { request = false; } } } alert(“Error initializing XMLHttpRequest!”); { var phone = document.getElementById(“phone”).value; var url = “/cgi-local/lookupCustomer.php?phone=” + escape(phone); } 如果以前没用见过 escape() 有了要连接的 URL 后就可以配置请求了。可以用 XMLHttpRequest 对象的 open() ·request-type：发送请求的类型。典型的值是 GET 或 POST，但也可以发送 HEAD 请求。 ·url：要连接的 URL。 ·asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true。 ·username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。 ·password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。 通常使用其中的前三个参数。事实上，即使需要异步连接，也应该指定第三个参数为 “true”。这是默认值，但坚持明确指定请求是异步的还是同步的更容易理解。 open() 是打开吗？ Internet 开发人员对 open() 方法到底做什么没有达成一致。但它实际上并不是 一旦用 open() 配置好之后，就可以发送请求了。幸运的是，发送请求的方法的名称要比 open() 适当，它就是 send()。 send() 只有一个参数，就是要发送的内容。但是在考虑这个方法之前，回想一下前面已经通过 URL 本身发送过数据了： 虽然可以使用 send() 发送数据，但也能通过 URL 本身发送数据。事实上，GET 请求（在典型的 Ajax 应用中大约占 80%）中，用 URL 发送数据要容易得多。如果需要发送安全信息或 现在我们所做的只有很少一点是新的、革命性的或异步的。必须承认，open() 方法中 “true” 这个小小的关键字建立了异步请求。但是除此之外，这些代码与用 Java 首先一定要理解这些代码中的流程（如果需要请回顾 清单 10）。建立其请求然后发出请求。此外，因为是异步请求，所以 java script 这就提出了一个有趣的问题：服务器完成了请求之后会发生什么？答案是什么也不发生，至少对现在的代码而言如此！显然这样不行，因此服务器在完成通过 XMLHttpRequest 发送给它的请求处理之后需要某种指示说明怎么做。 现在 onreadystatechange 属性该登场了。该属性允许指定一个回调函数。回调允许服务器（猜得到吗？）反向调用 Web 页面中的代码。它也给了服务器一定程度的控制权，当服务器完成请求之后，会查看 XMLHttpRequest 对象，特别是 onreadystatechange 属性。然后调用该属性指定的任何方法。之所以称为回调是因为服务器向网页发起调用，无论网页本身在做什么。比方说，可能在用户坐在椅子上手没有碰键盘的时候调用该方法，但是也可能在用户输入、移动鼠标、滚动屏幕或者点击按钮时调用该方法。它并不关心用户在做什么。 这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务器响应请求并触发 onreadystatechange 属性指定的回调方法。因此需要像 清单 11 一样在代码中指定该方法。 在 java script 中引用函数 java script 是一种弱类型的语言，可以用变量引用任何东西。因此如果声明了一个函数 updatePage()，java script 也将该函数名看作是一个变量。换句话说，可用变量名 updatePage 在代码中引用函数。 清单 11. 设置回调方法 request.open(“GET”, url, true); request.onreadystatechange = updatePage; request.send(null); } 需要特别注意的是该属性在代码中设置的位置 —— 它是在调用 send() 之前设置的。发送请求之前必须设置该属性，这样服务器在回答完成请求之后才能查看该属性。现在剩下的就只有编写 updatePage() 方法了，这是本文最后一节要讨论的重点。 发送请求，用户高兴地使用 Web 表单（同时服务器在处理请求），而现在服务器完成了请求处理。服务器查看 onreadystatechange 属性确定要调用的方法。除此以外，可以将您的应用程序看作其他应用程序一样，无论是否异步。换句话说，不一定要采取特殊的动作编写响应服务器的方法，只需要改变表单，让用户访问另一个 URL 或者做响应服务器需要的任何事情。这一节我们重点讨论对服务器的响应和一种典型的动作 —— 即时改变用户看到的表单中的一部分。 现在我们已经看到如何告诉服务器完成后应该做什么：将 XMLHttpRequest 对象的 onreadystatechange 属性设置为要运行的函数名。这样，当服务器处理完请求后就会自动调用该函数。也不需要担心该函数的任何参数。我们从一个简单的方法开始，如 清单 12 所示。 . 回调方法的代码 request.open(“GET”, url, true); request.onreadystatechange = updatePage; request.send(null); } { alert(“Server is done!”); } 它仅仅发出一些简单的警告，告诉您服务器什么时候完成了任务。在自己的网页中试验这些代码。 根据浏览器的不同，在表单停止弹出警告之前会看到两次、三次甚至四次警告。这是怎么回事呢？原来我们还没有考虑 HTTP 就绪状态，这是请求/响应循环中的一个重要部分。 HTTP 就绪状态表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在 Ajax 应用程序中需要了解五种就绪状态： 0：请求没有发出（在调用 open() 之前）。 1：请求已经建立但还没有发出（调用 send() 之前）。 2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。 3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。 4：响应已完成，可以访问服务器响应并使用它。 与大多数跨浏览器问题一样，这些就绪状态的使用也不尽一致。您也许期望任务就绪状态从 0 到 1、2、3 再到 4，但实际上很少是这种情况。一些浏览器从不报告 0 或 1 而直接从 2 开始，然后是 3 和 4。其他浏览器则报告所有的状态。还有一些则多次报告就绪状态 1。在上一节中看到，服务器多次调用 updatePage()，每次调用都会弹出警告框 —— 可能和预期的不同！ 对于 Ajax 编程，需要直接处理的惟一状态就是就绪状态 4，它表示服务器响应已经完成，可以安全地使用响应数据了。 . 检查就绪状态 if (request.readyState == 4) alert(“Server is done!”); } 虽然上面的代码看起来似乎不错，但是还有一个问题 —— 如果服务器响应请求并完成了处理但是报告了一个错误怎么办？要知道，服务器端代码应该明白它是由 Ajax、JSP 因此除了就绪状态外，还需要检查 HTTP 状态。我们期望的状态码是 200，它表示一切顺利。如果就绪状态是 4 而且状态码是 200，就可以处理服务器的数据了，而且这些数据应该就是要求的数据（而不是错误或者其他有问题的信息）。因此还要在回调方法中增加状态检查，如 清单 14 所示。 { alert(“Server is done!”); alert(“Request URL does not exist”); alert(“Error: status code is ” + request.status); } } 现在将 getCustomerInfo() 中的 URL 改为不存在的 URL 看看会发生什么。应该会看到警告信息说明要求的 URL 不存在 —— 好极了！很难处理所有的错误条件，但是这一小小的改变能够涵盖典型 Web 应用程序中 80% 的问题。 现在可以确保请求已经处理完成（通过就绪状态），服务器给出了正常的响应（通过状态码），最后我们可以处理服务器返回的数据了。返回的数据保存在 关于 responseText 中的文本内容，比如格式和长度，有意保持含糊。这样服务器就可以将文本设置成任何内容。比方说，一种脚本可能返回逗号分隔的值，另一种则使用管道符（即 | 字符）分隔的值，还有一种则返回长文本字符串。何去何从由服务器决定。 在本文使用的例子中，服务器返回客户的上一个订单和客户地址，中间用管道符分开。然后使用订单和地址设置表单中的元素值，清单 16 给出了更新显示内容的代码。 . 处理服务器响应 { { document.getElementById(“order”).value = response[0]; document.getElementById(“address”).innerHTML = response[1].replace(/\n/g, “”); } alert(“Request URL does not exist”); alert(“Error: status code is ” + request.status); } } 首先，得到 responseText 并使用 java script 结束本文之前，我还要介绍 XMLHttpRequest 的另一个重要属性 responseXML。如果服务器选择使用 XML 响应则该属性包含（也许您已经猜到）XML 响应。处理 XML 响应和处理普通文本有很大不同，涉及到解析、文档对象模型（DOM）和其他一些问题。后面的文章中将进一步介绍 XML。但是因为 responseXML 通常和 responseText 一起讨论，这里有必要提一提。对于很多简单的 Ajax 应用程序 responseText 就够了，但是您很快就会看到通过 Ajax 应用程序也能很好地处理 XML。 您可能对 XMLHttpRequest 感到有点厌倦了，我很少看到一整篇文章讨论一个对象，特别是这种简单的对象。但是您将在使用 Ajax 编写的每个页面和应用程序中反复使用该对象。坦白地说，关于 XMLHttpRequest 还真有一些可说的内容。 |
Leave A Comment