ajax異步請求
阿新 • • 發佈：2017-10-20
問題 cnblogs 當前 request 成功 攔截 doc 刷新 hang 
摘抄：http://www.cnblogs.com/yuanchenqi/articles/5997456.html
二 什麽是AJAX
AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML）。
- 同步交互：客戶端發出一個請求後，需要等待服務器響應結束後，才能發出第二個請求；
- 異步交互：客戶端發出一個請求後，無需等待服務器響應結束，就可以發出第二個請求。
AJAX除了異步的特點外，還有一個就是：瀏覽器頁面局部刷新；（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> window.onload = function() {//當文檔加載完畢時執行本函數 var form = document.getElementById("form1");//獲取表單元素對象 form.onsubmit = function() {//給表單元素添加一個監聽，監聽表單被提交事件 var usernameValuejs局部刷新= form.username.value;//獲取表單中名為username的表單元素值 if(!usernameValue) {//判斷該值是否為空 var usernameSpan = document.getElementById("usernameSpan");//得到usernmae元素後的<span>元素 usernameSpan.innerText = "用戶名不能為空！";//設置span元素內容！ return false;//返回false，表示攔截了表單提交動作 }return true;//不攔截表單提交動作 }; }; </script> </head> <body> <h1>註冊頁面</h1> <form action="" method="post" id="form1"> 用戶名：<input type="text" name="username"/> <span id="usernameSpan"></span> <br/> 密 碼：<input type="password" name="password"/> <span id="passwordSpan"></span> <br/> <input type="submit" value="註冊"/> </form> </body> </html> js實現的局部刷新
AJAX的優缺點
優點：
- AJAX使用Javascript技術向服務器發送異步請求；
- AJAX無須刷新整個頁面；
- 因為服務器響應內容不再是整個頁面，而是頁面中的局部，所以AJAX性能高；
缺點：
- AJAX並不適合所有場景，很多時候還是要使用同步交互；
- AJAX雖然提高了用戶體驗，但無形中向服務器發送的請求次數增多了，導致服務器壓力增大；
- 因為AJAX是在瀏覽器中使用Javascript技術完成的，所以還需要處理瀏覽器兼容性問題；
AJAX技術
四步操作：
- 創建核心對象；
- 使用核心對象打開與服務器的連接；
- 發送請求
- 註冊監聽，監聽服務器響應。
XMLHTTPRequest
- open(請求方式, URL, 是否異步)
- send(請求體)
- onreadystatechange，指定監聽函數，它會在xmlHttp對象的狀態發生變化時被調用
- readyState，當前xmlHttp對象的狀態，其中4狀態表示服務器響應結束
- status：服務器響應的狀態碼，只有服務器響應結束時才有這個東東，200表示響應成功；
- responseText：獲取服務器的響應體
ajax異步請求