Javascript:ajax

Yumenokanata 發(fā)布于2019-08-19 18:01 / 2485人閱讀

摘要：而這一技術(shù)的核心便是對象簡稱。一個域名的組成協(xié)議子域名主域名端口號同源策略請求類型請求用于向服務(wù)器查詢某些信息。

XMLHttpRequest

Ajax技術(shù)能向服務(wù)器請求額外的數(shù)據(jù)而無需加載頁面。而這一技術(shù)的核心便是XMLHttpRequest對象(簡稱XHR)。

XMLHttpRequest方法

// 創(chuàng)建xhr對象
var xhr = new XMLHttpRequest();

xhr.open(method,url,async)

接收3個參數(shù):要發(fā)送的請求的類型，請求的URL，表示是否異步發(fā)送請求的布爾值。

URL相對于當前頁面(也可以使用絕對路徑)

調(diào)用open()方法不會真正發(fā)送請求，而只是啟動一個請求以備發(fā)送

// 初始化請求
xhr.open("get",example.php,true)

Note:只能向同一個域(子域名和主域名都得相同)使用相同端口號和協(xié)議的URL發(fā)送請求。如果URL與啟動請求的頁面有任何差別，都會引發(fā)安全錯誤。

// 一個域名的組成

協(xié)議    子域名  主域名     端口號  
http:// www.   abc.com : 8080

同源策略

請求類型

GET請求

用于向服務(wù)器查詢某些信息。

可以將查詢字符串參數(shù)追加到URL末尾，以便將信息發(fā)送給服務(wù)器。對XHR而言，位于傳入open()方法的URL末尾的查詢字符串必須經(jīng)過正確的編碼才行。

Note:查詢字符串中的每個參數(shù)的名稱和值都必須使用encodeURIComponent()進行編碼，然后才放到URL的末尾;而且所有名-值對都必須由和好(&)分隔。

function addURLParam ( url, name, value ) {

    url += url.indexOf("?") === -1 ? "?" : "&";
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value); 

    return url;
}

POST請求

用于向服務(wù)器發(fā)送應(yīng)該被保存的信息。

POST請求應(yīng)該把數(shù)據(jù)作為請求的主體提交。

PUT請求

向服務(wù)器發(fā)送想要更新的信息來替換服務(wù)上舊的信息

DELETE請求

刪除服務(wù)上的信息。

Note:服務(wù)器并不會強迫執(zhí)行它獲得的每一個請求。如果你隨意的瀏覽一個網(wǎng)站，并要求刪除它的主要頁面，很可能會失敗

xhr.send(string)

接收一個參數(shù)，即要作為請求主體發(fā)送的數(shù)據(jù)。如果不需要通過請求主體發(fā)送數(shù)據(jù)，則必須傳入null

xhr.abort()

取消異步請求。

調(diào)用這個方法后，xhr對象會停止觸發(fā)事件

不允許xhr對象訪問任何與響應(yīng)有關(guān)的對象屬性

xhr.setRequestHeader()

設(shè)置自定義的頭部信息。

接收兩個參數(shù):1.頭部字段的名稱和頭部字段的值。
必須在調(diào)用send()方法之前且open()方法之后，調(diào)用此方法。

xhr.open("get", "example.php", true);
xhr.serRequestHeader("MyHeader", "MyValue");
xhr.send(null);

xhr.getResponseHeader()

傳入頭部字段名稱，可以取得相應(yīng)的頭部信息,查詢響應(yīng)中某個字段的值

xhr.getAllResponsHeaders()

可以取得所有頭部信息的長字符串

XMLHttpRequest屬性

/* 發(fā)送同步請求 */

// 創(chuàng)建xhr對象
var xhr = new XMLHttpRequest();

// 初始化請求
xhr.open("get",example.php,false);

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

在收到響應(yīng)后，響應(yīng)的數(shù)據(jù)會自動填充XHR對象的屬性，相關(guān)的屬性簡介如下

與響應(yīng)有關(guān)的xhr屬性

status: 響應(yīng)的HTTP狀態(tài)碼

statusText: HTTP狀態(tài)的說明 // 跨瀏覽器使用不可靠

responseText: 作為響應(yīng)主體被返回的文本,獲得字符串形式的響應(yīng)數(shù)據(jù)

responseXML: 如果響應(yīng)的內(nèi)容為"text/xml"或"application/xml",這個屬性中將保存包含著響應(yīng)數(shù)據(jù)的XML DOM文檔

HTTP狀態(tài)碼

1XX 提示信息 - 表示請求已被成功接收，繼續(xù)處理

2XX 成功 - 表示請求已被成功接收，理解，接受

3XX 重定向 - 要完成請求必須進行更進一步的處理

4XX 客戶端錯誤 - 請求有語法錯誤或請求無法實現(xiàn)

5XX 服務(wù)器端錯誤 - 服務(wù)器未能實現(xiàn)合法的請求

/* 發(fā)送異步請求 */

// 創(chuàng)建xhr對象
var xhr = new XMLHttpRequest();

// 監(jiān)聽請求狀態(tài)
xhr.onreadystatechange = function () {
    if(xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status = 304) {
            alert(xhr.responseText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
}
 
// 初始化請求
xhr.open("get",example.php,true);

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

表示請求響應(yīng)過程的xhr屬性

readyState:

0。未初始化。尚未調(diào)用open()方法

1。服務(wù)器建立連接。已經(jīng)調(diào)用open()方法，但未調(diào)用send()方法

2。請求已接收。調(diào)用send()方法，但未接收到響應(yīng)

3。請求處理中。接收到部分數(shù)據(jù)響應(yīng)

4。請求完成。接收到全部響應(yīng)數(shù)據(jù)，可以在客戶端使用了。

HTTP響應(yīng)與請求體

http—無狀態(tài)協(xié)議

請求過程
1.建立TCP連接
2.Web瀏覽器向服務(wù)器發(fā)送請求命令
3.Web瀏覽器發(fā)送請求頭信息
4.Web服務(wù)器應(yīng)答
5.Web服務(wù)器發(fā)送應(yīng)答頭信息
6.Web服務(wù)器向瀏覽器發(fā)送數(shù)據(jù)
7.Web服務(wù)器關(guān)閉TCP連接

HTTP請求包(瀏覽器信息)

Request包的結(jié)構(gòu), Request包分為3部分

第一部分叫Request line（請求行)
第二部分叫Request header（請求頭）
第三部分是body（主體）。header和body之間有個空行，請求包的例子所示:

GET /domains/example/ HTTP/1.1 //請求行: 請求方法 請求URI HTTP協(xié)議/協(xié)議版本 

Host：www.iana.org //服務(wù)端的主機名 
User-Agent：Mozilla/5.0 (Windows NT 6.1)
AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4 // 瀏覽器信息 
Accept：text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 //客戶端能接收的mine 
Accept-Encoding：gzip,deflate,sdch //是否支持流壓縮
Accept-Charset：UTF-8,*;q=0.5 //客戶端字符編碼集 

//空行,用于分割請求頭和消息體 

//消息體,請求資源參數(shù),例如POST傳遞的參數(shù)

HTTP響應(yīng)包(服務(wù)器信息)

和請求包一樣分為3個部分。

HTTP/1.1 200 OK                            // 狀態(tài)行

Server: nginx/1.0.8                       // 服務(wù)器使用的WEB軟件名及版本
Date:Date: Tue, 30 Oct 2012 04:14:25 GMT // 發(fā)送時間
Content-Type: text/html                 // 服務(wù)器發(fā)送信息的類型
Transfer-Encoding: chunked             // 表示發(fā)送HTTP包是分段發(fā)的
Connection: keep-alive                // 保持連接狀態(tài)
Content-Length: 90                   // 主體內(nèi)容長度

//空行 用來分割消息頭和主體

FormDate
為序列化表單以及創(chuàng)建于表單格式相同的數(shù)據(jù)提供了便利。
var data = new FormData();
data.append("name","Nicholas");

跨資源共享
CORS(Cross-Origin Resource Sharing, 跨資源共享):定義了在必須訪問跨源資源時，瀏覽器與服務(wù)器如何溝通。
基本思想:使用自定義的HTTP頭部讓瀏覽器與服務(wù)器進行溝通，從而決定請求或響應(yīng)是應(yīng)該成功還是應(yīng)該失敗。
IE對CORS的實現(xiàn)

cookie不會隨請求發(fā)送，也不會隨響應(yīng)返回

只能設(shè)置請求頭部信息中的Conte-type字段

不能訪問響應(yīng)頭部信息

只支持GET和POST請求


其他瀏覽器對CORS的實現(xiàn)

不能使用setRequestHeader()設(shè)置自定義頭部

不能發(fā)送和接收cookie

調(diào)用getAllResponseHeaders()方法總會返回空字符串


Comet
一種服務(wù)器向頁面推送數(shù)據(jù)的技術(shù)。
實現(xiàn)方式:

長輪詢

HTTP流


長輪詢
首先輪詢的意思就是,瀏覽器定時向服務(wù)器發(fā)送請求,看有沒有更新的數(shù)據(jù)。
短輪詢(也就是傳統(tǒng)輪詢)：瀏覽器定時向服務(wù)器發(fā)送請求，與服務(wù)器建立
長輪詢:
HTTP流
在頁面的整個周期內(nèi)，只使用一個HTTP連接。
具體來說，就是瀏覽器向服務(wù)器發(fā)送一個請求，而服務(wù)器保持連接打開