jsonp跨域问题

　　JSONP是一个非官方的协议，它容许在服务器端集成Script tags返回至客户端，经过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

同源策略限制

　　同源策略限制：出于安全方面的考虑，浏览器阻止代码得到或者更改从另外一个域名下得到的文件或者信息。也就是说咱们的请求地址必须和当前网站的地指相同。同源策略经过隔离来实现对资源的保护。这个策略的历史很是悠久从Netscape Navigator 2.0时代就开始了。

什么是跨域？

简单的来讲，页面中的JavaScript没法访问其余服务器上的数据，即“同源策略”。而跨域就是经过某些手段来绕过同源策略限制，实现不一样服务器之间通讯的效果。

JSONP跨域的原理

在同源策略下，在某个服务器下的页面是没法获取到该服务器之外的数据的，但img、iframe、script等标签是个例外，这些标签能够经过src属性请求到其余服务器上的数据。利用script标签的开放策略，咱们能够实现跨域请求数据，固然，也须要服务端的配合。当咱们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而咱们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

具体流程以下：

1. 首先在客户端注册一个callback, 而后把callback的名字传给服务器。

2. 此时，服务器先生成 json 数据，而后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp，最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

3. 客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据做为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

 举个例子，假如须要从服务器（http://www.a.com/user?id=123）获取的数据以下：

{"id": 123, "name" : 张三, "age": 17}

那么，使用JSONP方式请求（http://www.a.com/user?id=123?callback=foo）的数据将会是以下： 

foo({"id": 123, "name" : 张三, "age": 17});

固然，若是服务端考虑得更加充分，返回的数据可能以下： 

try{foo({"id": 123, "name" : 张三, "age": 17});}catch(e){}

这时候咱们只要定义一个foo()函数，并动态地建立一个script标签，使其的src属性为http://www.a.com/user?id=123?callback=foo： 

function executeJsonp(url){
　　var eleScript= document.createElement("script");
　　eleScript.type = "text/javascript";
　　eleScript.src = url;
　　document.getElementsByTagName("head")[0].appendChild(eleScript);
}

function foo(data){
    for(var p in data){
      console.log(data[p]);
    }
}

var url = "http://www.a.com/user?id=123?callback=foo";
executeJsonp(url)

 

在jQuery中如何经过JSONP来跨域获取数据

第一种方法是在ajax函数中设置dataType为'jsonp'： 

$.ajax({
        dataType: 'jsonp',
        url: 'http://www.a.com/user?id=123',
        success: function(data){
                //处理data数据
        }
});

getJsonp: function(url, param, callback) {
        $.ajax({
            url: url,
            data: param,
            dataType: "jsonp",
            success: callback,
            error: function(data){
                alert('网络异常，请稍后再试！');
            }
        })
    }

 

第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数便可： 

$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){
        //处理data数据
});

也能够简单地使用getScript方法：

/此时也能够在函数外定义foo方法
function foo(data){
        //处理data数据
}
$.getJSON('http://www.a.com/user?id=123&callback=foo');

 

JSONP的优势是：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中均可以运行，不须要XMLHttpRequest或ActiveX的支持；而且在请求完毕后能够经过调用callback的方式回传结果。

JSONP的缺点则是：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种状况，不能解决不一样域的两个页面之间如何进行JavaScript调用的问题。