Ajax技術剖析

標籤：頁面   end   selector   asc   http   ons   var   代碼產生   select   

　　Ajax的全稱是Asynchronous JavaScript and XML，是JS的特有功能，它作用是非同步JS資料互動，即在不進行頁面重新整理的情況下進行部分資料的擷取，效能較高。值得注意的是，僅有Ajax是不能夠實現跨域的操作，如果和JSONP或者WebSocket配合可以實現。

　　Ajax工作方式：

　　

1.Ajax成員屬性

　　(1)responseText　　後台返回資料存放的位置，傳回值為字串型

　　(2)readyState　　　系統記錄執行的步驟，共有5個值：0 尚未初始化

　　　　　　　　　　　　　　　　　　　　　　　　　　  1 服務串連已建立(open)

　　　　　　　　　　　　　　　　　　　　　　　　　　  2 請求已接收(send)

　　　　　　　　　　　　　　　　　　　　　　　　　　  3 請求處理中

　　　　　　　　　　　　　　　　　　　　　　　　　　  4 請求完成

　　(3)responseXML　   傳回型別是XML類型，90%使用JSON方式

　　(4)status　　　　　 伺服器返回的http響應值，常用如下：

• • 200 請求成功
  • 400 錯誤請求
  • 500 內部伺服器錯誤

2.Ajax成員方法

　　(1)open(method,url)　　開啟檔案，method為兩種：POST/GET

　　(2)send(body)　　確認發送請求

　　(3)setRequestHeader(name,value)　　佈建要求頭部

　　　　使用方式：xhr.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);

　　　　form的enctype屬性為編碼方式，常用有兩種：application/x-www-form-urlencoded和multipart/form-data

3.Ajax監聽事件

　　onreadystatechange　　狀態變化事件控制對象，注意這個事件名全部是小寫而非駝峰式命名，不過平時會有代碼產生協助我們

4.Ajax實現四步驟

　　Ajax有一句常用的話，1個事件(onreadystatechange)、2個屬性(responseText和readyState)、3個方法(open/send/setRequestHeader)，在使用Ajax的時候經常會用到對應的內容。

　　(1)var xhr = new XMLHttpRequest();//建立XMLHttpRequest對象

　　(2)xhr.onreadystatechange=function(){

　　　　console.log(xhr.readyState);

　　　　console.log(xhr.responseText);

　　    }//xhr對象改變時自動調用此函數

　　(3)xhr.open(‘GET‘,‘data.txt‘);//從data.txt中擷取內容

　　(4)xhr.send(null);//發送請求

5.Ajax請求

　　(1)GET　　此方式負責從後台擷取資料，常用於驗證使用者

　　　　　　　 GET的要求標頭部一般可以不寫，預設為xhr.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’)

　　(2)POST　 此方式向後台發送表單資料，如密碼

　　　　　　     POST的要求標頭部需要分情況而定，當表單method="post"時，如果沒有type="file"控制項，使用application/x-www-form-urlencoded，反之，使用multipart/form-data

6.代碼範例

　　在使用之前，需要先建立一個data.txt的文檔。

 1 <script> 2     var box = document.querySelector(‘div’); 3     var btn = document.querySelector(‘button’); 4     btn.onclick = function(){ 5         var xhr = new XMLHttpRequest(); 6         xhr.onreadystatechange = function(){ 7             box.innerHTML = xhr.responseText; 8         } 9     xhr.open(‘GET’,’data.txt’);10     xhr.send(null);11     }12 </script>

Ajax技術剖析