jsonp跨域获取百度联想词的方法分析


Posted in Javascript onMay 13, 2019

本文实例讲述了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 相关文章推荐
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
vue-router路由模式详解(小结)
Aug 26 Javascript
基于Fixed定位的框选功能的实现代码
May 13 #Javascript
JQuery事件委托原理与用法实例分析
May 13 #jQuery
使用原生js编写一个简单的框选功能方法
May 13 #Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 #Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 #jQuery
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 #Javascript
JavaScript封闭函数及常用内置对象示例
May 13 #Javascript
You might like
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
PHP内核探索:变量概述
2014/01/30 PHP
php内核解析:PHP中的哈希表
2014/01/30 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
require.js深入了解 require.js特性介绍
2014/09/04 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
javascript回到顶部特效
2016/07/30 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
python爬虫常用的模块分析
2014/08/29 Python
Python守护进程和脚本单例运行详解
2017/01/06 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
python中字符串的操作方法大全
2018/06/03 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
Linux内核产生并发的原因
2012/07/13 面试题
电大物流学生的自我评价
2013/10/25 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
本科应届生求职信
2014/08/05 职场文书
死亡证明书样本说明
2014/10/18 职场文书
师德师风培训感言
2015/08/03 职场文书
公司岗位说明书
2015/10/08 职场文书
《西门豹》教学反思
2016/02/23 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书