AJAX的阻塞及跨域名解析

2019-09-14 07:21:11王旭


  我们现在就来开始编写一个原形,虽然简单,但是可以说明问题。

  首先,我们先来编写一个静态页面,作为放在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>



  然后我们再编写我们的主页面:

http://www.test.com/Default.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>



  当执行threeRequests方法时,将会同时请求http://www.test.com以及http://sub0.test.com两个不同域名下的资源。很明显,最后一个请求已经不会受到前两个请求的阻塞了 如图:


点击在新窗口中浏览此图片