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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 Javascript
监控 url fragment变化的js代码
Apr 19 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
vue.js的简单自动求和计算实例
Nov 08 Javascript
Javascript生成器(Generator)的介绍与使用
Jan 31 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
珊瑚虫IP库浅析
2007/02/15 PHP
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
Javascript this 的一些学习总结
2012/08/02 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
Angular 作用域scope的具体使用
2017/12/11 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
Python使用getpass库读取密码的示例
2017/10/10 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
python编写微信公众号首图思路详解
2019/12/13 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
为什么是 Python -m
2020/06/19 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
CSS3 Flex 弹性布局实例代码详解
2018/11/01 HTML / CSS
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
Footshop罗马尼亚:最好的运动鞋选择
2019/09/10 全球购物
保安部任务及岗位职责
2014/02/25 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
担保书格式范文
2015/09/22 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
Go语言基础map用法及示例详解
2021/11/17 Golang