深圳Web前端学习：跨域

深圳Web前端学习：跨域
在web有一种现象：不同的域名之间相互分享资源(信息)并进行通信。
这种现象叫做：跨域。
表面上看起来多个站点之间的来往增加是非常好的，但是其中弊端却是更大的。因为你不知道其他站点会拿你分享给他的信息做什么事情。所以出于安全性的考虑，在web中跨域这种现象默认是不允许的。
如果在两个或多个站点提前说好，我可以把我们站点客户端的数据分享给你，这样就会被浏览器默认阻止，因为他们是不同域的数据，所以我们就需要通过技术手段来实现了。 能够实现跨域的手段很多，总结下来要有8个之多(可能有更多只是我不知道而已)，但是今天我们只介绍其中最为常见的一种：jsonP。
本章知识点：
同源策略
天生就能跨域的标签
jsonP的基本实现
jsonP请求百度的数据
jsonP的优缺点
同源策略
同源策略是浏览器出于安全性考虑指定的一套策略，目的是阻止不同域之间的信息通信。
那么什么是同源策略？
即协议(http)，域名(www.xxx.com)，端口(80)一致。
// 目标域名
www.xxx.com

htttp://www.xxx.com     (同源)

htttp://www.xxx.com/index.html    (同源)

htttps://www.xxx.com/index.html    (不同源，协议不同)

htttp://xxx.com/index.html    (不同源，域名不同)

htttp://www.xxx.com:8080/index.html    (不同源，端口不同)

如果在不同源的情况下去请求别人站点的数据，只会得到一个报错。
天生就能跨域的标签
其实在最简单的HTML标签中就有一些标签天生就能跨域的。
1，

2，<iframe>

3，<link>

4，<script>

没错，这些标签都是可以引入外部资源的，他们统一的特点就是拥有src/href属性，其实是这些属性在跨域，而不是标签本身在跨域，看到这里可能你也想到了一些CSS的样式属性，比如background-image属性和border-image属性（关于这种CSS属性网上还能找到一些利用跨域它们的跨域能力实现CSS攻击的文章），也就是说凡是可以引入外部资源的属性或者标签都是可以实现跨域的。
我们在www.aaa.com中如果想要请求www.bbb.com中的数据，正常情况下ajax请求都是失败的，但是www.aaa.com中却可以加载www.bbb.com中的JS文件，这样，我们的跨域请求就能得以实现了。
jsonP的基本实现
关于jsonP的具体实现非常简单，首先我们需要两个

服务器端代码：
<?php
$callback = ${}_{G}ET{[}^{\prime }callbac{k}^{\prime }];echo"$callback({data:‘哈哈，跨域成功！’})";
?>
jsonP请求百度的数据
知道了这些，我们可以玩一个模拟百度搜索的小案例试试水。
想要在外部调用百度的搜索功能我们需要知道百度放出来的接口是怎么用的。
具体如下：
https://www.baidu.com/su?wd=关键字&cb=回调函数名。

html代码：

<datalist id="datalist"></datalist>

JS代码：
// 当数据返回时的回调函数
function getData(data){
var datalist = document.getElementById(‘datalist’);
console.log(data);
for( var i=0;i<data.s.length;i++ ){
var option = document.createElement(‘option’);
option.value = data.s[i];
option.innerText = data.s[i];
datalist.appendChild(option);
}
}
// 当键盘每一次被按下的时候都会新建一个