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 相关文章推荐
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
基于jquery的大众点评,分类导航实现代码
Aug 23 Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
jQuery中animate的几种用法与注意事项
Dec 12 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
Dec 07 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
vue+element实现动态加载表单
Dec 13 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
基于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
杏林同学录(四)
2006/10/09 PHP
PHP cdata 处理(详细介绍)
2013/07/05 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
PHPCMS忘记后台密码的解决办法
2016/10/30 PHP
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
jQuery函数map()和each()介绍及异同点分析
2014/11/08 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
Vue 中对图片地址进行拼接的方法
2018/09/03 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
2019/09/21 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
Python中__new__与__init__方法的区别详解
2015/05/04 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
python实现PID算法及测试的例子
2019/08/08 Python
Python collections模块的使用方法
2020/10/09 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
优秀教导主任事迹材料
2014/05/09 职场文书
python绘制箱型图
2021/04/27 Python
Docker部署Mysql8的实现步骤
2022/07/07 Servers