數據交互 - Ajax初體驗

2016-10-22　　　　12:22:42

相關概念

AJAX（Asynchronous Javascript And XML）即“非同步JavaScript和XML”；

是指一種實現客戶端和伺服器的數據傳遞的網頁開發技術；

核心：局部刷新，非同步載入；

即“在不需要刷新頁面的情況下，就可以與Web伺服器交換數據，產生局部刷新的效果”。

基礎步驟

　　第一步 ：先創建AJAX對象

 1     /*相容處理*/        
 2     var xhr;  //聲明AJAX對象變數
 3     if(window.XMLHttpRequest){ 
 4         xhr = new XMLHttpRequest();  //標準模式下創建的AJAX對象
 5     }else{ 
 6         xhr = new ActiveXObject("Microsoft.XMLHTTP"); //非標準模式下創建的AJAX對象
 7     }
 8     
 9     /*不考慮相容*/
10　　 var xhr = new XMLHttpRequest();

　　第二步 ：確定發送方式（連接伺服器）

1　　 xhr.open("get", url, true)　　//get請求
2 　　xhr.open("post", url, true)　　//post請求

　　第三步 ：發送請求

1 　　xhr.send(null);

　　第四步：監聽服務端響應的數據

 1 　　/*
 2      同步：不需要監聽事件
 3          readystate  請求狀態
 4          如果請求狀態是4的話：
 5          表示的是http包已經完全接收！
 6          status  完全接收後的狀態碼
 7          如果狀態碼是200
 8          表示的是http包已經完全解析
 9 
10      非同步：需要監聽事件
11      xhr.onreadystatechange = function(){
12          readystate  請求狀態
13          如果請求狀態是4的話：
14          表示的是http包已經完全接收！
15          status  完全接收後的狀態碼
16          如果狀態碼是200
17          表示的是http包已經完全解析
18          responseText 
19          表示服務端給你返回過來的結果
20      }
21     */
22     xhr.onreadystatechange = function(){
23         if(xhr.readyState==4){
24             if(xhr.status==200){
25                 alert(xhr.responseText)
26             }else{
27                 //不是ok  會話失敗
28                 alert(xhr.statusText)
29             }
30         }
31     }

（未完待續~~）