jsonp跨域获取百度联想词的方法分析
更新时间：2019年05月13日 10:02:16 作者：很小白的小白
这篇文章主要介绍了jsonp跨域获取百度联想词的方法,结合实例形式分析了jsonp的原理及跨域获取百度联想词的相关操作技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了小程序实现好看的分类页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要介绍了webpack打包js文件的方法及webpack打包后的JS文件如何部署,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了javascript使用appendChild追加节点的方法,实例分析了appendChild()函数增加结点的使用技巧,需要的朋友可以参考下2015-01-01
curring的概念将函数式编程的概念和默认参数以及可变参数结合在一起.一个带n个参数,curried的函数固化第一个参数为固定参数,并返回另一个带n-1个参数的函数对象,分别类似于LISP的原始函数car和cdr的行为。currying能泛化为偏函数应用（partial function application, PFA）,p 这种函数将任意数量（顺序）的参数的函数转化为另一个带剩余参数的函数对象2012-02-02
Map是一组键值对的结构,具有极快的查找速度,下面这篇文章主要给大家介绍了关于JS利用map整合双数组的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-08-08
谈谈IntersectionObserver懒加载的具体使用
这篇文章主要介绍了谈谈IntersectionObserver懒加载的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
凡用过js 中的toFix() 方法的， 应该都知道这个方法存在一个小小的BUG，在IE 下和FF 下对于小数的进位有点不同2014-03-03
这篇文章主要介绍了JS实现div模块的截图并下载功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了利用 JavaScript 实现并发控制的示例代码,本文通过实例代码给大家介绍的非常想详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
这篇文章主要为大家详细介绍了swiper实现异形轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
最新评论