成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript Ajax與Comet——“跨源資源共享”的注意要點(diǎn)

haobowd / 2148人閱讀

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

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

IE對(duì)CORS的實(shí)現(xiàn)

IE8中引入了XDR( XDomainRequest) 類型, 這個(gè)對(duì)象與XHR類似, 但是能實(shí)現(xiàn)安全可靠的跨域通信。 XDR對(duì)象的安全機(jī)制部分實(shí)現(xiàn)了W3C的CORS規(guī)范。 以下是XDR與XHR的不同之處:
cookie不會(huì)隨請(qǐng)求發(fā)送, 也不會(huì)隨響應(yīng)返回

只能設(shè)置請(qǐng)求頭部信息中的Content - Type字段

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

只支持GET和POST請(qǐng)求

XDR對(duì)象使用方法: 創(chuàng)建一個(gè)實(shí)例, 調(diào)用open方法, 調(diào)用send方法。 open方法只接受兩個(gè)參數(shù): 請(qǐng)求的類型和URL。 所有XDR的請(qǐng)求都是異步的。 請(qǐng)求返回后會(huì)觸發(fā)load事件, 響應(yīng)數(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);

在跨域請(qǐng)求上唯一可以獲得響應(yīng)的信息就是錯(cuò)誤本身, 因此確定響應(yīng)失敗的方式就是使用onerror事件。 要放到open之前使用。

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

在請(qǐng)求返回之前, 可以調(diào)用取消命令abort() 方法:

xdr.abort(); //終止請(qǐng)求

與XHR一樣, XDR對(duì)象也支持timeout屬性以及ontimeout事件處理程序。

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

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

xdr.contentType = "application/x-www-form-urlencoded";
其他瀏覽器對(duì)CORS的實(shí)現(xiàn)

使用標(biāo)準(zhǔn)的XHR對(duì)象并在open()方法中傳入絕對(duì)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對(duì)象實(shí)現(xiàn)了對(duì)CORS的原生支持。但是在跨域請(qǐng)求的時(shí)候有以下的限制:

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

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

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

無論是同源請(qǐng)求還是跨域請(qǐng)求,對(duì)于本地資源最好使用相對(duì)URL,在訪問遠(yuǎn)程資源時(shí)再使用絕對(duì)URL。

Preflighted?。襡quests

透明服務(wù)器驗(yàn)證機(jī)制,支持開發(fā)人員使用自定義的頭部,get和post之外的方法,以及不同類型的主題內(nèi)容。這種請(qǐng)求使用OPTIONS方法,發(fā)送下列頭部:

Origin:與簡單的請(qǐng)求相同

Access-Control-Request-Method:請(qǐng)求自身使用的方法

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

發(fā)送請(qǐng)求之后,服務(wù)器決定是否允許這種類型的請(qǐng)求。服務(wù)器通過響應(yīng)發(fā)送如下的頭部與瀏覽器進(jìn)行溝通:

Access-Control-Allow-Origin:與簡單的請(qǐng)求相同

Access-Control-Allow-Methods:允許的方法,多個(gè)方法以逗號(hào)分隔

Access-Control-Allow-Headers:允許的頭部,多個(gè)頭部以逗號(hào)分隔

Access-Control-Max-Age:應(yīng)該將這個(gè)Preflight請(qǐng)求緩存多長時(shí)間(以秒表示)

帶憑據(jù)的請(qǐng)求

通過將withCredentials屬性設(shè)置為true,可以指定特定的請(qǐng)求應(yīng)該發(fā)送憑據(jù)。如果服務(wù)器接收帶憑據(jù)的請(qǐng)求,會(huì)用下面的HTTP頭部響應(yīng)

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();

}

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/78761.html

相關(guān)文章

  • JavaScript AjaxComet——“進(jìn)度事件”注意要點(diǎn)

    摘要:有以下個(gè)進(jìn)度事件在接收到響應(yīng)數(shù)據(jù)的第一個(gè)字節(jié)時(shí)觸發(fā)。在接收響應(yīng)數(shù)據(jù)期間持續(xù)的觸發(fā)在請(qǐng)求發(fā)生錯(cuò)誤時(shí)觸發(fā)在因調(diào)用方法而終止連接時(shí)觸發(fā)在接收到完整的響應(yīng)數(shù)據(jù)時(shí)觸發(fā)在通信完成或者觸發(fā),,事件后觸發(fā)。 有以下6個(gè)進(jìn)度事件: loadstart: 在接收到響應(yīng)數(shù)據(jù)的第一個(gè)字節(jié)時(shí)觸發(fā)。 progress: 在接收響應(yīng)數(shù)據(jù)期間持續(xù)的觸發(fā) error: 在請(qǐng)求發(fā)生錯(cuò)誤時(shí)觸發(fā) abort: 在因調(diào)用ab...

    ad6623 評(píng)論0 收藏0
  • JavaScript AjaxComet——“XMLHttpRequest2級(jí)”注意要點(diǎn)

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

    melody_lql 評(píng)論0 收藏0
  • JavaScript AjaxComet——“其他跨域技術(shù)”注意要點(diǎn)

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

    Hwg 評(píng)論0 收藏0
  • JavaScript AjaxComet——“XMLHttpRequest對(duì)象”注意要點(diǎn)

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

    Martin91 評(píng)論0 收藏0
  • 高程3總結(jié)#第21章AjaxComet

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

    MudOnTire 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<