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 相关文章推荐
免费空间广告万能消除代码
Sep 04 Javascript
JavaScript设置FieldSet展开与收缩
May 15 Javascript
php与js的区别是什么
Aug 05 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
Dec 27 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
Mar 03 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 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桌面中心(二) 数据库写入
2007/03/11 PHP
php 操作符与控制结构
2012/03/07 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
PHP中number_format()函数的用法讲解
2019/04/08 PHP
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
解决vue组件销毁之后计时器继续执行的问题
2020/07/21 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
简介Python设计模式中的代理模式与模板方法模式编程
2016/02/02 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
python和mysql交互操作实例详解【基于pymysql库】
2019/06/04 Python
python自定义时钟类、定时任务类
2021/02/22 Python
Python调用Windows命令打印文件
2020/02/07 Python
Python count函数使用方法实例解析
2020/03/23 Python
毕业研究生的自我鉴定
2013/11/30 职场文书
投标授权委托书范文
2014/08/02 职场文书
退学证明范本3篇
2014/10/29 职场文书
董事长致辞
2015/07/29 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书