jsonp跨域

域指的就是域名。

域名对应的是一个IP地址。

域名与IP地址的对应关系存储在域名服务器上。（DNS）

 

所谓跨域

 

　　1.就是跨域名，跨端口，跨协议

 

例如：如果有两个服务器，服务器A和服务器B,服务器A上存储了php数据，script,甚至是css这些文件，而你在服务器B上只写了html，然后你所在的服务器B上动态创建script，css，php数据(使用ajax请求),向服务器A上请求你想要的script,css，php数请求据(使用ajax)这些文件，请求这些文件后，你再在服务器B上运行你的html，虽然你的地址是在服务器B上，但是你还是可以运行效果与在服务器A上运行的效果是一样的，这样就是跨域名，跨端口，跨协议，实现了跨域。

 

　　简单来说，就是你请求的文件，只要含有“src”,“href”这些属性，你就能在其他服务器上，请求你所需要的文件，然后在自己的服务器上运行，就实现了跨域（跨域名，跨端口，跨协议）。

 

 

所谓同源

 

同源策略 同源策略限制是接口

浏览器有一个同源策略，不允许跨域。

静态资源不受同源策略的影响，是可以跨域的。

 

　　1.就是同域名，同端口，同协议

 

　　例如：如果你有一个服务器A，你所需要的script，css，php文件都在服务器A，你写的html也在服务器A上，然后运行，出现了效果，如果你想在另一台电脑上运行你的项目（注意另一台电脑无论有没有开启服务器，效果还是会显示出来的），只要把你写在服务器A上的协议，域名，端口以及你的项目名称复制下来，在另一台电脑上运行，同样会出现相同的效果，这就实现了同源。

 

　　简单来说，就是你的协议，域名，端口甚至项目名称都一样，不同电脑都能实现同样的效果。

 

无论是同台电脑，还是不同台电脑，与是不是同一台电脑没有关系，都能实现跨域和同源。

 

什么是协议，域名，端口？

 

解释：假如一个网址是 http://baidu.com:8080?user=name&pwd=password

 

http:// 是协议

 

baidu.com 是域名（注意：前面加上“wwww”即www.baidu.com不是域名）

 

8080 是端口

 

user=name&pwd=password 是地址带的参数

 

JSONP是一种跨域方式。 JSON是一种数据格式。

1 XHR不可以跨域

2 静态资源请求可以跨域

3 我们尝试将静态资源的src对接到目标服务器的接口上

4 我们发现是可以请求回数据来的

5 但是报错：语法错误

6 我们强行将语法错误修改为执行阶段的错误

使用的方式：在返回的时候，不是直接返回JSON数据，而是返回一个函数的执行。

如果有该函数，就会执行该函数，如果没有该函数，则变为语法错误。我们只要预先定义该函数即可解决。

7 预先定义该函数

 

原理：利用script标签无视同源策略的特点，直接将src指向目标接口。目标接口返回的不是一个JSON数据，而是一个函数的执行，并传递参数的代码。我们可以提前定义该函数。并处理数据。就可以得到其它服务器上的数据了。这就是JSONP。

JSONP = JSON + padding

 

// 定义一个jsonp函数 它负责发送jsonp跨域请求

function jsonp(url, data, callback) {

 // 将data对象拼接成query字符串

 var str = "";

 // 循环拼接

 for (var i in data) {

     // 拼接规则

     str += i + "=" + data[i] + "&";

 }

     // 去掉最后的&

     str = str.slice(0, -1);

     // 创建一个script标签

     var script = document.createElement("script");

     // 设置src

     script.src = url + "?" + str;

     // 应该将callback给定一个名称 改名称由data.callback决定

     // 将该函数暴露到全局中

     window[data.callback] = callback;

     // script标签与img不同

     // 让script标签上树 此时才会发送请求

     document.body.appendChild(script);

     // 在script标签发送完毕之后 下树 全局中的变量也没有用了 删掉

     script.onload = function() {

         document.body.removeChild(script);

         delete window[data.callback];

     }

    }

 

jQuery中的JSONP

jQuery中发送JSONP请求特别简单：

$.ajax({

url: 其它服务器接口的地址

data: 所需的数据

dataType: "JSONP",

jsonpCallback: 回调函数的名称

success: 回调函数

})

 

服务器允许跨域

    res.setHeader('Access-Control-Allow-Origin', '*'); 可以跨域的域名

    res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE'); 允许的方法

    res.setHeader('Access-Control-Allow-Headers', 'Content-Type'); 允许的请求头

    res.setHeader('Access-Control-Allow-Credentials', 'true'); 允许的签名 附加数据