在JavaScript中Ajax是无法跨域的，当协议或者域名或者端口任一不同时，都会出现跨域，跨域处理的其中一种方案就是JSONP。今天就利用百度的一个JSONP接口来实现一个仿百度首页。
怎么去使用jsonp？
在JS中，src属性是没有同源策略限制的，所以通过src属性来实现跨域请求，jsonp的原理就是在src接口调用一个函数，在代码里定义这个函数，我们来看一下百度接口
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=百度&cb=getData
wb=后面跟上要查找的内容，cb=后面写函数名字，上面的地址输入到地址栏结果如下：
getData({q:"百度",p:false,s:["百度云盘","百度翻译","百度地图","百度杀毒","百度卫士","百度学术","百度文库","百度音乐","百度外卖","百度指数"]});
//可以看到getData是我们定义的函数名字，参数是一个对象，也就是说这个接口是一个函数的调用
那么我们可以在代码里先定义这个函数的内容，再通过script的src去引入这个地址，就等于调用了一个函数，参数就是我们要处理的数据；
那么现在来实现一下：
//html 代码 样式自己定义
<div id="show"></div>
<div id="div">
<input type="text" id="search" >
<a href="#" id="baidu">百度一下</a>
</div>
Paste_Image.png
//js代码
window.onload = function(){
var search = document.getElementById('search');
//获取搜索框
//百度一下按钮
var baidu = document.getElementById('baidu');
baidu.onclick = function () {
// location.href = "https://www.baidu.com/s?wd="+search.value;
// 新窗口打开
window.open("https://www.baidu.com/s?wd="+search.value);
}
search.onkeyup = function(){
//每次键盘抬起获取输入框内容,抬起的时候需要调用那个接口执行getData函数
//所以每次去动态生成script标签，src定义为接口地址，这样就等于执行了一个名字叫getData的函数
var val = search.value;
var script = document.createElement('script');
script.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + val + "&cb=getData";//引入js地址,cb=此处函数名字可以随便取，与自己定义的函数名相同即可
script.id = 'import';
document.body.appendChild(script);//把script加入到页面中
}
}
//然后定义getData函数怎么去实现对数据处理
function getData(data){
var showDiv = document.getElementById('show');//显示搜索词条div
//下面这个script是需要对添加的script标签进行处理
var script = document.getElementById('import');//导入的js
script.parentNode.removeChild(script);//移除导入的js
var ul = document.createElement('ul');//创建一个ul
showDiv.innerHTML = "";//每次调用函数先把显示内容清空
for(var i=0;i<data.s.length;i++){//循环导入src接口里面的词条
var li = document.createElement('li');//动态创建li
li.innerHTML = data.s[i];//li的内容是src里的s
ul.appendChild(li);
}
show.appendChild(ul);
//给每个词条li加点击事件
var aLi = document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].onclick = function () {
location.href = "https://www.baidu.com/s?wd="+this.innerHTML;
// 新窗口打开链接
// window.open("https://www.baidu.com/s?wd="+this.innerHTML);
}
}
}```
至此，就完成了一个基础的JSONP调用