jsonp跨域獲取百度聯(lián)想詞的方法分析
本文實(shí)例講述了jsonp跨域獲取百度聯(lián)想詞的方法。分享給大家供大家參考，具體如下：
jsonp原理：
1.Web頁面上用<script> 引入 js文件時(shí)則不受是否跨域的影響 （不僅如此，我們還發(fā)現(xiàn)凡是擁有"src"這個(gè)屬性的標(biāo)簽都擁有跨域的能力，比如<script>、<img>、<iframe>）
2.于是我們把數(shù)據(jù)放到服務(wù)器上，并且數(shù)據(jù)為json形式（因?yàn)閖s可以輕松處理json數(shù)據(jù)）
3.因?yàn)槲覀儫o法監(jiān)控通過<script>的src屬性是否把數(shù)據(jù)獲取完成，所以我們需要做一個(gè)處理。
4.實(shí)現(xiàn)定義好處理跨域獲取數(shù)據(jù)的函數(shù)，如 function doJson（data）{}。
5.用src獲取數(shù)據(jù)的時(shí)候添加一個(gè)參數(shù)cb=‘doJson' (服務(wù)端會(huì)根據(jù)參數(shù)cb的值返回對(duì)應(yīng)的內(nèi)容) 此內(nèi)容為以cb對(duì)應(yīng)的值，doJson為函數(shù)真實(shí)要傳遞的數(shù)據(jù)為函數(shù)的參數(shù)的一串字符如 doJson（'數(shù)據(jù)'）
百度聯(lián)想詞的實(shí)現(xiàn)：
用jsonp解決跨域問題。我們就跨域拿到百度的數(shù)據(jù)
<script>
//輸入框
var oInp = document.getElementsByTagName('input')[0];
//得到的數(shù)據(jù)存在ul的li里
var oUl = document.getElementsByTagName('ul')[0];
//獲取輸入內(nèi)容，查找百度對(duì)應(yīng)的src
oInp.oninput = function () {
var value = this.value;
var oScript = document.createElement('script');
oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=doJosn';
document.body.appendChild(oScript);
}
//對(duì)傳回的數(shù)據(jù)進(jìn)行處理（回調(diào)函數(shù)）
function doJosn(data) {
var s = data.s;
var str = '';
if (s.length > 0) {
s.forEach(function (ele, index) {
str += '<li><a href =https://sp0.baidu.com/s?wd=' + ele + '>' + ele + '</a></li>';
})
oUl.innerHTML = str;
oUl.style.display = 'block';
} else {
oUl.style.display = 'none';
}
}
</script>
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript中ajax操作技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)好看的分類頁，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
webpack打包js文件及部署的實(shí)現(xiàn)方法
這篇文章主要介紹了webpack打包js文件的方法及webpack打包后的JS文件如何部署,需要的朋友可以參考下2017-12-12
javascript使用appendChild追加節(jié)點(diǎn)實(shí)例
這篇文章主要介紹了javascript使用appendChild追加節(jié)點(diǎn)的方法,實(shí)例分析了appendChild()函數(shù)增加結(jié)點(diǎn)的使用技巧,需要的朋友可以參考下2015-01-01
curring的概念將函數(shù)式編程的概念和默認(rèn)參數(shù)以及可變參數(shù)結(jié)合在一起.一個(gè)帶n個(gè)參數(shù),curried的函數(shù)固化第一個(gè)參數(shù)為固定參數(shù),并返回另一個(gè)帶n-1個(gè)參數(shù)的函數(shù)對(duì)象,分別類似于LISP的原始函數(shù)car和cdr的行為。currying能泛化為偏函數(shù)應(yīng)用（partial function application, PFA）,p 這種函數(shù)將任意數(shù)量（順序）的參數(shù)的函數(shù)轉(zhuǎn)化為另一個(gè)帶剩余參數(shù)的函數(shù)對(duì)象2012-02-02
Map是一組鍵值對(duì)的結(jié)構(gòu),具有極快的查找速度,下面這篇文章主要給大家介紹了關(guān)于JS利用map整合雙數(shù)組的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
談?wù)処ntersectionObserver懶加載的具體使用
這篇文章主要介紹了談?wù)処ntersectionObserver懶加載的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
js toFixed()方法的重寫實(shí)現(xiàn)精度的統(tǒng)一
凡用過js 中的toFix() 方法的， 應(yīng)該都知道這個(gè)方法存在一個(gè)小小的BUG，在IE 下和FF 下對(duì)于小數(shù)的進(jìn)位有點(diǎn)不同2014-03-03
這篇文章主要介紹了JS實(shí)現(xiàn)div模塊的截圖并下載功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-10-10
利用 JavaScript 實(shí)現(xiàn)并發(fā)控制的示例代碼
這篇文章主要介紹了利用 JavaScript 實(shí)現(xiàn)并發(fā)控制的示例代碼,本文通過實(shí)例代碼給大家介紹的非常想詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
這篇文章主要為大家詳細(xì)介紹了swiper實(shí)現(xiàn)異形輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11