XMLHttpRequest超时事件

最新推荐文章于 2024-07-07 19:49:58 发布

苍月代表我

最新推荐文章于 2024-07-07 19:49:58 发布

阅读量5.9k

点赞数

《IE8 & 9开发实战：基于下一代IE的应用开发》第3章用AJAX和JSON来丰富Web应用程序的功能，本章将介绍Internet Explorer中的一些新功能和经过升级的功能，使开发人员能够增强动态Web应用程序的功能，并使其更为流畅。我们将会讨论兼容性和互操作性场景，重点讨论IE中可能会对现有应用程序产生影响的产品变化，并提供一些有用的详尽示例，用来演示如何将网站与IE中经过更新的AJAX功能集结合在一起。本节为大家介绍XMLHttpRequest超时事件。

AD： 2013大数据全球技术峰会课程PPT下载

3.4.2 XMLHttpRequest超时事件

Internet Explorer 8及更高版本在XMLHttpRequest对象中包含了timeout属性和ontimeout事件。使用这一对象的脚本可以使用这一属性对一个请求所花费的时间设置一个硬性限制，当达到这一限制时接收一个事件。

属性

Timeout属性--XMLHttpRequest对象从一个目标接收响应所应等待的时间限制(单位为毫秒)。当达到这一限制时，将产生ontimeout事件，并放弃该请求。

事件

Ontimeout事件--当XMLHttpRequest.send()的调用时间与当前时间之间的时间差达到某一限制时，则触发相关联的回调函数。

代码清单3-16是一个网页，它使用服务器端脚本(在本例中为PHP)来模拟一个需要花费很长时间来加载的网页。当服务器接收到对这一页面的请求时，脚本暂停5秒(用sleep(5)实现)，然后才返回文本"Success!"。

代码清单3-16 强制服务器在响应之前等待5秒的网页

   
   <?php 
// Simulate a page that takes 5 seconds to respond. Once finished,  
// return the string "Success!"  
sleep(5);  
echo "Success!";  
?>

代码清单3-17给出了一段脚本，它使用两个XMLHttpRequest对象请求代码清单3-16中的页面，这两个对象是：xhrSmallTimeout和xhrLargeTimeout。xhrSmallTimeout对象请求上面的页面，并使用它的timeout属性将该请求的等待时间限制为2秒。xhrLargeTimeout对象尝试显示同一网页，但为其分配的等待时间最长可达10秒。每个对象都有两个回调方法：一个用于ontimeout (timeoutRaisedSmall()和timeoutRaisedLarge())，当一个请求超时时触发；另一个用于onreadystate (readyStateHandlerSmall()和readyStateHandlerLarge())，在请求/响应过程期间触发。在执行onreadystate回调期间产生的异常写到<div id="exceptions">。

代码清单3-17 使用XMLHttpRequest超时事件的代码示例

   
   <html> 
<head> 
<title>XMLHttpRequest Timeout</title> 
</head> 
<body> 
<h3>Request with 2s timeout: <span id="xhrSmallStatus"></span></h3> 
<h3>Request with 10s timeout: <span id="xhrLargeStatus"></span></h3> 
<h3>Exceptions:</h3> 
<div id="exceptions"><p></div> 
<script type="text/javascript"> 
// Define the XMLHttpRequest variables, the target page and  
// elements that will be written to  
var xhrSmallTimeout; var xhrLargeTimeout;  
var targetPage = "http://examples.proiedev.com/03/networking/ timeout/result.php";  
var spanXhrSmallStatus = document.getElementById ("xhrSmallStatus");  
var spanXhrLargeStatus = document.getElementById ("xhrLargeStatus");  
var spanExceptions = document.getElementById("exceptions");  
function displayException(e, objectName) {  
spanExceptions.innerHTML += "<b>Object:</b> " + objectName + "<br>"  
+ "<b>Name:</b> " + e.name + "<br>"  
+ "<b>Message:</b> " + e.message + "<p>";  
}  
// Timeout callback for request with 2s timeout  
function timeoutRaisedSmall(){  
setText(spanXhrSmallStatus, "Timeout");  
}  
// Timeout callback for request with 10s timeout  
function timeoutRaisedLarge() {  
setText(spanXhrLargeStatus, "Timeout");  
}  
// readyState callback for request with 2s timeout. If an  
// exception is raised, write it to the screen.  
function readyStateHandlerSmall() {  
if(xhrSmallTimeout.readyState == 4) {  
try {  
setText(spanXhrSmallStatus, xhrSmallTimeout.responseText);  
} catch(e) { displayException(e, "xhrSmallTimeout"); }  
}  
}  
// readyState callback for request with 10s timeout. If an  
// exception is raised, write it to the screen.  
function readyStateHandlerLarge() {  
if(xhrLargeTimeout.readyState == 4) {  
try {  
setText(spanXhrLargeStatus, xhrLargeTimeout.responseText);  
} catch(e) { displayException(e, "xhrLargeTimeout"); }  
}  
}  
// Create a XMLHttpRequest object with a small (2 second)  
// timeout period  
xhrSmallTimeout = new XMLHttpRequest();  
xhrSmallTimeout.open("GET", targetPage, true);  
xhrSmallTimeout.timeout = 2000;  
xhrSmallTimeout.ontimeout = timeoutRaisedSmall;  
xhrSmallTimeout.onreadystatechange = readyStateHandlerSmall;  
// Create a XMLHttpRequest object with a large (10 second)  
// timeout period  
xhrLargeTimeout = new XMLHttpRequest();  
xhrLargeTimeout.open("GET", targetPage, true);  
xhrLargeTimeout.timeout = 10000;  
xhrLargeTimeout.ontimeout = timeoutRaisedLarge;  
xhrLargeTimeout.onreadystatechange = readyStateHandlerLarge;  
// Sent the XMLHttpRequests  
xhrSmallTimeout.send(null);  
xhrLargeTimeout.send(null);  
// Set element text (cross-browser innerText/textContent)  
function setText(element, text) { /*...*/ }  
</script> 
</body> 
</html>

图3-12显示了所运行的示例代码。在xhrSmallTimeout对象发出请求之后2秒，调用了timeoutRaisedSmall()方法，并在页面上显示"Timeout"(因为服务器要等待至少5秒后才会响应)。在超时之后，触发onreadystate事件，产生一个异常--这个请求在技术上完成了(readyState==4)，responseText返回一个null类型，而不是String。由xhrLargeTimeout发出的第二个请求在大约5秒后完成，触发readyStateHandlerLarge()，将相关联的responseText写到页面。由于第二个请求在10秒限制之前完成，所以从来不会调用timeoutRaisedLarge()方法。

（点击查看大图）图3-12 演示XMLHttpRequest超时事件的网页

这个例子指出了有关XMLHttpRequest超时的一个重点：如果事务在完成之前超时，浏览器会将其看作已经"完成"，因此在触发onreadystatechange回调时，其readyState状态表示已经完成。但这些对象的responseXML和responseText属性是不可用的。使用timeout属性和ontimeout事件的脚本必须使用onreadystatechange事件处理程序，当这些属性为null时，这些处理程序可以正常地表示失败