愛不釋手的Ajax

Flink_China 發布于2019-08-21 11:47 / 2473人閱讀

摘要：簡而言之，可以讓向服務器提出請求并處理響應，而不阻塞用戶。請求在處理中通常響應中已有部分數據可用了，但是服務器還沒有完成響應的生成。響應已完成已經接收到全部響應數據，而且已經可以在客戶端使用了。

什么是Ajax？為什么要使用它？

Ajax全稱 Asynchronous(異步) JavaScript and XML，終結了“單擊，等待”的交互模式，它是指一種創建交互式網頁應用的網頁開發技術，Ajax并不是一種技術，它是一系列規范的集合，包含：

基于web標準（standards-basedpresentation）XHTML+CSS的表示；

使用 DOM（Document ObjectModel）進行動態顯示及交互；

使用 XML 和 XSLT 進行數據交換及相關操作；

使用 XMLHttpRequest 進行異步數據查詢、檢索；

使用 JavaScript 將所有的東西綁定在一起。

Ajax應用程序的優勢在于：

通過異步模式，提升了用戶體驗

優化了瀏覽器和服務器之間的傳輸，減少不必要的數據往返，減少了帶寬占用

Ajax引擎在客戶端運行，承擔了一部分本來由服務器承擔的工作，從而減少了大用戶量下的服務器負載。

基礎-HTTP協議

在使用Ajax之前，必須先了解客戶端和服務器間通信的基礎是怎樣的，在這里，他們使用的規則是HTTP協議，兩者之間通過一定格式的報文（請求報文和響應報文）進行交流，詳細的看這篇文章。鏈接：http://www.jianshu.com/p/8163...

核心-XMLHttpRequest對象

支撐起Ajax大橋的便是XHR這個對象了，它是一種支持異步請求的技術。簡而言之，XmlHttpRequest可以讓JavaScript向服務器提出請求并處理響應，而不阻塞用戶。通過XMLHttpRequest對象，Web開發人員可以在頁面加載以后進行頁面的局部更新。
在使用它之前，我們先來了解一下XHR對象，簡單起見。關于不同瀏覽器之間的XHR對象暫時不敘述，直接使用原生XHR對象，在瀏覽器里面創建一個新的XHR對象var xhr = new XMLHttpRequest();，在調試窗口里面輸出它可以看到：

它是一個對象，擁有一些屬性，常見的如下：

readyState：該屬性表示請求/響應過程的當前活動階段，可用取值如下：

0：請求未初始化（還沒有調用?open()）。
1：請求已經建立，但是還沒有發送（還沒有調用?send()）。
2：請求已發送，正在處理中（通常現在可以從響應中獲取內容頭）。
3：請求在處理中；通常響應中已有部分數據可用了，但是服務器還沒有完成響應的生成。
4：響應已完成；已經接收到全部響應數據，而且已經可以在客戶端使用了。

只要readyState屬性的值發生變化，便可以觸發readystatechange事件，下面來體驗一下。

//演示readystatechange事件
var log = function(tmp){
    console.log(tmp);
};
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    log(xhr.readyState);
};
xhr.open("get","./content.txt",true);
xhr.send(null);

觀察運行結果，可以很明確地看到狀態的發生改變。

responseText：作為響應主體被返回的文本，無論內容類型是什么，響應主體的內容都會保存在這里。

responseXML：如果響應的內容類型是text/xml或application/xml，這個屬性中將保存著響應數據的XML DOM文檔。

status：響應的HTTP狀態，就是HTTP的狀態代碼，200,304（表示請求的資源沒有被修改，可以直接使用瀏覽器中緩存的版本）這些，確保接收到適當的響應。

statusText：HTTP狀態的說明

基礎用法

var xhr = new XMLHttpRequest();
//創建一個XHR對象
xhr.open("get","test.txt",true);
//啟動一個請求以備發送，這個時候xhr的readyState為1
xhr.send(null);
//正式發送請求，readyState為2，隨后請求成功，readyState為4

我們來詳細說一下細節。

首先是open方法：
第一個參數是HTTP的請求方式，常用的比如get和post，第二個參數是請求的url，如果是get方式的話那么一般請求的參數就附加在這里。第三個參數是控制同步或者異步，true表示異步，false表示同步。簡單來說，如果使用同步的話，那么會阻塞后面的代碼，必須等到本次請求完畢才可以，異步則是另開一個線程去執行ajax，下面代碼繼續進行。

再說send方法：
send方法有一個參數，這個參數將被寫入到請求報文里面傳遞，上面說到了get方式的參數是直接寫到url里面的，所以對于這種方法，send的參數應該為null，而對于post方式，url和請求參數是分離的，所以需要寫入到send方法里。

HTTP頭部信息

我們可以使用已有的API來對上面創建的請求報文進行增添或對響應報文進行處理，比如設置Cookie。

xhr.setRequestHeader("imake","myValue");//添加頭部信息
xhr.getResponseHeader(headerName);//獲取頭部信息
xhr.getAllResponseHeaders();//獲取全部頭部信息

GET請求

GET方法將需要查詢的字符串追加到URL的末尾，也就是在XHR的open方法的URL末尾進行添加，需要進行encodeURIComponent()處理，對此封裝函數如下：

function addURLParam(url,name,value){
    url+=(url.indexOf("?") == -1 ? "?" : "&");
    url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
}
xhr.open("get",url,true);

POST請求

討論POST之前，我們先回想一下，POST主要用在表單提交，表單提交的寫法很多，比如：



我用來提交表單

var sub = document.getElementById("submit");
sub.addEventListener("click",function(){
    document.getElementById("test").submit();
});

前兩種方式在使用的時候非常不便，比如我們再檢測它們點擊之前需要進行表單驗證，那么因為它們自身具有默認的提交功能，所以我們得把它們的默認功能阻止一下，所以使用第三種比較舒服。
在表單進行post時，背地里它將請求的Content-Type設置為了application/x-www-form-urlencoded（這種類型是上傳不了文件的，先挖個坑），并且把表單序列化了。我們來演示一下：

明白了傳統的post表單提交之后，我們來說說Ajax，其實它也是模仿表單提交，所以要主動地告訴服務器，我是post方式，比較復雜，你做好準備，所以要設置Content-Type頭部信息為application/x-www-form-urlencoded，其次是對表單進行序列化，我們可以使用jQuery里面的serialize()方法，測試如下：

GPU云服務器云服務器 ajax的理解 ajax的異步請求一個有趣的Ajax ajax的post請求

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87103.html

Promise & Generator——幸福地用同步方法寫異步JavaScript

摘要：在這里看尤雨溪大神的這篇小短文，非常精簡扼要地介紹了當前常用的。根據尤雨溪大神的說法，的也只是的語法糖而已。對象有三種狀態，，。對象通過和方法來規定異步結束之后的操作正確處理函數錯誤處理函數。方便進行后續的成功處理或者錯誤處理。最近在寫一個自己的網站的時候（可以觀摩一下~Colors），在無意識中用callback寫了一段嵌套了5重回調函數的可怕的代碼。回過神來的時候被自己嚇了一跳，...

Harpsichord1207 2019-08-22 10:41 評論0 收藏0
前端學習資源

摘要：掘金日報第四期使用怎么能不知道這些插件合集掘金日報主打分享優質深度技術內容，技術內容分前端后端產品設計工具資源和一些有趣的東西。目前已經涵蓋了的相關資源鏈接，供大家參考與學習。【掘金日報】第四期使用Sublime？怎么能不知道這些 Sublime 插件合集！掘金日報主打分享優質深度技術內容，技術內容分：前端、后端、Android、iOS、產品設計、工具資源和一些有趣的東西。前端...

xzavier 2019-08-30 13:57 評論0 收藏0
前端學習資源

摘要：掘金日報第四期使用怎么能不知道這些插件合集掘金日報主打分享優質深度技術內容，技術內容分前端后端產品設計工具資源和一些有趣的東西。目前已經涵蓋了的相關資源鏈接，供大家參考與學習。【掘金日報】第四期使用Sublime？怎么能不知道這些 Sublime 插件合集！掘金日報主打分享優質深度技術內容，技術內容分：前端、后端、Android、iOS、產品設計、工具資源和一些有趣的東西。前端...

weij 2019-08-26 11:43 評論0 收藏0
Java中那些讓你愛不釋手工具庫，精煉代碼量

摘要：使用是為了更高效的性能。注意將數組轉集合不能進行和操作。的內部類和都是繼承，等方法中是默認而且不作任何操作。重新了這些方法而的內部類沒有重新，所以會拋出異常。八玩轉工具包是什么顧名思義，和的區別就是可以保存多個相同的對象。 Java中那些讓你愛不釋手工具庫，精煉代碼量一、JDK1.8 Stream新特性1、St...

番茄西紅柿 2021-11-22 14:45 評論0 收藏2637