jsonp跨域獲取百度聯(lián)想詞的方法分析

更新時間：2019年05月13日 10:02:16 作者：很小白的小白

這篇文章主要介紹了jsonp跨域獲取百度聯(lián)想詞的方法,結(jié)合實例形式分析了jsonp的原理及跨域獲取百度聯(lián)想詞的相關(guān)操作技巧,需要的朋友可以參考下

本文實例講述了jsonp跨域獲取百度聯(lián)想詞的方法。分享給大家供大家參考，具體如下：

jsonp原理：

1.Web頁面上用<script> 引入 js文件時則不受是否跨域的影響（不僅如此，我們還發(fā)現(xiàn)凡是擁有"src"這個屬性的標(biāo)簽都擁有跨域的能力，比如<script>、<img>、<iframe>）

2.于是我們把數(shù)據(jù)放到服務(wù)器上，并且數(shù)據(jù)為json形式（因為js可以輕松處理json數(shù)據(jù)）

3.因為我們無法監(jiān)控通過<script>的src屬性是否把數(shù)據(jù)獲取完成，所以我們需要做一個處理。

4.實現(xiàn)定義好處理跨域獲取數(shù)據(jù)的函數(shù)，如 function doJson（data）{}。

5.用src獲取數(shù)據(jù)的時候添加一個參數(shù)cb=‘doJson' (服務(wù)端會根據(jù)參數(shù)cb的值返回對應(yīng)的內(nèi)容) 此內(nèi)容為以cb對應(yīng)的值，doJson為函數(shù)真實要傳遞的數(shù)據(jù)為函數(shù)的參數(shù)的一串字符如 doJson（'數(shù)據(jù)'）

百度聯(lián)想詞的實現(xiàn)：

用jsonp解決跨域問題。我們就跨域拿到百度的數(shù)據(jù)

<script>
  //輸入框
  var oInp = document.getElementsByTagName('input')[0];
  //得到的數(shù)據(jù)存在ul的li里
  var oUl = document.getElementsByTagName('ul')[0];
  //獲取輸入內(nèi)容，查找百度對應(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);
  }
  //對傳回的數(shù)據(jù)進行處理（回調(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錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: