XMLHttpRequest对象定义的事件:
abort——在请求被终止时触发(ProgressEvent);
error——在请求失败时触发(ProgressEvent);
load——在请求成功完成时触发(ProgressEvent);
loadend——在请求已完成时触发,无论成功还是发生错误(ProgressEvent);
loadstart——在请求开始时触发(ProgressEvent);
progress——触发以提示请求的进度(ProgressEvent);
readystatechange——在请求生命周期的不同阶段触发(Event);
timeout——如果请求超时则触发(ProgressEvent);
注:考虑到浏览器对其它事件的支持还不到位,readystatechange是目前唯一能可靠追踪请求进度的事件。
ProgressEvent对象定义的额外属性:
lengthComputable——如果能够计算数据流的长度则返回true;
loaded——返回当前已载入的数据量;
total——返回可用的数据总量;
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>上海远地资产管理有限公司</title> <meta name="author" content="jason"/> <meta name="description" content="上海远地资产管理有限公司(简称:远地资产),是一家专业的互联网金融服务平台."/> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/> <style type="text/css"> table{ margin:10px; border-collapse: collapse; float: left; } th,td{ padding: 4px; } div{ margin: 10px; } </style> </head> <body> <div> <button>Apples</button> <button>Cherries</button> <button>Bananas</button> </div> <div id="target"> 加载内容 </div> <table id="events" border="1"> </table> <script> //使用XMLHttpRequest定义的一次性事件 var buttons=document.getElementsByTagName("button"); for(var i=0;i<buttons.length;i++){ buttons[i].onclick=handleButtonPress; } var httpRequest; function handleButtonPress(e){ clearEventDetails(); httpRequest=new XMLHttpRequest(); httpRequest.onreadystatechange=handleResponse; httpRequest.onerror=handleError; httpRequest.onload=handleLoad; httpRequest.onloadend=handleLoadEnd; httpRequest.onloadstart=handleLoadStart; httpRequest.onprogress=handleProgress; httpRequest.open("GET", e.target.innerHTML+".html"); httpRequest.send(); } function handleResponse(e){ displayEventDetails("readystate("+ httpRequest.readyState +")"); //处理响应 if(httpRequest.readyState==4 && httpRequest.status==200){ document.getElementById("target").innerHTML= httpRequest.responseText; } } function handleError(e){displayEventDetails("error",e);} function handleLoad(e){displayEventDetails("load",e);} function handleLoadEnd(e){displayEventDetails("loadend",e);} function handleLoadStart(e){displayEventDetails("loadstart",e);} function handleProgress(e){displayEventDetails("progress",e);} function clearEventDetails(){ document.getElementById("events").innerHTML="<tr><th>Event</th><th>lengthComputable</th><th>loaded</th><th>total</th></tr>" } function displayEventDetails(eventName,e){ if(e){ document.getElementById("events").innerHTML+="<tr><td>"+eventName+"</td><td>"+ e.lengthComputable+"</td><td>"+ e.loaded+"</td><td>"+ e.total+"</td></tr>"; }else{ document.getElementById("events").innerHTML+="<tr><td>"+eventName+"</td><td>NA</td><td>NA</td><td>NA</td></tr>"; } } </script> </body> </html>Apples.html页面:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Apples</title> </head> <body> <p> <img src="images/apple.png"/> 苹果(Apple),是最常见的水果,[1] 苹果树属于蔷薇科,落叶乔木,叶椭圆形,有锯齿。 其果实球形,味甜,口感爽脆,且富含丰富的营养,是世界四大水果之冠。苹果通常为红色,不过也有黄色和绿色。 苹果是一种低热量食物,每100克只产生60千卡热量。苹果中营养成份可溶性大,易被人体吸收,故有“活水”之称,其有利于溶解硫元素,使皮肤润滑柔嫩. </p> </body> </html>
版权声明:本文为博主原创文章,未经博主允许不得转载。
原文:http://blog.csdn.net/bboyjoe/article/details/47022247