在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.+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.+this.innerHTML;
          // 新窗口打開鏈接
          // window.open("https://www.baidu.com/s?wd="+this.innerHTML);
         }
    }
}```
至此，就完成了一個基礎的JSONP調用