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

發(fā)布時間：2022-05-11 10:31:10 來源：億速云閱讀：145 作者：zzz 欄目：大數(shù)據(jù)

這篇文章主要介紹了AJAX javascript的跨域訪問怎么執(zhí)行的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇AJAX javascript的跨域訪問怎么執(zhí)行文章都會有所收獲，下面我們一起來看看吧。

突然感覺就是這里的問題，研究一下，搞定后其實覺得挺容易的，只是自己知識還是有些欠缺，解決方法如下：
阻塞的AJAX請求
　　我們先來證實一下請求的阻塞情況吧。我們使用如下的代碼：
連續(xù)發(fā)起三個請求

復制代碼代碼如下:

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

　　當執(zhí)行threeRequests時就會連續(xù)發(fā)出3個相同域名的請求，還是通過統(tǒng)計圖表來查看阻塞的效果：
AJAX javascript的跨域訪問怎么執(zhí)行

最后的請求被前兩個請求阻塞
　　每個請求需要花費1.5秒的時間。很明顯，第三個請求必須等到第一個請求結束之后才能執(zhí)行，因此總共需要進行3秒多鐘才能執(zhí)行完畢。我們要改變的就是這個狀況。
傳統(tǒng)的跨域名異步請求解決方案
　　AJAX安全性的唯一保證，似乎就是對于跨域名（Cross-Domain）AJAX請求的限制。除非打開本地硬盤的網頁，或者在IE中將跨域名傳輸數(shù)據(jù)的限制打開，否則向其他域名發(fā)出AJAX請求都會被禁止。而且對于跨域名的判斷非常嚴格，不同的子域名，或者相同域名的不同端口，都會被認作是不同的域名，我們不能向它們的資源發(fā)出AJAX請求。
　　從表面上看起來似乎沒有辦法打破這個限制，還好我們有個救星，那就是iframe！
　　iframe雖然不在標準中出現(xiàn)，但是由于它實在有用，F(xiàn)ireFox也“不得不”對它進行了支持（類似的還有innerHTML）。網上已經有一些跨域名發(fā)出異步請求的做法，但是它們實在做的不好。它們的簡單工作原理如下：在另一個域名下放置一個特定的頁面文件作為Proxy，主頁面將異步請求的信息通過Query String傳遞入iframe里的Proxy頁面，Proxy頁面在AJAX請求執(zhí)行完畢后將結果放在自己location的hash中，而主頁面會對 iframe的src的hash值進行輪詢，一旦發(fā)現(xiàn)它出現(xiàn)了改變，則通過hash值得到需要的信息。
　　這個方法的實現(xiàn)比較復雜，而且功能有限。在 IE和FireFox中，對于URL的長度大約可以支持2000個左右的字符。對于普通的需求它可能已經足夠了，可惜如果真要傳遞大量的數(shù)據(jù)，這就遠遠不夠了。與我們一會兒要提出的解決方案相比，可能它唯一的優(yōu)勢就是能夠跨任意域名進行異步請求，而我們的解決方案只能突破子域名的限制。
優(yōu)雅地突破子域名的限制
　　我們突破子域名限制的關鍵還是在于iframe。
　　iframe是的好東西，我們能夠跨過子域名來訪問iframe里的頁面對象，例如 window和DOM結構，包括調用JavaScript（通過window對象）——我們將內外頁面的 document.domain設為相同就可以了。然后在不同子域名的頁面發(fā)起不同的請求，把結果通過JavaScript進行傳遞即可。唯一需要的也僅僅是一個簡單的靜態(tài)頁面作為Proxy而已。
　　我們現(xiàn)在就來開始編寫一個原形，雖然簡單，但是可以說明問題。
　　首先，我們先來編寫一個靜態(tài)頁面，作為放在iframe里的Proxy，如下：
SubDomainProxy.html

復制代碼代碼如下:

<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>

然后我們再編寫我們的主頁面：

復制代碼代碼如下:

<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>

　　當執(zhí)行threeRequests方法時，將會同時請求http://www.test.com以及http://sub0.test.com兩個不同域名下的資源。很明顯，最后一個請求已經不會受到前兩個請求的阻塞了：
AJAX javascript的跨域訪問怎么執(zhí)行

不同域名的請求不會被阻塞

關于“AJAX javascript的跨域訪問怎么執(zhí)行”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“AJAX javascript的跨域訪問怎么執(zhí)行”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

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

猜你喜歡

最新資訊

相關推薦

相關標簽