关于跨域的总结

因为浏览器的同源策略导致，不同域名之间无法访问，故而产生了一些规避的方法，今天学习了下，做下总结，加深记忆。

1.使用iframe标签进行跨域操作，原理解析：iframe框架标签拥有src属性，而其本身拥有访问外部页面的功能，我们可以通过iframe访问外部连接，载入之后以iframe为桥梁获取数据。具体见下面例子：

//前提条件
// a.test.com  访问 b.test.com/test  这两个url二级域名不同，但根域名相同，所以开始用iframe实现跨域

//首先在a.test.com下的index.html 中创建iframe标签，并设置其src属性具体代码如下

<iframe id="bfrm" style="display:none;" src="http://b.test.com/index.html"></iframe>

//然后创建跨域的方法
function crossAjax() {
         var url = 'http://b.test.com/test';
        $.ajax(url).done(function(data) {
            alert(data);
        }).fail(function() {
            alert('请求失败');
        });
    }

    function crossSubDomain() {
        document.domain = 'test.com'; // 提升域以实现跨域
        window.frames['bfrm'].contentWindow.doAjax(function(data) {//doAjax函数定义与b.test.com/index.html中
            alert(data);
        });
    }
//现在a.test.com/index.html文件完成

//接下来，在b.test.com/index.html中添加document.domain = "test.com";提升域
//然后定义方法

function doAjax(callback)
{
    $.ajax('/test').done(function(data)
    {
        callback(data);//回调函数，出入处理数据的函数
    });
}

//原理通俗点说就是利用iframe特性加载外部页面，然后回去iframe的window对象调用方法，也就是调用b.test.com/index.html中定义的方法，而b.test.com/index,html访问`"/test"`是自己的域不存在跨域问题。

2.利用script标签的特性实现跨域，这也是jsonp跨域的实现原理。

//封装一个简单的函数
/*
url=>请求的地址，任何地址
data=>需要传递的参数对象
callback=>回调函数，通过它处理请求到的数据
*/
function jsonp(url,data,callback)
{
    var script = document.createElement("scrippt");
    document.body.appendChild(script);//动态创建script标签并添加到body中

    data = data || {};//防止data为null
    data.callback = "callback" + new Date().getTime();//动态创建一个回调函数名
    window[data.callback] = callback;//将回调函数绑定到创建的函数名上
    url += "?" + $.param(data);使用jquery方法，序列化对象为url参数形式，返回值类似于"a=name&b=name2"
    script.src = url;
    script.onload = function(){
        document.body.removeChild(script);
    }
}

//调用
function jsonpTest()
{
    jsonp('http://b.test.com/testjsonp2', {test: 'ok'}, function (data) {
            console.log(data);
     });
}

//jsonp原理实现跨域其实是请求一个script脚本，脚本内包含需要的数据，请求端实现一个回调函数，后端返回一个该函数执行脚本，例如:前端发送的回调函数为callback,则后端返回的脚本为callback(data);data即为数据，如上述代码，回调函数绑定到window[data.callback]上，可以在任何位置调用callback函数，获取数据。

3.jquery中jsonp实现的方法

• getJson()方法举例如下：

$.getJSON('http://b.test.com/testjsonp2?callback=?', {test: 'ok'}, function(data) {
           console.log(data);
 });
 //需要在url背后添加"?callback=?"这样jquery会识别并自动使用jsonp方式请求数据。如果不添加则使用普通方式无法跨域请求。

• ajax()方法:设置dataType属性为jsonp，即可实现跨域请求。

  关于jquery ajax方法详情可参见我的blog这篇文章：http://blog.csdn.net/qq_14886653/article/details/52474510

4.使用CORS(跨域资源共享)，是xhr level2标准，需要浏览器和服务器同时支持具体参见大牛博客：http://www.ruanyifeng.com/blog/2016/04/cors.html

总结：第一种iframe只能在根域名相同的情况下跨域，而jsonp，则只支持get请求方式。但现在主流还是使用jsonp实现跨域。