跨域请求的概念
当前发起请求的域与该请求指向的资源所在的域不一样。这里的域指的是这样的一个概念：我们认为当协议 + 域名 + 端口号均相同，那么就是同源。 而当协议 + 域名 + 端口任意一个不相同时，那么这个请求就当作是不同的域 。也就是跨域请求。
例如我们所在的地址为http://localhost/ajax向http://127.0.0.1发送一个Ajax 请求，因为当前的域名不同，不是同一个域，这就是跨域请求。
注意：
- 浏览器不允许的跨域，仅仅是针对ajax。
- html标签请求，可以随便跨域。
跨域请求的解决方案
浏览器不允许的跨域，仅仅是针对ajax，所以我们不用ajax，用jsonp的方式利用script标签，引入外部资源，实现跨域请求。
原理：
- jsonp是一种非官方的跨域数据交互协议
- jsonp本质上是利用
<script><img><iframe>等标签不受同源策略限制，可以从不同域加载并执行资源的特性，来实现数据跨域传输。 - jsonp由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。
- jsonp的理念就是，与服务端约定好一个回调函数名，服务端接收到请求后，将返回一段 Javascript，在这段 Javascript 代码中调用了约定好的回调函数，并且将数据作为参数进行传递。当网页接收到这段 Javascript 代码后，就会执行这个回调函数，这时数据已经成功传输到客户端了。
跨域请求jsonp代码的封装
function jsonp(url,success,data){
//处理要发送的数据，处理成这种格式："user=admin&pass=123"
data = data || {};
let str = "";
//遍历data对象
for(var key in data){
str += `${key}=${data[key]}&`;
}
let t = new Date().getTime();
str = str + "__qft="+t;
// 创建一个script标签
var script = document.createElement("script");
// 设置要请求的资源地址，拼接要发送的数据
script.src = url + "?" + str;
// 将script标签插入页面
document.body.appendChild(script);
// 使用window，在局部声明全局函数，准备被后台返回的数据解析后，执行，当对象的属性是变量时，要使用[]语法包裹变量。
window[data[data.fieldName]] = function(res){
success(res);
}
}
跨域请求jsonp代码的使用
<script>
//封装后的调用形式，如：jsonp(url,success,data)
//url：为支持jsonp跨域的请求地址
//success：请求的表示成功之后，执行的回调函数
//data：要发送给后台的数据，对象形式
//其中fieldName属性保存的是后台接收的 要执行的函数名所在的字段名,根据后台接收的字段名，将随便写的函数名传给后台.
document.onclick = function(){
//这里写入跨域请求的地址，目前以php文件为例子
let url = "http://127.0.0.1/jsonp/data/jsonp4.php";
jsonp(url,function(res){
console.log(res);
},{
user:"root",
pass:678,
// 根据后台规定的字段名，随便传个函数名过去，让后台返回值后，能被script解析
cbn:"zxc",
// 为了实现前端的封装思想，为了适应后台不断变化的地址，将后台要接受的字段名，传给自己的函数
fieldName:"cbn"
});
}
</script>
jsonp的优缺点
优点：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行。
缺点：它只支持 GET 请求，而不支持 POST 请求等其他类型的 HTTP 请求，并且只支持跨域，当同域时要使用ajax来发送请求，所以要按需使用。
