Mr.J---重拾Ajax（四）-- 跨域

跨域

域名地址的组成

http://         www  .      abc.com   :    8080    /     script/jquery.js

协议           子域名         主域名           端口号          请求资源地址

• 当协议，子域名，主域名，端口号中任意一个不同时，都算作不同域。
• 不同域之间相互请求资源，就算做 “跨域"

出于安全的考虑，不允许跨域调用其它页面的对象。简单的理解就是a.com域名下的js无法操作b.com或者c.com域名下的对象。

代理

• 通过在同域名的Web服务器端创建一个代理
• 例如： 服务器一（域名：www.first.com） 服务器二（域名：www.second.com）
• 比如在第一个服务器后台（www.first.com/proxy-firstservice.php）来调用第二个服务器（www.second.com/service.php）的服务，再把相应结果发送给前端，这样前端调用第一个服务器同域名的服务就和调用第二个服务器的服务效果相同了。

JSONP

JSONP可用于解决主流浏览器的跨域数据访问的问题。

注意：只能对GET请求有效果！！！

同样对服务器端代码进行修改（jsonp中连接字符串使用 “ . ” ）

可以在发送请求中清楚看见参数callback 后面的jQuery....为随机生成的参数值

再查看返回值

参数值 ：jQuery1111018177324043309095_1565923075763

返回值：jQuery1111018177324043309095_1565923075763({"success":true,"msg":"找到员工：员工编号：101，员工姓名：洪七，员工性别：男，员工职位：总经理"})。

对比发现，两个参数值一样。

jsonp为什么不支持POST？

jsonp的本质是：动态创建script标签，然后通过他的src属性发送跨域请求，不同意然后服务器相应的数据格式为【函数调用foo（实参）】，所以在发送请求之前必须声明一个函数，并且函数的名字与参数中传递的名字要一致。

原理就是从服务端加载一段脚本（用script标签），然后把数据放到一个函数参数里面，再然后浏览器里定义的那个函数就能拿到那个数据了~

注意：标签里只能发GET

XHR２

HTML提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能。IE10以下的都不支持！！！

在服务器端做一点改造：

header('Access-Control-Allow-Origin:*');

header('Access-Control-Allow-Methods:*');

XHR2通信基础