jsonp跨域及实现百度首页联想功能的方法


Posted in Javascript onAugust 30, 2018

什么是跨域呢?

比如说ajax必须在自己的域(名)之下,才能进行异步的请求,如果不是在同一个域之下就不能进行请求,会报错。比如说我们用ajax去请求腾讯的API如果我们的这个域不在腾讯那个接口的'白名单'里面,腾讯的接口就会拒绝给我返回数据。但是大多数情况下,我们不可能每次都去去相应的网站申请一个'白名单',这个时候我们就要用到跨域这种方法,跨域有很多方式比如说用iframe但是这种的可操作性太差了,不能操作frame里面的DOM元素。当先最流行的一种的方式是使用jsonp这种方式。

什么是JSONP

jsonp是英文为json with padding的简称。简单地来说jsonp就是script标签,通常的我们把script,link,img叫做资源标签,也就是能连接资源的意思。只要记住了jsonp就是script标签就好了。下面我们来说下一部分:

script标签怎么引入数据

我们如果知道操作系统并不是靠后缀名来识别一个文件的,是靠文件里面的内容来识别的,后缀名知识更利于第三方的软件进行查看。比如说我们把a.txt改为a.png那么我门用图片查看器打开的时候也是显示的图片不存在的(如果学过Linux的同学会更好的理解)。【有兴趣的同学可以尝试这把一个js文件的后缀改为其他格式再引入试试】。那么我们就解决的script如何引入数据的问题了,也就是说我们可以用script标签引用一个json或者.php的资源文件.

就算能引入资源,那么资源怎么使用呢

先举个简单地例子,比如我们在一个a.json定义了下面的一个变量

"text";

我们在HTML中去加载它,然后去执行,如下代码:

<script src="./a.json"></script>
<script>
alert(str); //text
</script>

这样是能正确执行了,但是我们也知道json数据中并没有定义什么变量和方法的,这个就好像下面的方式:

var str="text";

我们在HTML中去加载它,然后去执行,如下代码:

<script src="./a.json"></script>
<script>
alert(str); //error
</script>

这样显然是会报错的,那么跨域解决之后就要解决怎么使用这个资源的问题了。

我们先和后台定义一个方式,把所有的数据作为一个函数的参数去调用函数,当然这个函数是我们预先定义好的了,如下面的格式:

function solve(data){
//使用数据
}
<script src="./a.json"></script>

下面我们来看看a.json是怎么定义的

solve(100);
solve({});
//相当于a.json里面的数据作为参数传递到了solve函数里面,然后,在solve函数里面操作这个数据就可以了

资源里面要有几个方法

先看下面的例子,当我们引入一个PHP动态资源的时候

<?php
$t = isset($_GET['t']) ? $_GET['t'] : 'num';
$a = "111";
$b = "aaa";
if ($t == 'num') {
$data = json_encode($a);
} else {
$data = json_encode($b);
}
echo solve($data)

比如我们有两个按钮一个按钮执行的时候要求,收到$a另一个要求收到$b,那我们应该怎么搞?在pho文件中加一个solve()?这样虽然是可取的,如果有n种请求呢,只要加n个方法,这样肯定是不行的。我们怎么解决呢?有一个很好的方法就是在请求的时候就把函数名字加进去,例如下面的方式:

<?php
$t = isset($_GET['t']) ? $_GET['t'] : 'num';
$callback = isset($_GET['callback']) ? $_GET['callback'] : 'fn1';

$arr1 = array('111111','22222222','33333333','4444444','555555555555555555555');
$arr2 = array('aaaaaaaaaaaa','bbbbbbbb','cccccccccccc','ddddddddd','eeeeeeeeeeee');

if ($t == 'num') {
$data = json_encode($arr1);
} else {
$data = json_encode($arr2);
}

echo $callback.'('.$data.');';

这样就能很好的规避这个问题了。

好了,如果上面的东西你都连接了,那么你就差不多知道什么是跨域和怎么解决跨域了,那么光说不练还是不好的,我们就用百度的搜索API来简单联系一下。

当然啦,还有一个重要的问题,jsonp加载的时候应该是动态加载的,我们应该用代码创建。

jsonp跨域实现百度首页联想功能

主要思路是利用jsonp的跨域,使用百度后台接口,根据input框的内容,向后台拿数据,然后展示在搜索框下面,并且li使用的是a标签包裹,基本实现了和百度首页收缩然后跳转的功能

结果截图

<script>
   var timer = null // 防抖动
   var domInput = document.getElementById('input')
   var domul = document.getElementsByTagName('ul')[0]
   domInput.oninput = function (e) {
    clearTimeout(timer) //防抖动
    timer = setTimeout(function () {
     var domScript = document.createElement('script')
     domScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+ e.target.value +'&cb=jsonpCb' // jsonp实现
     document.body.appendChild(domScript)
    }, 100)
   }
   function jsonpCb (data) { // jsonp的回调函数的实现
    let result = ''
    data.s.forEach(element => {
     result += '<li><a href= ' + 'https://www.baidu.com/s?wd=' + element + '>' + element +'</a></li>'
    });
    domul.innerHTML = result
   }
  </script>

jsonp跨域及实现百度首页联想功能的方法

可实现点击联想词跳转

jsonp跨域及实现百度首页联想功能的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中SQL语句的应用实现
May 04 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 Javascript
Jquery插件之多图片异步上传
Oct 20 Javascript
jQuery选择器全集详解
Nov 24 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 #Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 #Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 #Javascript
详解React native fetch遇到的坑
Aug 30 #Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 #Javascript
原生JS实现简单的倒计时功能示例
Aug 30 #Javascript
JavaScript fetch接口案例解析
Aug 30 #Javascript
You might like
php中cookie的作用域
2008/03/27 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
JQuery 写的个性导航菜单
2009/12/24 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
nuxt静态部署打包相对路径操作
2020/11/06 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
简单了解什么是神经网络
2017/12/23 Python
Python常见字典内建函数用法示例
2018/05/14 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
python 对key为时间的dict排序方法
2018/10/17 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
马来西亚网上购物:Youbeli
2018/03/30 全球购物
美国网上书店:Barnes & Noble
2018/08/15 全球购物
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
Internet体系结构
2014/12/21 面试题
自考生毕业自我鉴定
2013/10/10 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
2014年教育工作总结
2014/11/26 职场文书
幼儿园庆六一主持词
2015/06/30 职场文书
《检阅》教学反思
2016/02/22 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript