Ajax补充
一、测试跨域
1.什么是同源
同源指的是两个 URL 地址具有相同的协议、主机名、端口号。
2.什么是同源策略
同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。 浏览器的同源策略规定：不允许非同源的 URL 之间进行资源的交互。
3.什么是跨域
（1）同源指的是两个 URL 的协议、主机名、端口号完全一致，反之，则是跨域。
（2）出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。例如：
③受到同源策略的限制，上面的网页请求下面的接口会失败！
4.浏览器对跨域请求的拦截过程
浏览器允许发起跨域请求。但跨域请求回来的数据，会被浏览器拦截，无法被页面获取到！
5.突破浏览器跨域限制的两种方案
| 方案 | 诞生的时间 | 方案来源 | 优点 | 缺点 |
|---|---|---|---|---|
| JSONP | 出现较早 | 民间（非官方） | 兼容性好（兼容低版本 IE） | 仅支持 GET 请求 |
| CORS | 出现较晚 | W3C 官方标准 | 支持 GET、POST、PUT、DELETE、PATCH等常见的请求方式 | 不兼容某些低版本浏览器 |
6.什么是 JSONP
（1）JSONP 是实现跨域数据请求的一种技术解决方案。它只支持 GET 请求，不支持 POST、DELETE 等其它请求。
①在实际开发中很少被使用
②在面试中可能会问到 JSONP 的原理
(2)跨域的目的 拿到后端的数据 （前端和后端 跨域 不同源 直接发送ajax请求 失败）
(3)script标签的src属性不受同源策略的影响 跨域
(4)浏览器对于script的支持
①允许它下载指定路径的js代码 （js代码 由后端程序员来设定它内容），show({data:['a','b','c']}) => show 后端自己命名 - show中传递了真正的数据
②而且还会执行 js代码 ，你前端需要自己来定义 show方法的内容 你前端的业务逻辑
<script>
// option后端想要给前端传递数据
function show(option) {
console.log('数据回来了， 后端帮我们调用的show 里面有数据');
console.log(option);
}
/*
1 跨域的目的 拿到后端的数据 （前端和后端 跨域 不同源 直接发送ajax请求 失败）
2 script标签的src属性不受同源策略的影响 跨域
3 浏览器对于script的支持
1 允许它下载指定路径的js代码 （js代码 由后端程序员来设定它内容）
show({data:['a','b','c']}) => show 后端自己命名 - show中传递了真正的数据
2 而且还会执行 js代码
你前端需要自己来定义 show方法的内容 你前端的业务逻辑
*/
// show();
// let data = 1233;
// show();
</script>
<!-- 根据后端要求写的请求js的代码 -->
<script src="http://www.itcbc.com:3006/api/getscript2"></script>
<!-- 随便加载别人公司的js文件 ！！ -->
<!-- <script src="./utils/04.js"></script> -->
<script>
// 前端拿到后端的数据
// 希望前端自己来定义show方法的业务
function show(option) {
alert('我的数据拿到啦' + option.message);
}
</script>
<!-- 自己来定义 后端起的函数名称 show 函数 自己来具体的业务 -->
<script src="http://www.itcbc.com:3006/api/getscript2"></script>
<!-- <script>
// show里面的数据 就是后端想要给我们返回的数据
show({ message: '你必须自己定义好叫做show的函数，否则就会出错' });
</script> -->
7.CORS 的概念
（1）CORS 是解决跨域数据请求的终极解决方案，全称是 Cross-origin resource sharing。
（2）CORS 技术需要浏览器和服务器同时支持，二者缺一不可：
①浏览器要支持 CORS 功能（主流的浏览器全部支持，IE 不能低于 IE10）
②服务器要开启 CORS 功能（需要后端开发者为接口开启 CORS 功能）
（3）实现 CORS 的关键服务器端，因为如果服务器端没有开启 CORS 功能，则客户端无法访问那些跨域的接口！
（4）CORS 的原理：服务器端通过 Access-Control-Allow-Origin 响应头，来告诉浏览器当前的 API 接口是否允许跨域请求。
（5）CORS 的两个主要优势
①CORS 是真正的 Ajax 请求，支持 GET、POST、DELETE、PUT、PATCH 等这些常见的 Ajax 请求方式
②只需要后端开启 CORS 功能即可，前端的代码无须做任何改动
8.JSONP 不是真正的 Ajax 技术
（1）在解决跨域问题时：
CORS 方案用到了 XMLHttpRequest 对象，发起的是纯正的 Ajax 请求
JSONP 方案没有用到 XMLHttpRequest 对象，因此，JSONP 不是真正的 Ajax 技术
（2）结论：只要用到了 XMLHttpRequest 对象，发起的就是 Ajax 请求！
