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

2019-11-19 13:06:35

字體：大中小

供稿：網(wǎng)友

什么是跨域呢？

比如說ajax必須在自己的域(名)之下，才能進(jìn)行異步的請求，如果不是在同一個(gè)域之下就不能進(jìn)行請求，會(huì)報(bào)錯(cuò)。比如說我們用ajax去請求騰訊的API如果我們的這個(gè)域不在騰訊那個(gè)接口的'白名單'里面，騰訊的接口就會(huì)拒絕給我返回?cái)?shù)據(jù)。但是大多數(shù)情況下，我們不可能每次都去去相應(yīng)的網(wǎ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)并不是靠后綴名來識別一個(gè)文件的，是靠文件里面的內(nèi)容來識別的，后綴名知識更利于第三方的軟件進(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è)簡單地例子，比如我們在一個(gè)a.json定義了下面的一個(gè)變量

"text";

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

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

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

var str="text";

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

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

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

我們先和后臺定義一個(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種請求呢，只要加n個(gè)方法，這樣肯定是不行的。我們怎么解決呢？有一個(gè)很好的方法就是在請求的時(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的跨域，使用百度后臺接口，根據(jù)input框的內(nè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>