跨域(一) 

 1 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 2 <title>document.domain 跨子域测试 | by js8.in</title>
 3 </head>
 4 <body>
 5 <div style="width:100%;border:2px solid green;">
 6         
 7     <h1>document.domain 跨子域测试</h1>
 8     <h3>此页面来自：<span id="host"></span></h3>
 9     <button onclick="post()">发送post</button>
10     <button onclick="get()">发送get</button>
11     <iframe id="iframe" src="http://dali.sinaapp.com/proxy.htm" frameborder="0" style="margin:10px;width:90%;height:300px;border:2px solid #f60;"></iframe>
12     <p><a href="http://www.80sec.com/cross_domain_attack.html" target="_blank">跨子域安全</a></p>
13 </div>
14     <script type="text/javascript">
15     document.getElementById('host').innerHTML = location.host;
16     document.domain = 'sinaapp.com';
17     var reqURL = 'http://dali.sinaapp.com/request.php';
18     var iframe = document.getElementById('iframe');
19     var iframeWin = iframe.contentWindow;
20     
21     function post(){
22         var iframeXHR = iframeWin.xmlHttp();
23         iframeXHR.open('POST', reqURL, true);
24         iframeXHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
25         iframeXHR.onreadystatechange = function(){
26             stateChangeHandler(iframeXHR);
27         };
28         
29          iframeXHR.send('action=post');
30     }
31 
32     function get(){
33         var iframeXHR = iframeWin.xmlHttp();
34         iframeXHR.open('GET', reqURL+'?t='+(+new Date()), true);
35         iframeXHR.onreadystatechange = function(){
36             stateChangeHandler(iframeXHR);
37         };
38         iframeXHR.send(null);
39     }
40 
41     function stateChangeHandler(xhr){
42         if (xhr.readyState == 4) {
43             var stat = xhr.status;
44             if ((stat >= 200 && stat < 300) || stat == 304 ) {
45                 var txt = xhr.responseText;
46                 alert(txt);
47             }else {
48                 alert('fail');
49             }
50         }
51     }
52 </script>
53 </body></html>
 1 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 2 <h3>此页面来自：<span id="host"></span></h3>
 3 <script>
 4     document.getElementById('host').innerHTML = location.host;
 5     
 6 document.domain = 'sinaapp.com';
 7 xmlHttp = (function() {
 8     var f;
 9     if(window.ActiveXObject) {
10         f = function() { return new ActiveXObject('Microsoft.XMLHTTP');};
11     } else if(window.XMLHttpRequest) {
12         f = function() { return new XMLHttpRequest();};
13     } else {
14         f = function() { return;};
15     }
16     return f;
17 })();
18 </script>
19 </head>
20 <body>
21 </body>
22 </html>

 

　　1. 两个不同子域名通过设置 document.domain=’主域名’ 获取操作对方的跨域权限。

　　2. 如何获取xhr，即时函数可以一次得到结果，以后调用不用再if判断是否支持XMLHttpRequest

　　3. location.host 的含义

　　4. 如何获得子iframe的window对象

　　5. xhr 响应发送过程： open("type", "url", true ), setRequestHeader("Content-Type", "application/x-www-form-urlencoded"), send("要发送的内容")。回调函数：onreadystatechange

　　6. post 的发送数据在header里面看，get在url。

posted @ 2013-11-29 15:31  楚玉  阅读(220)  评论(0)  编辑  收藏  举报