快捷導(dǎo)航

jsonp跨域及實(shí)現(xiàn)百度首頁聯(lián)想功能的方法

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

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

什么是跨域呢？

比如說ajax必須在自己的域(名)之下，才能進(jìn)行異步的請(qǐng)求，如果不是在同一個(gè)域之下就不能進(jìn)行請(qǐng)求，會(huì)報(bào)錯(cuò)。比如說我們用ajax去請(qǐng)求騰訊的API如果我們的這個(gè)域不在騰訊那個(gè)接口的'白名單'里面，騰訊的接口就會(huì)拒絕給我返回?cái)?shù)據(jù)。但是大多數(shù)情況下，我們不可能每次都去去相應(yīng)的網(wǎng)站申請(qǐng)一個(gè)'白名單'，這個(gè)時(shí)候我們就要用到跨域這種方法，跨域有很多方式比如說用iframe但是這種的可操作性太差了，不能操作frame里面的DOM元素。當(dāng)先最流行的一種的方式是使用jsonp這種方式。

什么是JSONP

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

script標(biāo)簽怎么引入數(shù)據(jù)

我們?nèi)绻啦僮飨到y(tǒng)并不是靠后綴名來識(shí)別一個(gè)文件的，是靠文件里面的內(nèi)容來識(shí)別的，后綴名知識(shí)更利于第三方的軟件進(jìn)行查看。比如說我們把a(bǔ).txt改為a.png那么我門用圖片查看器打開的時(shí)候也是顯示的圖片不存在的(如果學(xué)過Linux的同學(xué)會(huì)更好的理解)。【有興趣的同學(xué)可以嘗試這把一個(gè)js文件的后綴改為其他格式再引入試試】。那么我們就解決的script如何引入數(shù)據(jù)的問題了，也就是說我們可以用script標(biāo)簽引用一個(gè)json或者.php的資源文件.

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

先舉個(gè)簡單地例子，比如我們?cè)谝粋€(gè)a.json定義了下面的一個(gè)變量

"text";

我們?cè)贖TML中去加載它，然后去執(zhí)行，如下代碼：

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

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

var str="text";

我們?cè)贖TML中去加載它，然后去執(zhí)行，如下代碼：

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

這樣顯然是會(huì)報(bào)錯(cuò)的，那么跨域解決之后就要解決怎么使用這個(gè)資源的問題了。

我們先和后臺(tái)定義一個(gè)方式，把所有的數(shù)據(jù)作為一個(gè)函數(shù)的參數(shù)去調(diào)用函數(shù)，當(dāng)然這個(gè)函數(shù)是我們預(yù)先定義好的了，如下面的格式：

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

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

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

資源里面要有幾個(gè)方法

先看下面的例子，當(dāng)我們引入一個(gè)PHP動(dòng)態(tài)資源的時(shí)候

<?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)

比如我們有兩個(gè)按鈕一個(gè)按鈕執(zhí)行的時(shí)候要求，收到$a另一個(gè)要求收到$b，那我們應(yīng)該怎么搞？在pho文件中加一個(gè)solve()?這樣雖然是可取的，如果有n種請(qǐng)求呢，只要加n個(gè)方法，這樣肯定是不行的。我們?cè)趺唇鉀Q呢？有一個(gè)很好的方法就是在請(qǐng)求的時(shí)候就把函數(shù)名字加進(jì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ī)避這個(gè)問題了。

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

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

jsonp跨域?qū)崿F(xiàn)百度首頁聯(lián)想功能

主要思路是利用jsonp的跨域，使用百度后臺(tái)接口，根據(jù)input框的內(nèi)容，向后臺(tái)拿數(shù)據(jù)，然后展示在搜索框下面，并且li使用的是a標(biāo)簽包裹，基本實(shí)現(xiàn)了和百度首頁收縮然后跳轉(zhuǎn)的功能

結(jié)果截圖

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