資料互動 - Ajax初體驗

標籤：開發技術   res   發送   post   響應   web服務   方式   返回   var   

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     /*不考慮相容*/11　　 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          如果狀態代碼是20017          表示的是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     }

（未完待續~~）

　　

　　

資料互動 - Ajax初體驗