jsonp跨域及實現百度首頁聯想功能的方法

更新時間：2018年08月30日 09:54:34 作者：隆金岑

這篇文章主要介紹了jsonp跨域及實現百度首頁聯想功能的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

什么是跨域呢？

比如說ajax必須在自己的域(名)之下，才能進行異步的請求，如果不是在同一個域之下就不能進行請求，會報錯。比如說我們用ajax去請求騰訊的API如果我們的這個域不在騰訊那個接口的'白名單'里面，騰訊的接口就會拒絕給我返回數據。但是大多數情況下，我們不可能每次都去去相應的網站申請一個'白名單'，這個時候我們就要用到跨域這種方法，跨域有很多方式比如說用iframe但是這種的可操作性太差了，不能操作frame里面的DOM元素。當先最流行的一種的方式是使用jsonp這種方式。

什么是JSONP

jsonp是英文為json with padding的簡稱。簡單地來說jsonp就是script標簽,通常的我們把script，link，img叫做資源標簽，也就是能連接資源的意思。只要記住了jsonp就是script標簽就好了。下面我們來說下一部分：

script標簽怎么引入數據

我們如果知道操作系統并不是靠后綴名來識別一個文件的，是靠文件里面的內容來識別的，后綴名知識更利于第三方的軟件進行查看。比如說我們把a.txt改為a.png那么我門用圖片查看器打開的時候也是顯示的圖片不存在的(如果學過Linux的同學會更好的理解)。【有興趣的同學可以嘗試這把一個js文件的后綴改為其他格式再引入試試】。那么我們就解決的script如何引入數據的問題了，也就是說我們可以用script標簽引用一個json或者.php的資源文件.

就算能引入資源，那么資源怎么使用呢

先舉個簡單地例子，比如我們在一個a.json定義了下面的一個變量

"text";

我們在HTML中去加載它，然后去執(zhí)行，如下代碼：

<script src="./a.json"></script>
<script>
alert(str); //text
</script>

這樣是能正確執(zhí)行了，但是我們也知道json數據中并沒有定義什么變量和方法的，這個就好像下面的方式：

var str="text";

我們在HTML中去加載它，然后去執(zhí)行，如下代碼：

<script src="./a.json"></script>
<script>
alert(str); //error
</script>

這樣顯然是會報錯的，那么跨域解決之后就要解決怎么使用這個資源的問題了。

我們先和后臺定義一個方式，把所有的數據作為一個函數的參數去調用函數，當然這個函數是我們預先定義好的了，如下面的格式：

function solve(data){
//使用數據
}
<script src="./a.json"></script>

下面我們來看看a.json是怎么定義的

solve(100);
solve({});
//相當于a.json里面的數據作為參數傳遞到了solve函數里面，然后，在solve函數里面操作這個數據就可以了

資源里面要有幾個方法

先看下面的例子，當我們引入一個PHP動態(tài)資源的時候

<?php
$t = isset($_GET['t']) ? $_GET['t'] : 'num';
$a = "111";
$b = "aaa";
if ($t == 'num') {
$data = json_encode($a);
} else {
$data = json_encode($b);
}
echo solve($data)

比如我們有兩個按鈕一個按鈕執(zhí)行的時候要求，收到$a另一個要求收到$b，那我們應該怎么搞？在pho文件中加一個solve()?這樣雖然是可取的，如果有n種請求呢，只要加n個方法，這樣肯定是不行的。我們怎么解決呢？有一個很好的方法就是在請求的時候就把函數名字加進去，例如下面的方式：

<?php
$t = isset($_GET['t']) ? $_GET['t'] : 'num';
$callback = isset($_GET['callback']) ? $_GET['callback'] : 'fn1';

$arr1 = array('111111','22222222','33333333','4444444','555555555555555555555');
$arr2 = array('aaaaaaaaaaaa','bbbbbbbb','cccccccccccc','ddddddddd','eeeeeeeeeeee');

if ($t == 'num') {
$data = json_encode($arr1);
} else {
$data = json_encode($arr2);
}

echo $callback.'('.$data.');';

這樣就能很好的規(guī)避這個問題了。

好了，如果上面的東西你都連接了，那么你就差不多知道什么是跨域和怎么解決跨域了，那么光說不練還是不好的，我們就用百度的搜索API來簡單聯系一下。

當然啦，還有一個重要的問題，jsonp加載的時候應該是動態(tài)加載的，我們應該用代碼創(chuàng)建。

jsonp跨域實現百度首頁聯想功能

主要思路是利用jsonp的跨域，使用百度后臺接口，根據input框的內容，向后臺拿數據，然后展示在搜索框下面，并且li使用的是a標簽包裹，基本實現了和百度首頁收縮然后跳轉的功能

結果截圖

  <script>
   var timer = null // 防抖動
   var domInput = document.getElementById('input')
   var domul = document.getElementsByTagName('ul')[0]
   domInput.oninput = function (e) {
    clearTimeout(timer) //防抖動
    timer = setTimeout(function () {
     var domScript = document.createElement('script')
     domScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+ e.target.value +'&cb=jsonpCb' // jsonp實現
     document.body.appendChild(domScript)
    }, 100)
   }
   function jsonpCb (data) { // jsonp的回調函數的實現
    let result = ''
    data.s.forEach(element => {
     result += '<li><a href= ' + 'https://www.baidu.com/s?wd=' + element + '>' + element +'</a></li>'
    });
    domul.innerHTML = result
   }
  </script>