我想寫一個頁面，頁面裏用到百度的搜索引擎，這就是一種跨域請求。
最簡單的，寫一個輸入框，每當輸入的時候，會出現下面一串相似搜索，我們自己的輸入框在輸入的時候就去請求百度的搜索引擎，然後把得來的數據展示出來。
主要的思路是創建一個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);
}
<!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調試的，可以複製粘貼試一試玩的！