【從0到1學Web前端】javascript中的ajax對象（一）

如今最流行的獲取后端的（瀏覽器從server）數據的方式就是通過Ajax了吧。今天就來具體的來學習下這個知識吧。假設使用ajax來訪問后段的數據，瀏覽器和瀏覽器端的js做了那些工作呢？我做了一個圖，請大家看一下：

1.原生js的Ajax請求的方式

由上面的圖我們大致的知道了ajax訪問后端數據的一個過程。最重要的就是檢測瀏覽器，創建XMLHttpRequest對象的過程：
代碼例如以下：

/*推斷是否支持XMLHttpRequest*/ function createXHR() {if (typeof XMLHttpRequest != "undefined") {return new XMLHttpRequest();}else if (typeof ActiveXobject != "undefined") {if (typeof arguments.callee.activeXString != 'string') {var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len;for (i = 0, len = versions.length; i < len; i++) {try {new ActiveXObject(versions[i]);arguments.callee.activeXString = versions[i];break;}catch (ex) {console.log(ex);}}}return new ActiveXObject(arguments.callee.activeXString());}else {throw new Error('no XHR')} }

此處各自是依據瀏覽器是否支持XMLHttpRequest對象來推斷是否是IE還是非IE，然后來創建響應的對象。

當XHR對象open()的時候。此時并沒有向Webserver發送HTTP請求。而是當send()的時候，XHR對象才向Webserver發送請求。

xhr.send('');

這里有一個非常重要的地方。就是send的參數為null。

send()方法接收一個參數，須要作為請求主體發送的數據。假設不須要作為請求主體發送數據，則必須傳入null，由于這個參數對于某些瀏覽器是必須的。

當瀏覽器接收到Webserver的響應后，會開始填充XHR對象的屬性，基本的例如以下：

• responseText作為響應的主體被返回的文本
• responseXML假設響應的內容類型為text/xml或者application/xml這個屬性中將包括著響應數據的XML DOM文檔
• status響應的HTTP狀態

• statusTextHTTP狀態的說明

  一般通過XHR.status屬性值為200表示成功的標志。

  此時能夠獲取responseText和responseXML的值。當XHR.status==304（響應是有效的）的時候，說明文件沒有被改動，能夠直接使用瀏覽器緩存的版本號。

檢測的代碼例如以下：

if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) {console.log(xhr.responseText);}else {console.log(xhr.responseText);}

不要依賴responseText。由于在跨瀏覽器處理的時候這個屬性獲取的值是不可靠的。

上面的代碼在同步發送請求驗證和獲取返會的數據是沒有不論什么問題的。可是當我們發送異步請求的時候確實會出現故障，由于我們不知道服務端的Response在什么時候反回。那么我們該怎么辦呢？

事實上在ajax在向Webserver發送請求的時候，會有一個readyState屬性來檢測XHR對象的請求/響應過程的當前活動階段，值的列表例如以下：

• 0未初始化。

  尚未調用open()方法

• 1啟動。已經調用open()方法。可是尚未調用send()方法
• 2發送。

  已經調用send()方法。可是還沒有接收到響應。

• 3接收。已經接收到部分的響應數據。

• 4完畢。已經接收到所有的響應數據。并且已經在client能夠使用了。

  每當XHR.readyState的屬性值發生變化，都會觸發一次onreadystatechange事件。通常我們僅僅對XHR.readyState==4的時候感興趣（這時數據已經所有就緒）。

必須在調用open()之前指定onreadystatechange事件處理程序才干夠保證夸瀏覽器的兼容性。

實例代碼例如以下：

var xhr = new createXHR();xhr.onreadystatechange = function () {if (xhr.readyState == 4) {if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) {console.log(xhr.responseText);//console.log(xhr.)//document.createElement()creatNode('script');creatNode('img');}else {console.log(xhr.responseText);}}}xhr.open('GET', 'test.js', true);xhr.send('');

2.jQuery發送Ajax的方式

參考jquery的文檔，使用jquery來發送ajax請求比原生的js簡單非常多。例如以下代碼：

2.1GET方式

$.ajax({type: "GET",url: "test.js",dataType: "script" });

2.2POST方式

$.ajax({type: "POST",url: "some.php",data: "name=John&location=Boston",success: function(msg){alert( "Data Saved: " + msg );} });

這里也僅僅是簡單的實例，假設想要具體的了解jQuery中ajax的使用。能夠參考Jquery的官方文檔。

中文文檔（點擊轉到）
英文文檔（點擊轉到）

posted on 2017-06-11 21:06 mthoutai 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/mthoutai/p/6986368.html

總結

以上是生活随笔為你收集整理的【从0到1学Web前端】javascript中的ajax对象（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。