《xmlhttprequest 创建代码移动到方法中》由会员分享，可在线阅读，更多相关《xmlhttprequest 创建代码移动到方法中（36页珍藏版）》请在金锄头文库上搜索。
1、var request;function createRequest() try request = new XMLHttpRequest(); catch (trymicrosoft) try request = new ActiveXObject(Msxml2.XMLHTTP); catch (othermicrosoft) try request = new ActiveXObject(Microsoft.XMLHTTP); catch (failed) request = false;if (!request)alert(Error initializing XMLHttpReques
2、t!);使用 XMLHttpRequest 的创建方法var request;function createRequest() try request = new XMLHttpRequest(); catch (trymicrosoft) try request = new ActiveXObject(Msxml2.XMLHTTP); catch (othermicrosoft) try request = new ActiveXObject(Microsoft.XMLHTTP); catch (failed) request = false;if (!request)alert(Error
3、 initializing XMLHttpRequest!);function getCustomerInfo() createRequest();/ Do something with the request variable此代码惟一的问题是推迟了错误通知Ajax 采用一种沙箱安全模型。因此，Ajax 代码（具体来说就是 XMLHttpRequest 对象）只能对所在的同一个域发送请求。建立请求 URLvar request = false;try request = new XMLHttpRequest(); catch (trymicrosoft) try request = new
4、ActiveXObject(Msxml2.XMLHTTP); catch (othermicrosoft) try request = new ActiveXObject(Microsoft.XMLHTTP); catch (failed) request = false; if (!request)alert(Error initializing XMLHttpRequest!);function getCustomerInfo() var phone = document.getElementById(phone).value;var url = /cgi-local/lookupCust
5、omer.php?phone= + escape(phone);escape() 方法，它用于转义不能用明文正确发送的任何字符。比如， 电话号码中的空格将被转换成字符 %20，从而能够在 URL 中传递这些字符。Break Neck Pizza 表单Enter your phone number:Your order will be delivered to:Type your order in here:打开请求有了要连接的 URL 后就可以配置 请求了。可以用 XMLHttpRequest 对象的 open() 方法来完成。该方法有五个参数：request-type：发送请求的类型。典型的
6、值是 GET 或 POST，但也可以发送 HEAD 请求。 url：要连接的 URL。 asynch：如果希望使用异步连接则为 true，否则为 false。该参数是可选的，默认为 true。 username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。 password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。 通常使用其中的前三个参数。事实上，即使需要异步连接，也应该指定第三个参数为 “true”。这是默 认值，但坚持明确指定请求是异步的还是同步的更容易理解。10. 发送请求function getCustomerInfo() open() 是打开吗
7、？Internet 开发人员对 open() 方法到底做什么没有达成一致。但它实际上并不是 打开一个请求。如果监控 XHTML/Ajax 页面及其连接脚本之间的网络和数据传递，当调用 open() 方法时将看不到任何通信。不清楚为何选用了这个名字，但显然不是一个好的选择。 var phone = document.getElementById(phone).value;var url = /cgi-local/lookupCustomer.php?phone= + escape(phone);request.open(GET, url, true);request.send(null);11.
8、 设置回调方法function getCustomerInfo() var phone = document.getElementById(phone).value;var url = /cgi-local/lookupCustomer.php?phone= + escape(phone);request.open(GET, url, true);request.onreadystatechange = updatePage;request.send(null);需要特别注意的是该属性在代码中设置的位置 它是在调用 send() 之前 设置的。发送请求之前必须设置该属性，这样服务器在回答完成请
9、求之后才能查看该属性。12. 回调方法的代码var request = false;try request = new XMLHttpRequest(); catch (trymicrosoft) try request = new ActiveXObject(Msxml2.XMLHTTP); catch (othermicrosoft) try request = new ActiveXObject(Microsoft.XMLHTTP); catch (failed) request = false; if (!request)alert(Error initializing XMLHttp
10、Request!);function getCustomerInfo() var phone = document.getElementById(phone).value;var url = /cgi-local/lookupCustomer.php?phone= + escape(phone);request.open(GET, url, true); request.onreadystatechange = updatePage;request.send(null);function updatePage() alert(Server is done!);HTTP 就绪状态服务器在完成请求
11、之后会在 XMLHttpRequest 的 onreadystatechange 属性中查找要调用的方法。这是真的，但还不完整。事实上，每当 HTTP 就绪状态改变时它都会调用该方法。HTTP 就绪状态表示请求的状 态或情形。它用于确定 该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在 Ajax 应用程序中需要了解五种就绪状态： 0：请求没有 发出（在调用 open() 之前）。 1：请求已 经建立但还没有发出（调用 send() 之前）。 2：请求已 经发出正在处理之中（这里通常可以从响应得到内容头部）。 3：请求已
12、 经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。 4：响应已完成，可以访问服务器响应并使用它。13. 检查就绪状态function updatePage() if (request.readyState = 4)alert(Server is done!);HTTP 状态码如果服务器响应请求并完成了处理但是报告了一个错误怎么办？要知道，服务器端代码应该明白它是由 Ajax、JSP、普通 HTML 表单或其他类型的代码调用的，但只能使用传统的 Web 专用方法报告信息。而在 Web 世界中，HTTP 代码可以处理请求中可能 发生的各种问题 。比方说，您肯定遇到过输入了错误的 URL
13、 请求而得到 404 错误码的情形，它表示该页面不存在。这仅仅是 HTTP 请求能够 收到的众多错误码中的一种。表示所访问数据受到保护或者禁止访问的 403 和 401 也很常见。无论哪种情况，这些错误码都是从完成的响应 得到的。换句话说，服务器履行了请求（即 HTTP 就绪状态是 4）但是没有返回客户机 预期的数据。因此除了就绪状态外，还需要检查 HTTP 状态。我 们期望的状态码是 200，它表示一切顺利。如果就绪状态是 4 而且状态码是 200，就可以处理服务器的数据了，而且这些数据应该就是要求的数据（而不是错误或者其他有问题的信息）。因此还要在回调方法中增加状态检查14. 检查 HTT
14、P 状态码function updatePage() if (request.readyState = 4)if (request.status = 200)alert(Server is done!);15. 增加一点错误检查function updatePage() if (request.readyState = 4)if (request.status = 200)alert(Server is done!);else if (request.status = 404)alert(Request URL does not exist);else alert(Error: status
15、code is + request.status);读取响应文本16. 处理服务器响应function updatePage() if (request.readyState = 4) if (request.status = 200) var response = request.responseText.split(|);document.getElementById(order).value = response0;document.getElementById(address).innerHTML =response1.replace(/n/g, ); elsealert(status is + request.status);首先，得到 responseText 并使用 JavaScript split() 方法从管道符分开。得到的数组放到 response 中。数组中的第一个值 上一个订单 用 response0 访问，被设置为 ID 为 “order” 的字段的值。第二个值 response1，即客户地址，则需要更多一点处理。因为地址中的行用一般的行分隔符（“n”字符）分隔，代码中需要用 XHTML 风格的行分隔符 来代替。替换过程使用
