標籤：htm5 前端 網頁設計 javascript
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>
著作權聲明：本文為博主原創文章，未經博主允許不得轉載。
javascript之使用Ajax事件
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
