js原生實現ajax

標籤：javascript   瀏覽器   工作原理   伺服器   關鍵詞   

今天來總結一下javascript原生實現ajax資料請求。

一：什麼是AJAX；

二：AJAX有什麼優勢；

二：AJAX的工作原理；

三：AJAX的用途；

一：什麼是 AJAX ？

   AJAX = 非同步 JavaScript 和 XML。

   AJAX 是一種用於建立快速動態網頁的技術。

   通過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

   傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。

   關鍵詞：動態載入，頁面無重新整理

二：AJAX應用有什麼優勢？

   1.減少冗餘請求和響應對服務造成的負擔.

    2.無重新整理更新頁面,帶來更好的使用者體驗.

    3.減輕伺服器速寫的負擔，節約空間和寬頻租用成本。

    4.採用非同步提交,讀寫速度更快.

  缺點：

1. 
   

   1. AJAX大量的使用了javascript和ajax引擎,這些取決於瀏覽器的支援.在編寫的時候考慮對瀏覽器的相容性

   2. AJAX只是局部重新整理,所以頁面的後退按鈕是沒有用的.

   3. 對流媒體還有行動裝置的支援不是太好等.

三：AJAX的工作原理

  1.建立XHR對象

        var xh=new XMLHttpRequest();

   在建立xhr對象的時候，會有相容性問題；

   相容寫法：

if (window.ActiveXObject) {  //IE瀏覽器擷取xhr對象寫法        xhr = new ActiveXObject("Microsoft.XMLHTTP");      }      else if (window.XMLHttpRequest) {  //其他瀏覽器擷取xhr對象寫法        xhr = new XMLHttpRequest();      }

  2.XHR請求

xhr.open(method,url,async);//發送xhr請求xhr.send(string);//發送請求內容

open方法：

屬性	描述
open(method,url,async);	規定請求的類型、URL 以及是否非同步處理請求。 method：請求的類型；GET 或 POST url：檔案在伺服器上的位置 async：true（非同步）或 false（同步）
send(string);	將請求發送到伺服器。 string：僅用於 POST 請求

在發送xhr請求的時候，分為GET和POST兩種請求髮式：

GET請求髮式：（百度糯米的搜尋就是使用ajax擷取）

xhr.open("GET", url, true);xhr.open("POST", url, true);

get請求髮式和post請求髮式的區別。

url：後端提供的資料請求地址。

async：是否非同步請求。

send方法：

此方法是在post方法請求的時候使用的；如果是get請求髮式，此方法傳值為null。

傳值形式為索引值對的形式。

注意：在post傳值前，需要一個要求標頭，如下：

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

3.onreadystatechange 事件

屬性	描述
onreadystatechange	儲存函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。
readyState（狀態值）	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。 0: 請求未初始化 1: 伺服器串連已建立 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒
status（狀態代碼）	200: "OK" 404: 未找到頁面 500：背景問題

AJAX狀態值與狀態代碼區別
AJAX狀態值是指，運行AJAX所經曆過的幾種狀態，無論訪問是否成功都將響應的步驟，可以理解成為AJAX運行步驟。如：正在發送，正在響應等，由AJAX對象與伺服器互動時所得；使用“xhr.readyState”獲得。（由數字1~4單位元字組成）

AJAX狀態代碼是指，無論AJAX訪問是否成功，由HTTP協議根據所提交的資訊，伺服器所返回的HTTP頭資訊代碼，該資訊使用“xhr.status”所獲得；

AJAX運行步驟與狀態值說明
在AJAX實際運行當中，對於訪問XMLHttpRequest（XHR）時並不是一次完成的，而是分別經曆了多種狀態後取得的結果，對於這種狀態在AJAX中共有5種，分別是。
0 - (未初始化)還沒有調用send()方法
1 - (載入)已調用send()方法，正在發送請求
2 - (載入完成)send()方法執行完成，
3 - (互動)正在解析響應內容
4 - (完成)響應內容解析完成，可以在用戶端調用了

對於上面的狀態，其中“0”狀態是在定義後自動具有的狀態值，而對於成功訪問的狀態（得到資訊）我們大多數採用“4”進行判斷。

ajax請求代碼：

var Ajax={    get: function (url,fn){         var xhr=new XMLHttpRequest();  // XMLHttpRequest對象用於在後台與伺服器交換資料                  xhr.open(‘GET‘,url,true);         xhr.onreadystatechange=function(){                if (xhr.readyState==4&&xhr.status==200||xhr.status==304){//readyState==4說明請求已完成                    fn.call(this, xhr.responseText);  //從伺服器獲得資料                  }                       };                 xhr.send(null);    },         post: function (url,data,fn){        var xhr = new XMLHttpRequest();        xhr.open("POST", url, true);        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");        xhr.onreadystatechange=function(){              if (xhr.readyState==4&&(xhr.status==200||xhr.status==304)){//304未修改                  fn.call(this, obj.responseText);                              }                   };          xhr.send(data);        }}

本文出自 “簡單做人，認真做事” 部落格，請務必保留此出處http://jaychao.blog.51cto.com/7636789/1871064

js原生實現ajax