ajax常用操作及 跨域的实现原理

原生ajax：

http://sjpsega.iteye.com/blog/1729350
1、创建兼容的XMLHttpRequest对象

function createXMLHTTPRequest() {     
       //1.创建XMLHttpRequest对象     
       //这是XMLHttpReuquest对象无部使用中最复杂的一步     
       //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码     
       var xmlHttpRequest;  
       if (window.XMLHttpRequest) {     
           //针对FireFox，Mozillar，Opera，Safari，IE7，IE8     
          xmlHttpRequest = new XMLHttpRequest();     
           //针对某些特定版本的mozillar浏览器的BUG进行修正     
           if (xmlHttpRequest.overrideMimeType) {     
               xmlHttpRequest.overrideMimeType("text/xml");     
           }     
       } else if (window.ActiveXObject) {     
           //针对IE6，IE5.5，IE5     
           //两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中     
           //排在前面的版本较新     
           var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];     
           for ( var i = 0; i < activexName.length; i++) {     
               try {     
                   //取出一个控件名进行创建，如果创建成功就终止循环     
                   //如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建     
                  xmlHttpRequest = new ActiveXObject(activexName[i]);   
                  if(xmlHttpRequest){  
                      break;  
                  }  
               } catch (e) {     
               }     
           }     
       }     
       return xmlHttpRequest;  
   }     

或者

//兼容的XMLHttpRequest对象
IXHR: function(){
    if(window.ActiveXObject){
            XHR=new ActiveXObject('Microsoft.XMLHTTP');
        }else if(window.XMLHttpRequest){
            XHR=new XMLHttpRequest();
        }else{
            return null;
        }
}

2、get请求

function get(){  
    var req = createXMLHTTPRequest();  
    if(req){  
        req.open("GET", "http://test.com/?keywords=手机", true);  
        req.onreadystatechange = function(){  
            if(req.readyState == 4){  
                if(req.status == 200){  
                    alert("success");  
                }else{  
                    alert("error");  
                }  
            }  
        }  
        req.send(null);  
    }  
}  

3、post请求

function post(){  
    var req = createXMLHTTPRequest();  
    if(req){  
        req.open("POST", "http://test.com/", true);  
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gbk;");     
        req.send("keywords=手机");  
        req.onreadystatechange = function(){  
            if(req.readyState == 4){  
                if(req.status == 200){  
                    alert("success");  
                }else{  
                    alert("error");  
                }  
            }  
        }  
    }  
}  

//触发焦点时执行
document.forms['iform'].nickname.onblur = function(){
    //输入的值
    var val=document.forms['iform'].nickname.value;
    //对用户名的判断
    if(!/^[a-zA-Z0-9_]{3,16}$/.test(val)){
        alert('请输入3~16位由英文、数字、下划线组成的昵称！');
        return false;
    }
    //初始化一下XHR
    iBase.IXHR();
    //原来需要新打开的判断页面用GET使用异步
    XHR.open('GET','/demo/ajax/iajax20110306_query.php?entryname='+val,true);
    //与readyState属性有关，当readyState改变时它才会触发
    XHR.onreadystatechange=returnFun;
    //异步处理完成后发送数据出去（比如某些需要在焦点事件后再执行的）
    XHR.send(null);
}

function returnFun(){
    //当send()已调用，正在发送请求时，显示Loading...
    if(XHR.readyState==1){
        iBase.Id('tips').innerHTML='Loding...';
    }else if(XHR.readyState==4){
        //当响应内容解析完成，可以调用时
        //更缜密，再判断一下status是否成功
        if(XHR.status==200){
            //responseText为返回的文本
            iBase.Id('tips').innerHTML=XHR.responseText;
        }
        //使用完请销毁，避免内存泄露
        XHR=null;
    }
}

4、readyState与status:
readyState有五种状态：
　　0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法；
　　1 (载入)：已经调用open() 方法，但尚未发送请求；
　　2 (载入完成)： 请求已经发送完成；
　　3 (交互)：可以接收到部分响应数据；
　　4 (完成)：已经接收到了全部数据，并且连接已经关闭。
如此一来，你应该就能明白readyState的功能，而status实际是一种辅状态判断，只是status更多是服务器方的状态判断。关于status，由于它的状态有几十种，我只列出平时常用的几种：
　　100——客户必须继续发出请求
　　101——客户要求服务器根据请求转换HTTP协议版本
　　200——成功
　　201——提示知道新文件的URL
　　300——请求的资源可在多处得到
　　301——删除请求数据
　　404——没有发现文件、查询或URl
　　500——服务器产生内部错误

jQuery中Ajax操作

http://blog.csdn.net/liujiahan629629/article/details/22229669/
http://www.cnblogs.com/ttcc/p/3802643.html 这篇写的很详细

$.ajax，$.post， $.get， $.getJSON。

一， $.ajax，

这个是JQuery对ajax封装的最基础步，通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下我们都可以通过此方法进行异步刷新的操作。但是它的参数较多，有的时候可能会麻烦一些。看一下常用的参数：

 var configObj = {
       method   //数据的提交方式：get和post
       url   //数据的提交路劲
       async   //是否支持异步刷新，默认是true
       data    //需要提交的数据
       dataType   //服务器返回数据的类型，例如xml,String,Json等
       success    //请求成功后的回调函数
       error   //请求失败后的回调函数
    }

$.ajax(configObj);//通过$.ajax函数进行调用。

好，看一个实际的例子吧，看一个进行异步删除的例子：

<span style="font-size:18px;">          // 删除  
         $.ajax({  
             type : "POST",  //提交方式  
             url : "${pageContext.request.contextPath}/org/doDelete.action",//路径  
             data : {  
                 "org.id" : "${org.id}"  
             },//数据，这里使用的是Json格式进行传输  
             success : function(result) {//返回数据根据结果进行相应的处理  
                 if ( result.success ) {  
                     $("#tipMsg").text("删除数据成功");  
                     tree.deleteItem("${org.id}", true);  
                 } else {  
                     $("#tipMsg").text("删除数据失败");  
                 }  
             }  
         });  
</span>  

二，$.post

这个函数其实就是对$.ajax进行了更进一步的封装，减少了参数，简化了操作，但是运用的范围更小了。$.post简化了数据提交方式，只能采用POST方式提交。只能是异步访问服务器，不能同步访问，不能进行错误处理。在满足这些情况下，我们可以使用这个函数来方便我们的编程，它的主要几个参数，像method，async等进行了默认设置，我们不可以改变的。例子不再介绍。

url:发送请求地址。
data:待发送 Key/value 参数。
callback:发送成功时回调函数。
type:返回内容格式，xml, html, script, json, text,_default。

三，$.get

和$.post一样，这个函数是对get方法的提交数据进行封装，只能使用在get提交数据解决异步刷新的方式上，使用方式和上边的也差不多。这里不再演示。

四， $.getJSON

这个是进一步的封装，也就是对返回数据类型为Json进行操作。里边就三个参数，需要我们设置，非常简单：url,[data],[callback]。

其实会了$.ajax方法，其它的就都会使用了，都是一样的，其实非常简单。

但是这里还有一个问题，比较麻烦，就是如果页面数据量比较大，该怎么办呢？在常规表单的处理中，我们使用框架Struts2可以通过域驱动模式进行自动获取封装，那么通过ajax,如何进行封装呢？这里JQuery有一个插件，Jquery Form，通过引入此js文件，我们可以模仿表单Form来支持Struts2的域驱动模式，进行自动数据的封装。用法和$.ajax类似，看一下实际的例子，这里写一个保存用户的前台代码：

<span style="font-size:18px;">  $(function(){  
        var options = {  
            beforeSubmit : function() {//处理以前需要做的功能  
                $("tipMsg").text("数据正在保存，请稍候...");  
                $("#insertBtn").attr("disabled", true);  
            },  
            success : function(result) {//返回成功以后需要的回调函数  
                if ( result.success ) {  
                    $("#tipMsg").text("机构保存成功");  

                                       //这里是对应的一棵树，后边会介绍到，  
                    // 控制树形组件，增加新的节点  
                    var tree = window.parent.treeFrame.tree;  
                    tree.insertNewChild("${org.id}", result.id, result.name);  
                } else {  
                    $("#tipMsg").text("机构保存失败");  
                }  
                // 启用保存按钮  
                $("#insertBtn").attr("disabled", false);  
            },  
            clearForm : true  
        };  

        $('#orgForm').ajaxForm(options); //通过Jquery.Form中的ajaxForm方法进行提交  
    });  
</span>  

这样我们就不用再进行数据data的封装处理，大大简化了我们ajax的操作这样异步刷新的操作。综上为JQuery中ajax的操作，感觉使用多了，和form表单的处理还是非常相似的，只不过实现的功能不一样罢了。学习编程，其实就是学习对数据的流转处理，如何从前台获取，传输到服务器进行相应的处理，然后返回，进行相关的显示，把这个流程通过一些技术实现，就完成了软件的开发，感觉还是非常有意思的。

错误处理

Ajax 异步提交时，不可能所有情况都是成功完成的，也有因为代码异步文件错误、网络错误导致提交失败的。这时，我们应该把错误报告出来，提醒用户重新提交或提示开发者进行修补。

在之前高层封装中是没有回调错误处理的，比如$.get()、$.post()和.load()。所以，早期的方法通过全局的 .ajaxError()事件方法来返回错误信息。而在 jQuery1.5 之后，可以通过连缀处理使用局部.error()方法即可。而对于$.ajax()方法，不但可以用这两种方法，还有自己的属性方法 error : function () {}。

$.ajax({

    type : 'POST',
    url : 'test1.php',
    data : $('form').serialize(),   
    success : function (response, status, xhr) {
        $('#box').html(response);
    },

    error : function (xhr, errorText, errorStatus) {
        alert(xhr.status + ':' + xhr.statusText);
    }

});

//$.post()使用连缀.error()方法提示错误，连缀方法后面将被.fail()取代

$.post('test1.php').error(function (xhr, status, info) {   //参数和上面一样

　　alert(xhr.status + ':' +xhr.statusText);

　　alert(status + ':' + info);

});

//$.post()使用全局.ajaxError()事件方法提示错误

$(document).ajaxError(function (event, xhr, settings, info) {   //event为事件对象

　　alert(xhr.status + ':' +xhr.statusText);

　　alert(settings+ ':' + info);

});

跨域

http://www.cnblogs.com/oneword/archive/2012/12/03/2799443.html

1.什么是跨域

我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题.

跨域问题是由于javascript语言安全限制中的同源策略造成的.

简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合.

例如:

URL 说明 是否允许通信

• 同一域名下 允许
  
  • http://www.a.com/a.js ,
  • http://www.a.com/b.js
• 同一域名下不同文件夹 允许
  
  • http://www.a.com/lab/a.js
  • http://www.a.com/script/b.js
• 同一域名，不同端口 不允许
  
  • http://www.a.com:8000/a.js
  • http://www.a.com/b.js
• 同一域名，不同协议 不允许
  
  • http://www.a.com/a.js
  • https://www.a.com/b.js
• 域名和域名对应ip 不允许
  
  • http://www.a.com/a.js
  • http://70.32.92.74/b.js
• 主域相同，子域不同 不允许
  
  • http://www.a.com/a.js
  • http://script.a.com/b.js
• 同一域名，不同二级域名（同上） 不允许（cookie这种情况下也不允许访问）
  
  • http://www.a.com/a.js
  • http://a.com/b.js
• 不同域名 不允许
  
  • http://www.cnblogs.com/a.js
  • http://www.a.com/b.js

2.实现原理

在HTML DOM中,Script标签是可以跨域访问服务器上的数据的.因此,可以指定script的src属性为跨域的url,从而实现跨域访问.

例如:

这种访问方式是不行的.但是如下方式,却是可以的.

<script src=”http://192.168.0.5/Web/web1.aspx” type="text/javascript"></script>

这里对返回的数据有个要求,即:服务器返回的数据不能是单纯的如{"Name":"zhangsan"}

如果返回的是这个json字符串,我们是没有办法引用这个字符串的.所以,要求返回的值,务必是

var json={"Name":"zhangsan"},或json({"Name":"zhangsan"})

为了使程序不报错,我们务必还要建立个json函数.

3.解决方案

方案一

服务器端:

    protected void Page_Load(object sender, EventArgs e)
        {
            string result = "callback({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";

            Response.Clear();
            Response.Write(result);
            Response.End();
        }

客户端:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">

        var result = null;
        window.onload = function () {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "http://192.168.0.101/ExampleBusinessApplication.Web/web2.aspx";

            var head = document.getElementsByTagName("head")[0];
            head.insertBefore(script, head.firstChild);

        };

        function callback(data) {
            result = data;
        }

        function b_click() {
            alert(result.name);
        }
    </script>
</head>
<body>
    <input type="button" value="click me!" onclick="b_click();" />
</body>
</html>

方案二，通过jquery来完成

通过jquery的jsonp的方式.使用此方式,对服务器端有要求.

服务器端如下:

    protected void Page_Load(object sender, EventArgs e)
        {
            string callback = Request.QueryString["jsoncallback"];

            string result = callback + "({\"name\":\"zhangsan\",\"date\":\"2012-12-03\"})";

            Response.Clear();
            Response.Write(result);
            Response.End();
        }

客户端:

$.ajax({ 
                async: false, 
                url: "http://192.168.0.5/Web/web1.aspx", 
                type: "GET", 
                dataType: 'jsonp', 
                //jsonp的值自定义,如果使用jsoncallback,那么服务器端,要返回一个jsoncallback的值对应的对象. 
                jsonp: 'jsoncallback', 
                //要传递的参数,没有传参时，也一定要写上 
                  data: null, 
                timeout: 5000, 
                //返回Json类型 
                  contentType: "application/json;utf-8", 
                //服务器段返回的对象包含name,data属性. 
                success: function (result) { 
                    alert(result.date); 
                }, 
                error: function (jqXHR, textStatus, errorThrown) { 
                    alert(textStatus); 
                } 
            });

实际上,在我们执行这段js时,js向服务器发出了这样一个请求:

http://192.168.0.5/Web/web1.aspx?jsoncallback=jsonp1354505244726&_=1354505244742 

而服务器也相应的返回了如下对象:

jsonp1354506338864({"name":"zhangsan","date":"2012-12-03"})

此时就实现了跨域范文数据的要求.

即：

三种方法实现js跨域访问：http://narutolby.iteye.com/blog/1464436

1.基于iframe实现跨域

基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点，也就是两个页面必须属于一个基础域（例如都是xxx.com，或是xxx.com.cn），使用同一协议（例如都是 http）和同一端口（例如都是80），这样在两个页面中同时添加document.domain，就可以实现父页面调用子页面的函数，代码如下：
页面一：

<head>  
  <script>  
   document.domain = "xx.com";  
    function aa(){  
      alert("p");  
   }  
  </script>  
</head>  
<body>  
   <iframe src="http://localhost:8080/CmsUI/2.html" id="i">  

   </iframe>  
   <script>  
  document.getElementById('i').onload = function(){  
     var d = document.getElementById('i').contentWindow;  
     d.a();  

 };  
   </script>  
 </body>  
</html>  

页面二：

<html>  
 <head>  
  <script>  
    document.domain = "xx.com";  
    function a(){  
    alert("c");  
     }  
  </script>  
 </head>  
 <body>  
 </body>  
</html>  

这时候父页面就可以调用子页面的a函数，实现js跨域访问

2.基于script标签实现跨域

script标签本身就可以访问其它域的资源，不受浏览器同源策略的限制，可以通过在页面动态创建script标签，代码如下：

var script = document.createElement('script');  
script.src = "http://aa.xx.com/js/*.js";  
document.body.appendChild(script);  

这样通过动态创建script标签就可以加载其它域的js文件，然后通过本页面就可以调用加载后js文件的函数，这样做的缺陷就是不能加载其它域的文档，只能是js文件，jsonp便是通过这种方式实现的，jsonp通过向其它域传入一个callback参数，通过其他域的后台将callback参数值和json串包装成javascript函数返回，因为是通过script标签发出的请求，浏览器会将返回来的字符串按照javascript进行解析执行，实现了域与域之间的数据传输。
jquery中对jsonp的支持也是基于此方案。

3.后台代理方式

这种方式可以解决所有跨域问题，也就是将后台作为代理，每次对其它域的请求转交给本域的后台，本域的后台通过模拟http请求去访问其它域，再将返回的结果返回给前台，这样做的好处是，无论访问的是文档，还是js文件都可以实现跨域。

javascript跨域的4种方法和原理详解

http://www.jb51.net/article/48794.htm 这篇比较详细。具体看原博文

1、通过jsonp跨域

原理：
通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。
知道jsonp跨域的原理后我们就可以用js动态生成script标签来进行跨域操作了，而不用特意的手动的书写那些script标签。如果你的页面使用jquery，那么通过它封装的方法就能很方便的来进行jsonp操作了。

<script>
    $.getJSON('http://examples.com/data.php?callback=?',function(jsondata){
        //处理获得的json数据
    });
</script>

原理是一样的，只不过我们不需要手动的插入script标签以及定义回掉函数。jquery会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的作用。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。

2、通过修改document.domain来跨子域

浏览器都有一个同源策略，其限制之一就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档。 它的第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。有一点需要说明，不同的框架之间（父子或同辈），是能够获取到彼此的window对象的，但蛋疼的是你却不能使用获取到的window对象的属性和方法(html5中的postMessage方法是一个例外，还有些浏览器比如ie6也可以使用top、parent等少数几个属性)，总之，你可以当做是只能获取到一个几乎无用的window对象。比如，有一个页面，它的地址是http://www.example.com/a.html ， 在这个页面里面有一个iframe，它的src是http://example.com/b.html, 很显然，这个页面与它里面的iframe框架是不同域的，所以我们是无法通过在页面中书写js代码来获取iframe中的东西的：

<script>
    function onLoad(){
        var iFrame = document.getElementById('iFrame');
        var win = iFrame.contentWindow; //这里能够获取到iFrame里的window对象，但是该window对象的属性和方法几乎是不可用的
        var doc = win.document; //这里获取不到iFrame里的document对象
        var name = win.name;   //这里也获取不到iFrame的对象属性
    }
</script>

这个时候，document.domain就可以派上用场了，我们只要把http://www.example.com/a.html 和 http://example.com/b.html这两个页面的document.domain都设成相同的域名就可以了。但要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。例如：a.b.example.com 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个，但是不可以设成 c.a.b.example.com,因为这是当前域的子域，也不可以设成baidu.com,因为主域已经不相同了。
在页面 http://www.example.com/a.html 中设置document.domain:

<iframe src="http://example.com/b.html" id="iframe" onload="test()"></iframe>
<script>
    document.domain='example.com';  //设置成主域
    function test(){
        alert(document.getElementById('iframe').contentWindow);
    }
</script>

在页面 http://example.com/b.html 中也设置document.domain，而且这也是必须的，虽然这个文档的domain就是example.com,但是还是必须显示的设置document.domain的值：

<script>
    document.domain='example.com'; //在iframe载入的这个页面也要设置document.domain，使之与主域的document.domain相同
</script>

这样我们就可以通过js访问到iframe中的各种属性和对象了。
不过如果你想在http://www.example.com/a.html 页面中通过ajax直接请求http://example.com/b.html 页面，即使你设置了相同的document.domain也还是不行的，所以修改document.domain的方法只适用于不同子域的框架间的交互。如果你想通过ajax的方法去与不同子域的页面交互，除了使用jsonp的方法外，还可以用一个隐藏的iframe来做一个代理。原理就是让这个iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面，所以这个iframe中的页面是可以正常使用ajax去获取你要的数据的，然后就是通过我们刚刚讲得修改document.domain的方法，让我们能通过js完全控制这个iframe，这样我们就可以让iframe去发送ajax请求，然后收到的数据我们也可以获得了。

3、使用window.name来进行跨域

window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
比如：有一个页面baidu.com,它里面有这样的代码：

<script>
    window.name="aaaaaaaaaa";   //设置window.name的值
    setTimeout(function(){
        window.location="http://sina.com";
    },3000);  //3s后把一个新的页面sina.com载入到当前的window
</script>

然后跳转到新浪首页，window.name还是aaaaaaaa

我们看到在b.html页面上成功获取到了它的上一个页面a.html给window.name设置的值。如果在之后所有载入的页面都没对window.name进行修改的话，那么所有这些页面获取到的window.name的值都是a.html页面设置的那个值。当然，如果有需要，其中的任何一个页面都可以对window.name的值进行修改。注意，window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右甚至更大的一个容量，具体取决于不同的浏览器，但一般是够用了。
上面的例子中，我们用到的页面a.html和b.html是处于同一个域的，但是即使a.html与b.html处于不同的域中，上述结论同样是适用的，这也正是利用window.name进行跨域的原理。
下面就来看一看具体是怎么样通过window.name来跨域获取数据的。还是举例说明。
比如有一个www.example.com/a.html页面,需要通过a.html页面里的js来获取另一个位于不同域上的页面www.cnblogs.com/data.html里的数据。

data.html页面里的代码很简单，就是给当前的window.name设置一个a.html页面想要得到的数据值。

那么在a.html页面中，我们怎么把data.html页面载入进来呢？显然我们不能直接在a.html页面中通过改变window.location来载入data.html页面，因为我们想要即使a.html页面不跳转也能得到data.html里的数据。答案就是在a.html页面中使用一个隐藏的iframe来充当一个中间人角色，由iframe去获取data.html的数据，然后a.html再去得到iframe获取到的数据。

充当中间人的iframe想要获取到data.html的通过window.name设置的数据，只需要把这个iframe的src设为www.cnblogs.com/data.html就行了。然后a.html想要得到iframe所获取到的数据，也就是想要得到iframe的window.name的值，还必须把这个iframe的src设成跟a.html页面同一个域才行，不然根据前面讲的同源策略，a.html是不能访问到iframe里的window.name属性的。这就是整个跨域过程。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>window.name跨域</title>
    <script type="text/javascript">
        function getData(){         //iframe载入data.html后会执行此函数
            var iframe=document.getElementById('proxy');
            iframe.onload = function(){
                var data = iframe.contentWindow.name;   //获取iframe里的window.name，也就是data.html页面给它设置的数据
                alert(data);
            };
            iframe.src="b.html"; //这里的b.html为随便的一个页面，只要与a.html同源即可。目的是让a.html能访问到iframe里面的东西，设置成about.blank也可
        }
    </script>
</head>
<body>
    <iframe id="proxy" src="http://www.example.com/data.html" style="display:none" onload="getData()"></iframe>
</body>
</html>

4、使用HTML5中新引进的window.postMessage方法来跨域传送数据

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。
调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 * 。
需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。
上面所说的向其他window对象发送消息，其实就是指一个页面有几个框架的那种情况，因为每一个框架都有一个window对象。在讨论第二种方法的时候，我们说过，不同域的框架间是可以获取到对方的window对象的，而且也可以使用window.postMessage这个方法。下面看一个简单的示例，有两个页面

<!--这是页面http://test.com/a.html的代码-->
<script>
function onLoad(){
    var iframe = document.getElementById('iframe');
    var win = iframe.contentWindow; //获取window对象
    win.postMessage('来自页面a的消息','*');    //向不同域的http://www.test.com/b.html页面发送消息
}
</script>
<iframe id="iframe" src="http://www.test.com/b.html" onload="onLoad()"></iframe>

<!--这是页面 http://www.test.com/b.html的代码-->
<script>
    window.onmessage = function(e){
        e = e||event;   //获取事件对象
        alert(e.data);  //通过data属性得到传送的消息
    }
</script>

我们运行a页面后可以出现弹框（？这里不懂，为什么是运行a后出现弹框？而不是运行b？）