跨域解决方案之JSONP
同源策略
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
同源策略，它是由Netscape提出的一个著名的安全策略。
现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。
例如:
http://www.baidu.com 和 http://www.baidu.com:8080 二者是不同源的。
http://www.baidu.com和https://www.baidu.com 同样是不同源的。当请求不同源的数据的时候，浏览器就会在控制台报出一个异常，并且提示拒绝访问。同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。
JSONP介绍
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML的
上面我们虽然引入了这个文件，但是我们发现引入后我们并没有办法使用。我们之前曾经做过类似于下面的行为，就是给数据前面添加一个变量名。类似于下面：
var a = ["hello","world"]这样我们在网页里面就可以使用这个文件中的数据了。
Document
上面的代码顺利的读取了文件中的数据。
但是程序开发当中，我们如果采取类似于像上面的写法，又可能造成变量的污染。
既要解决读取数据的问题，又要避免变量污染，我们可以采取函数的形式。
将01.txt改成下面的形式:
fn(["hello","world"])在网页文件中如下：
Document
上面的代码中，当文件被加载进来的时候，就相当于调用了我们定义好的函数fn,而文件中的数据也自动的被传入到了函数中。
上面的逻辑就是JSONP的核心逻辑。
添加请求参数
在上面的代码中，我们简单的体验了JSONP的基本逻辑。下面我们来将基本的使用方式进行一下升级，让我们的请求能够添加参数。
例如，我们现在在服务端中有两组数组，一组存储的是歌名，一组存储的是电影名，点击不同的按钮显示不同的数据。
首先我们先来完成html的代码：
我们的需求是点击两个按钮分别显示不同的数据，下面是服务端的代码：
JS代码：
// 点击按钮请求数据
let oBtn1 = document.getElementById('btn1');
let oBtn2 = document.getElementById('btn2');
// 创建回调函数
function getdata1(data) {
// 获取元素赋值
let list1 = document.getElementById('list1');
html = '';
for(let i=0;i";
}
list1.innerHTML = html;
}
function getdata2(data) {
// 获取元素赋值
let list2 = document.getElementById('list2');
html = '';
for(let i=0;i";
}
list2.innerHTML = html;
}
oBtn1.onclick = ()=> {
// 创建script标签 ，动态插入
let script = document.createElement('script'); // 创建
let url = "02.jsonp.php?parm=music&callback=getdata1";
script.src = url;
document.getElementsByTagName('body')[0].appendChild(script);
};
oBtn2.onclick = ()=> {
// 创建script标签 ，动态插入
let script = document.createElement('script'); // 创建
let url = "02.jsonp.php?parm=movie&callback=getdata2";
script.src = url;
document.getElementsByTagName('body')[0].appendChild(script);
};
这样，我们就通过JSONP的形式读取到了后台文件的数据。
JSONP因为通过src属性，所以只能通过get传输数据。
小练习：百度搜索提示
首先，我们可以使用下面的百度接口来实现：
http://suggestion.baidu.com/su想要使用这个接口需要设置两个参数：
wd 要搜索的内容
cb 回调函数我们首先在页面当中实现一个输入框：
百度
下面是js代码：
function fn(data) {
var oUl = document.getElementById('list');
var html = '';
if (data.s.length) {
oUl.style.display = 'block';
for (var i=0; i'+ data.s[i] +'';
}
oUl.innerHTML = html;
} else {
oUl.style.display = 'none';
}
}
let q = document.getElementById('q');
let oUl = document.getElementById('list');
q.onkeyup = function(){
if ( this.value != '' ) {
var oScript = document.createElement('script');
oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=fn';
document.body.appendChild(oScript);
} else {
oUl.style.display = 'none';
}
}