JavaScript Ajax與Comet——“跨源資源共享”的注意要點

haobowd 發(fā)布于2019-08-19 17:40 / 2175人閱讀

摘要：注意請求和響應都不包含信息。對象的安全機制部分實現(xiàn)了的規(guī)范。請求返回后會觸發(fā)事件，響應數(shù)據(jù)保存在屬性中。無論是同源請求還是跨域請求，對于本地資源最好使用相對，在訪問遠程資源時再使用絕對。發(fā)送請求之后，服務器決定是否允許這種類型的請求。

通過XHR實現(xiàn)Ajax通信的一個主要限制，來源于跨域安全策略。在默認情況下，Ajax只能訪問與包含它的頁面位于同一個域中的資源。但是有時也需要一些跨域的請求。為了解決這個問題，現(xiàn)在的瀏覽器采用CORS（Cross-Origin Resource Sharing,跨域資源共享）策略來實現(xiàn)。CORS是W3C的一個工作草案，定義了必須訪問跨源資源時瀏覽器與服務器之間如何進行溝通。這個策略的基本思想是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應的成功和失敗。注意請求和響應都不包含cookie信息。

IE對CORS的實現(xiàn)

IE8中引入了XDR（ XDomainRequest）類型，這個對象與XHR類似，但是能實現(xiàn)安全可靠的跨域通信。 XDR對象的安全機制部分實現(xiàn)了W3C的CORS規(guī)范。以下是XDR與XHR的不同之處：
cookie不會隨請求發(fā)送，也不會隨響應返回

只能設置請求頭部信息中的Content - Type字段

不能訪問響應頭部信息

只支持GET和POST請求

XDR對象使用方法：創(chuàng)建一個實例，調用open方法，調用send方法。 open方法只接受兩個參數(shù)：請求的類型和URL。所有XDR的請求都是異步的。請求返回后會觸發(fā)load事件，響應數(shù)據(jù)保存在responseText屬性中。

var xdr = new XDomainRequest();
xdr.onload = function() {
    alert(xdr.responseText);
};
xdr.open("get", "http://www.somewhere-else.com/page/");
xdr.send(null);

在跨域請求上唯一可以獲得響應的信息就是錯誤本身，因此確定響應失敗的方式就是使用onerror事件。要放到open之前使用。

xdr.onerror = function() {
    alert("an error occurred!");
}

在請求返回之前，可以調用取消命令abort（）方法：

xdr.abort(); //終止請求

與XHR一樣， XDR對象也支持timeout屬性以及ontimeout事件處理程序。

xdr.timeout = 1000;
xdr.ontimeout = function() {
    alert("late!")
}

將這些處理程序添加到open之前才可以哦。
為了支持post請求， XDR對象提供了contentType屬性，用來表示發(fā)送數(shù)據(jù)的格式：在open之后， send之前設置

xdr.contentType = "application/x-www-form-urlencoded";

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

使用標準的XHR對象并在open()方法中傳入絕對URL即可：

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        document.getElementById("content").innerHTML = xhr.responseText;
    } else {
        console.log("error");
    }
};
xhr.open("get", "http://www.somewhere-else.com/page/", true);
xhr.send();

其他的瀏覽器都通過XMLHttpRequest對象實現(xiàn)了對CORS的原生支持。但是在跨域請求的時候有以下的限制：

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

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

調用getAllResponseHeaders()方法總會返回空字符串。

無論是同源請求還是跨域請求，對于本地資源最好使用相對URL，在訪問遠程資源時再使用絕對URL。

Preflighted　Ｒequests

透明服務器驗證機制，支持開發(fā)人員使用自定義的頭部，get和post之外的方法，以及不同類型的主題內容。這種請求使用OPTIONS方法，發(fā)送下列頭部：

Origin：與簡單的請求相同

Access-Control-Request-Method:請求自身使用的方法

Access-Control-Request-Headers:(可選)自定義頭部信息，多喝頭部逗號分隔。

發(fā)送請求之后，服務器決定是否允許這種類型的請求。服務器通過響應發(fā)送如下的頭部與瀏覽器進行溝通：

Access-Control-Allow-Origin:與簡單的請求相同

Access-Control-Allow-Methods:允許的方法，多個方法以逗號分隔

Access-Control-Allow-Headers:允許的頭部，多個頭部以逗號分隔

Access-Control-Max-Age:應該將這個Preflight請求緩存多長時間（以秒表示）

帶憑據(jù)的請求

通過將withCredentials屬性設置為true，可以指定特定的請求應該發(fā)送憑據(jù)。如果服務器接收帶憑據(jù)的請求，會用下面的HTTP頭部響應

Access-Control-Allow-Credentials:true

跨瀏覽器的CORS

function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined") {
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}
var request = createCORSRequest("get", "http://somewhere-else.com/page/");
if (request) {
    request.onload = function() {
        //request.responseText
    };
    request.send();

}

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/78761.html

JavaScript Ajax與Comet——“進度事件”的注意要點

摘要：有以下個進度事件在接收到響應數(shù)據(jù)的第一個字節(jié)時觸發(fā)。在接收響應數(shù)據(jù)期間持續(xù)的觸發(fā)在請求發(fā)生錯誤時觸發(fā)在因調用方法而終止連接時觸發(fā)在接收到完整的響應數(shù)據(jù)時觸發(fā)在通信完成或者觸發(fā)，，事件后觸發(fā)。有以下6個進度事件： loadstart: 在接收到響應數(shù)據(jù)的第一個字節(jié)時觸發(fā)。 progress: 在接收響應數(shù)據(jù)期間持續(xù)的觸發(fā) error: 在請求發(fā)生錯誤時觸發(fā) abort: 在因調用ab...

ad6623 2019-08-19 17:40 評論0 收藏0
JavaScript Ajax與Comet——“XMLHttpRequest2級”的注意要點

摘要：并非所有的瀏覽器都完整的實現(xiàn)了級的規(guī)范，但是所有的瀏覽器都實現(xiàn)了它部分的規(guī)范。超時設定唯一支持的超時設定事件，對象的事件。方法用于重寫響應的類型。它能強迫服務器返回的數(shù)據(jù)類型給些為本方法提供的類型。并非所有的瀏覽器都完整的實現(xiàn)了XMLHttpRequest 2 級的規(guī)范，但是所有的瀏覽器都實現(xiàn)了它部分的規(guī)范。 FormData FormData類型 append()向其添加數(shù)據(jù)，...

melody_lql 2019-08-21 13:29 評論0 收藏0
JavaScript Ajax與Comet——“其他跨域技術”的注意要點

摘要：由兩部分組成回調函數(shù)和數(shù)據(jù)?；卣{函數(shù)是當響應到來時應該在頁面中調用的函數(shù)，回調函數(shù)的名字一般是在請求中指定的。下面是以個的例子回調函數(shù)的名字就是是通過動態(tài)的元素來使用的，使用時可以為屬性指定一個跨域。是為與其他傳遞消息的很相似。圖像Ping技術根據(jù)一個網頁可以從任何網頁中加載圖像而不用擔心使用跨域的原理，我們可以動態(tài)的創(chuàng)建圖像，使用他們的onload和onerror事件處理程序...

Hwg 2019-08-19 17:40 評論0 收藏0
JavaScript Ajax與Comet——“XMLHttpRequest對象”的注意要點

摘要：在中，對象是通過庫中的對象實現(xiàn)的。可以檢測對象的屬性，該屬性表示請求響應過程的當前活動階段。已經調用但尚未接收到響應接收。由于內存原因，不建議重用對象。頭部信息對象提供了操作請求頭部和響應頭部信息的方法。建議使用自定義的頭部名稱。在IE5中，XHR對象是通過MSXML庫中的ActiveX對象實現(xiàn)的。在IE中可能會遇到三種不同版本的XHR對象，即MSXML2.XMLHttp、MSXML...

Martin91 2019-08-19 17:39 評論0 收藏0
高程3總結#第21章Ajax與Comet

摘要：頁面發(fā)起一個到服務器的請求，然后服務器一直保持連接打開，直到有數(shù)據(jù)可發(fā)送。 Ajax與Comet XMLHttpRequest對象 IE5是第一款引入XHR對象的瀏覽器，在IE5中，XHR對象是通過MSXML庫中的一個ActiveX對象實現(xiàn)的 //適用于 IE7 之前的版本 function createXHR(){ if (typeof arguments.callee.acti...

MudOnTire 2019-08-23 12:12 評論0 收藏0