廢話不多說(shuō) ，先貼代碼
代碼塊
<body>
<input type="text" />
<ul></ul>
<script>
var input=document.querySelector("input");
var ul=document.querySelector("ul");
input.onclick=function(){
var script=document.createElement("script");
script.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=fn1';
document.body.appendChild(script);
document.body.removeChild(script);
}
function fn1(data){
//我們需要的data參數(shù)已經(jīng)通過(guò)數(shù)據(jù)庫(kù)傳入了函數(shù)，不需要我們另行傳入。
console.log(data);
var str='';
//data.s在最后一張圖可以明了
if(!data.s.length){
ul.style.display='none';
ul.innerHTML='';
}else{
ul.style.display='block';
for(var i=0;i<data.s.length;i++){
str+='<li>'+data.s[i]+'</li>';
}
ul.innerHTML=str;
}
};
</script>
</body>
其實(shí)就是一個(gè)通過(guò)訪問(wèn)百度服務(wù)器數(shù)據(jù)，然后展示在本地頁(yè)面上的一個(gè)jsonp。
首先我們要拿到訪問(wèn)百度服務(wù)器的一個(gè)網(wǎng)址
0.4.png
右擊，copy，copy link address。
得到如下：
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&json=1&p=3&sid=1427_21109_18560_17001_23536_22160&req=2&bs=%E5%90%91%E6%97%A5%E8%91%B5&csor=0&cb=jQuery1102022528784831170223_1500709212726&_=1500709212727
但是我們不需要這么多，精簡(jiǎn)一下：
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=fn1
參數(shù) 值
wd 關(guān)鍵字
cb 回調(diào)函數(shù)
輸入的時(shí)候回去請(qǐng)求百度的數(shù)據(jù)，他是放在百度的服務(wù)器中，我們?cè)诒緳C(jī)，這就是跨域，用到了jsonp。
jsonp出來(lái)之后特別流行，而且操作方便，ajax操作的時(shí)候可能會(huì)出現(xiàn)很多錯(cuò)誤，jsonp不會(huì)。
簡(jiǎn)單說(shuō)就是一個(gè)get請(qǐng)求，就是一個(gè)地址 。
就是一個(gè)script標(biāo)簽，javascript文件，拿到文件之后通過(guò)dom或者javascript的操作方法把數(shù)據(jù)展示到頁(yè)面中，這就是jsonp的數(shù)據(jù)交互。
