主頁(yè) > 知識(shí)庫(kù) > AJAX javascript的跨域訪問執(zhí)行

AJAX javascript的跨域訪問執(zhí)行

熱門標(biāo)簽:海南銀行智能外呼系統(tǒng)商家 遼寧正規(guī)電銷機(jī)器人 遼寧銀行智能外呼系統(tǒng) 辰溪地圖標(biāo)注 許昌智能電銷機(jī)器人公司 上海浦東騰訊地圖標(biāo)注位置 電銷機(jī)器人違法了嗎 澳大利亞城市地圖標(biāo)注 姜堰電銷機(jī)器人
javascript0.jpg
突然感覺就是這里的問題,研究一下,搞定后其實(shí)覺得挺容易的,只是自己知識(shí)還是有些欠缺,解決方法如下:

阻塞的AJAX請(qǐng)求

  我們先來(lái)證實(shí)一下請(qǐng)求的阻塞情況吧。我們使用如下的代碼:

 連續(xù)發(fā)起三個(gè)請(qǐng)求 
復(fù)制代碼 代碼如下:

function simpleRequest() 

   var request = new XMLHttpRequest(); 
    request.open(”POST“, “Script.ashx“); 
    request.send(null); 
}
function threeRequests() 

    simpleRequest(); 
    simpleRequest(); 
    simpleRequest(); 


   當(dāng)執(zhí)行threeRequests時(shí)就會(huì)連續(xù)發(fā)出3個(gè)相同域名的請(qǐng)求,還是通過統(tǒng)計(jì)圖表來(lái)查看阻塞的效果:
script1.jpg
最后的請(qǐng)求被前兩個(gè)請(qǐng)求阻塞 

  每個(gè)請(qǐng)求需要花費(fèi)1.5秒的時(shí)間。很明顯,第三個(gè)請(qǐng)求必須等到第一個(gè)請(qǐng)求結(jié)束之后才能執(zhí)行,因此總共需要進(jìn)行3秒多鐘才能執(zhí)行完畢。我們要改變的就是這個(gè)狀況。 

傳統(tǒng)的跨域名異步請(qǐng)求解決方案
  AJAX安全性的唯一保證,似乎就是對(duì)于跨域名(Cross-Domain)AJAX請(qǐng)求 的限制。除非打開本地硬盤的網(wǎng)頁(yè),或者在IE中將跨域名傳輸數(shù)據(jù)的限制打開,否則向其他域名發(fā)出AJAX請(qǐng)求都會(huì)被禁止。而且對(duì)于跨域名的判斷非常嚴(yán)格, 不同的子域名,或者相同域名的不同端口,都會(huì)被認(rèn)作是不同的域名,我們不能向它們的資源發(fā)出AJAX請(qǐng)求。

  從表面上看起來(lái)似乎沒有辦法打破這個(gè)限制,還好我們有個(gè)救星,那就是iframe!

  iframe雖然不在標(biāo)準(zhǔn)中出現(xiàn),但是由于它實(shí)在有用,F(xiàn)ireFox也“不得不”對(duì)它進(jìn) 行了支持(類似的還有innerHTML)。網(wǎng)上已經(jīng)有一些跨域名發(fā)出異步請(qǐng)求的做法,但是它們實(shí)在做的不好。它們的簡(jiǎn)單工作原理如下:在另一個(gè)域名下放 置一個(gè)特定的頁(yè)面文件作為Proxy,主頁(yè)面將異步請(qǐng)求的信息通過Query String傳遞入iframe里的Proxy頁(yè)面,Proxy頁(yè)面在AJAX請(qǐng)求執(zhí)行完畢后將結(jié)果放在自己location的hash中,而主頁(yè)面會(huì)對(duì) iframe的src的hash值進(jìn)行輪詢,一旦發(fā)現(xiàn)它出現(xiàn)了改變,則通過hash值得到需要的信息。

  這個(gè)方法的實(shí)現(xiàn)比較復(fù)雜,而且功能有限。在 IE和FireFox中,對(duì)于URL的長(zhǎng)度大約可以支持2000個(gè)左右的字符。對(duì)于普通的需求它可能已經(jīng)足夠了,可惜如果真要傳遞大量的數(shù)據(jù),這就遠(yuǎn)遠(yuǎn)不 夠了。與我們一會(huì)兒要提出的解決方案相比,可能它唯一的優(yōu)勢(shì)就是能夠跨任意域名進(jìn)行異步請(qǐng)求,而我們的解決方案只能突破子域名的限制。

  那么現(xiàn)在來(lái)看看我們的做法!

 

優(yōu)雅地突破子域名的限制

  我們突破子域名限制的關(guān)鍵還是在于iframe。

  iframe是的好東西,我們能夠跨過子域名來(lái)訪問iframe里的頁(yè)面對(duì)象,例如 window和DOM結(jié)構(gòu),包括調(diào)用JavaScript(通過window對(duì)象)——我們將內(nèi)外頁(yè)面的 document.domain設(shè)為相同就可以了。然后在不同子域名的頁(yè)面發(fā)起不同的請(qǐng)求,把結(jié)果通過JavaScript進(jìn)行傳遞即可。唯一需要的也僅 僅是一個(gè)簡(jiǎn)單的靜態(tài)頁(yè)面作為Proxy而已。

  我們現(xiàn)在就來(lái)開始編寫一個(gè)原形,雖然簡(jiǎn)單,但是可以說明問題。

  首先,我們先來(lái)編寫一個(gè)靜態(tài)頁(yè)面,作為放在iframe里的Proxy,如下:

SubDomainProxy.html 
復(fù)制代碼 代碼如下:

html xmlns=“http://www.w3.org/1999/xhtml” > 
head> 
    title>Untitled Page/title> 
    script type=“text/javascript” language=“javascript”> 
        document.domain = “test.com“;        function sendRequest(method, url) 
        { 
            var request = new XMLHttpRequest(); 
            request.open(method, url); 
            request.send(null); 
        } 
    /script> 
/head> 
body> 
/body> 
/html> 


 

  然后我們?cè)倬帉懳覀兊闹黜?yè)面:


http://www.test.com/Default.html 

復(fù)制代碼 代碼如下:

html xmlns=“http://www.w3.org/1999/xhtml” > 
head runat=“server”>  
    title>Untitled Page/title>  
    script type=“text/javascript” language=“javascript”>  
        document.domain = “test.com“;        function simpleRequest()  
        {  
            var request = new XMLHttpRequest();  
            request.open(”POST“, “Script.ashx“);  
            request.send(null);  
        } 
function crossSubDomainRequest()  
        {  
            var proxy = document.getElementById(”iframeProxy“).contentWindow;  
            proxy.sendRequest('POST', ‘http://sub0.test.com/Script.ashx‘);  
        } 
function threeRequests()  
        {  
            simpleRequest();  
            simpleRequest();  
            crossSubDomainRequest();  
        }  
    /script> 
/head> 
body>  
    input type=“button” value=“Request” onclick=“threeRequests()” />  
    iframe src=“http://sub0.test.com/SubDomainProxy.html” style=“display:none;”  
        id=“iframeProxy”>/iframe> 
/body> 
/html> 
   當(dāng)執(zhí)行threeRequests方法時(shí),將會(huì)同時(shí)請(qǐng)求http://www.test.com以及http://sub0.test.com兩個(gè)不同域名下的資源。很明顯,最后一個(gè)請(qǐng)求已經(jīng)不會(huì)受到前兩個(gè)請(qǐng)求的阻塞了:
script2.jpg
不同域名的請(qǐng)求不會(huì)被阻塞

  令人滿意的結(jié)果!

  雖說只能突破子域名,但是這已經(jīng)足夠了,不是嗎?我們?yōu)槭裁匆獜?qiáng)求任意域名之間能夠異步通 訊呢?更何況我們的解決方案是多么的優(yōu)雅!在下一篇文章中,我們將會(huì)為ASP.NET AJAX客戶端實(shí)現(xiàn)一個(gè)完整的CrossSubDomainRequestExecutor,它會(huì)自動(dòng)判斷是否正在發(fā)出跨子域名的請(qǐng)求,并選擇AJAX請(qǐng) 求的方式。這樣,客戶端的異步通訊層就會(huì)對(duì)開發(fā)人員完全透明。世上還會(huì)有比這更令人愉快的事情嗎?:)

 注意事項(xiàng)

  可能以下幾點(diǎn)值得一提:

我在出現(xiàn)這個(gè)想法之后也作了一些嘗試,最后發(fā)現(xiàn)創(chuàng)建XMLHttpRequest對(duì)象,調(diào)用open方法和send方法都必須在iframe中的頁(yè)面中執(zhí)行才能夠在IE和FireFox中成功發(fā)送AJAX請(qǐng)求。

在上面的例子中,我們向子域名請(qǐng)求的的路徑是http://sub0.test.com/Script.ashx。請(qǐng)注意,完整的子域名不可以省略,否則在FireFox下就會(huì)出現(xiàn)權(quán)限不夠的錯(cuò)誤,在調(diào)用open方法時(shí)就會(huì)拋出異常——似乎FireFox把它當(dāng)作了父頁(yè)面域名的資源了。
因?yàn)闉g覽器的安全策略,瀏覽器不允許不同域(比如:phinest.org和lab.phinest.org)、不同協(xié)議(比如: http://phinest.org和https://phinest.org)、不同端口(比如:http: phinest.org和http://phinest.org:8080)下的頁(yè)面通過XMLHTTPRequest相互訪問,這個(gè)問題同樣影響著不同頁(yè)面的Javascript的相互調(diào)用和控制,但是當(dāng)主域、協(xié)議、端口相同時(shí),通過設(shè)置頁(yè)面的document.domain主域, Javascript可以在不同的子域名間訪問控制,比如通過設(shè)置document.domain='phinest.org',http: //phinest.org和http://lab.phinest.org頁(yè)面可互訪,這個(gè)特性也提供了此情況下不同子域名下的 XMLHTTPRequest相互訪問的解決方案。

對(duì)于主域、協(xié)議、端口相同時(shí)的Ajax跨域問題,很早就有設(shè)置document.domain來(lái)解決的說法,但一直沒有看到具體的成功應(yīng)用,這次嘗試了一下,其原理就是,利用一個(gè)隱藏的iframe引入所跨另一子域的頁(yè)面作為代理,通過Javascript來(lái)控制iframe引入的另一子域的 XMLHTTPRequest來(lái)進(jìn)行數(shù)據(jù)獲取。對(duì)于不同主域/不同協(xié)議/不同端口下的Ajax訪問需要通過后臺(tái)的代理來(lái)實(shí)現(xiàn)。

您可能感興趣的文章:
  • 利用nginx解決cookie跨域訪問的方法
  • 用jQuery與JSONP輕松解決跨域訪問的問題
  • jQuery 跨域訪問問題解決方法
  • Ajax實(shí)現(xiàn)跨域訪問的三種方法
  • Javascript 跨域訪問解決方案
  • js iframe跨域訪問(同主域/非同主域)分別深入介紹
  • Ajax 設(shè)置Access-Control-Allow-Origin實(shí)現(xiàn)跨域訪問
  • jquery下利用jsonp跨域訪問實(shí)現(xiàn)方法
  • JQuery Ajax 跨域訪問的解決方案
  • 解決AJAX中跨域訪問出現(xiàn)''沒有權(quán)限''的錯(cuò)誤
  • Python的Django應(yīng)用程序解決AJAX跨域訪問問題的方法
  • AJAX的跨域訪問-兩種有效的解決方法介紹
  • 深入淺析同源策略和跨域訪問
  • 關(guān)于Iframe如何跨域訪問Cookie和Session的解決方法
  • js實(shí)現(xiàn)跨域訪問的三種方法
  • AJax與Jsonp跨域訪問問題小結(jié)
  • jquery 跨域訪問問題解決方法(筆記)
  • 淺談Ajax跨域Session和跨域訪問
  • 解決nginx/apache靜態(tài)資源跨域訪問問題詳解

標(biāo)簽:伊春 崇左 深圳 威海 西藏 撫州 晉城 銅川

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《AJAX javascript的跨域訪問執(zhí)行》,本文關(guān)鍵詞  AJAX,javascript,的,跨域,訪問,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《AJAX javascript的跨域訪問執(zhí)行》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于AJAX javascript的跨域訪問執(zhí)行的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章