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 相关文章推荐
JSON 教程 json入门学习笔记
Sep 22 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
BACKBONE.JS 简单入门范例
Oct 17 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
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
解读JavaScript中 For, While与递归的用法
2013/05/07 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
2019/06/20 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
python绘制简单折线图代码示例
2017/12/19 Python
python微信公众号开发简单流程
2018/03/23 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
Django Python 获取请求头信息Content-Range的方法
2019/08/06 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
网络专业学生个人的自我评价
2013/12/16 职场文书
数学国培研修感言
2014/02/13 职场文书
运动会入场词60字
2014/02/15 职场文书
授权委托书样本
2014/04/03 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
缓存替换策略及应用(以Redis、InnoDB为例)
2021/07/25 Redis