我想写一个页面，页面里用到百度的搜索引擎，这就是一种跨域请求。
最简单的，写一个输入框，每当输入的时候，会出现下面一串相似搜索，我们自己的输入框在输入的时候就去请求百度的搜索引擎，然后把得来的数据展示出来。
‘
主要的思路是创建一个script标签，然后在src属性里调用跨域url。就是比如
<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=s&cb=wxl123"></script>
问号前边就是要访问的搜索引擎，wd是百度那边要搜索的数据，内容我写了个s，然后后面cb就是百度完成搜索之后返回的回调函数的名字。这两个参数是百度的规则。
你可以把上串代码写在一个空白网页里，刷新页面会发现console里报错，找不到wxl123这个函数，因为这个标签在完成搜索之后就会把数据传给wxl123，并且执行这个函数。
因此，我们就随便把这个函数写上，并且读取里面的数据就行了，比如
function wxl123(data){
console.log(data);
}
然后我们就可以在控制台里我们通过跨域获取来的数据啦！！这就完成了一次跨域请求。
接下来我们模仿百度页面，每次输入都会更新一次模糊搜索的信息，这么就需要多次建立这么一个标签了！而且用完之后，我们应该及时的把这个标签删掉。
所以应该自己创建一个函数，每次输入一次值的时候，我们获取input的值，并且自己组装一下script标签，然后还要保证返回执行的函数一定不想同。我直接拉代码就好了。
function jsonp(json){
//json是一个对象，需要获取html的值，大概是这样的
// json{
// url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
// data:{
// wd:'s'
// },
// success:function (data) {
// console.log(data);
// }
// }
//把json里的数据拆一下
var json = json || {};
var url = json.url;
var success = json.success;
if(!url)return;
var data = json.data || {};
//下面两句相当于这样：
// json{
// rtl:'',
// data:{
// wd:'s',
// cb:'wxl123'
// },
// success:func...
// }
json.cbname = json.cbname || 'cb';
var wxl = 'wxl' + Math.random();
wxl = wxl.replace('.','');
data[json.cbname] = wxl;
//这是在定义wxl123函数，函数把百度搜索的数据又返回到success函数里了
window[wxl] = function(data){
success && success(data);
b.removeChild(a);
}
var arr = [];
//arr 是 ['wd=s','cb=wxl123']
for(var name in data){
arr.push(name + '=' + data[name]);
}
//创建标签
var a = document.createElement('script');
//给标签赋src属性
a.src = url + '?' + arr.join('&');
//src = https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=s&cb=wxl123
var b = document.getElementsByTagName('head')[0];
//把完整的标签放在了head标签里面了
b.appendChild(a);
}
上面就定义好了一个函数，每次输入的时候获取输入事件，然后获取输入的值，并且写好success函数，这个函数里主要是操纵dom把获取得到的值显示出来。代码是这样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域请求</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
margin:100px auto;
width: 200px;
}
.box p{
color: #fb3
}
#u1{
margin-top: 30px;
display: block;
height: 38px;
width: 198px;
outline: none;
font-size: 30px;
padding-left: 20px;
}
li{
list-style: none;
font-size: 16px;
line-height: 38px;
border-bottom: 1px dashed #555;
padding-left: 20px;
}
li.hello{
background-color: #eee;
}
</style>
<script src='jsonp.js'></script>
<script>
window.onload = function(){
var a = document.getElementById('u1');
var b = document.getElementById('u2');
var index = -1;
a.onkeyup = function(e) {
if(e.which === 40 || e.which === 38)return;
jsonp({
url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
data:{
wd:a.value
},
success:function(data){
b.innerHTML = '';
data.s.forEach(function(text){
var cli = document.createElement('li');
cli.innerHTML = text;
b.appendChild(cli);
})
}
})
};
a.onkeydown = function(e){
var a = b.getElementsByTagName('li');
var c = document.getElementById('u1');
if(e.which === 40){
++index;
for(var i = 0 ; i<a.length;i++){
a[i].className = '';
}
if(index == a.length){
index = -1;
}
if(index!=-1){
a[index].className = 'hello';
}
c.value = a[index].innerHTML;
}
if(e.which === 38){
--index;
for(var i = 0 ; i<a.length;i++){
a[i].className = '';
}
if(index == -2){
index = a.length - 1;
}
if(index!=-1){
a[index].className = 'hello';
}
c.value = a[index].innerHTML;
//防止光标滑到最左边
e.preventDefault()
}
}
}
</script>
</head>
<body>
<div class="box">
<p>告诉你，这也是个百度！！</p>
<input type="text" id ='u1'>
<ul id = 'u2'></ul>
</div>
</body>
</html>
思路就是每次调用jsonp函数的时候给它一个对象，对象包含着我们的数据，url，以及以后要操作的函数。这个函数会在wxl123函数建立好的时候开始调用。
这就是一个简单的调用，chrome调试的，可以复制粘贴试一试玩的！