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

jsonp原理：

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

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

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

4.實現定義好處理跨域獲取數據的函數，如 function doJson（data）{}。

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

百度聯想詞的實現：

用jsonp解決跨域問題。我們就跨域拿到百度的數據

<script>  //輸入框  var oInp = document.getElementsByTagName('input')[0];  //得到的數據存在ul的li里  var oUl = document.getElementsByTagName('ul')[0];  //獲取輸入內容，查找百度對應的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);  }  //對傳回的數據進行處理（回調函數）  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>

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript中ajax操作技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

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