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程序设计有所帮助。
相关文章
最近做项目需要这样的需求，当用户点击标签栏按钮，向下弹出菜单，再次点击，收回菜单。接下来通过本文给大家介绍微信小程序实现弹出菜单功能，感兴趣的朋友一起看看吧2018-06-06
这篇文章主要为大家介绍了JavaScript实现合并(归并)排序算法示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了JavaScript实现基于Cookie的存储类,实例分析了javascript通过cookie实现数据存储的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
JS与Jquery获取屏幕、浏览器、页面的宽度和高度对比整理
页面的展示，从外到内的容器为：屏幕、浏览器以及页面本身。HTML元素展现在页面内，页面展现在浏览器内，而浏览器展现在屏幕内。通过Js的一些对象可以获取这些容器的高度、宽度。容器的尺寸是指当前分辨率下的高度和宽度（分辨率不同，值就不相同）。2023-02-02
这篇文章主要介绍了js获取图片宽高的方法，快速获取图片的宽高其实是为了预先做好排版样式布局做准备，需要的朋友可以参考下2015-11-11
本文通过实例代码给大家介绍了基于JS实现根据当前时间随机生成流水号或者订单号的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-05-05
本篇文章主要是对textarea 控制输入字符字节数的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了mac上配置Android环境变量的方法,需要的朋友可以参考下2018-07-07
下面小编就为大家带来一篇js 获取当前web应用的上下文路径实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了JavaScript计时器示例分析,需要的朋友可以参考下2015-02-02
最新评论