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 新手24条实用建议[TUTS+]
Jun 21 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
Mar 03 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
Angular设置别名alias的方法
Nov 08 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
vue-test-utils初使用详解
May 23 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
用mysql_fetch_array()获取当前行数据的方法详解
2013/06/05 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
jquery validate使用攻略 第四步
2010/07/01 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
解析javascript中鼠标滚轮事件
2015/05/26 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
详解AngularJS ui-sref的简单使用
2017/04/24 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
[53:52]OG vs EG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
python生成指定长度的随机数密码
2014/01/23 Python
Python实现抓取网页并且解析的实例
2014/09/20 Python
手把手教你进行Python虚拟环境配置教程
2020/02/03 Python
基于Python第三方插件实现西游记章节标注汉语拼音的方法
2020/05/22 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
文秘应聘自荐书范文
2014/02/18 职场文书
布达拉宫导游词
2015/02/02 职场文书
企业党建工作总结2015
2015/05/26 职场文书
离职告别感言
2015/08/04 职场文书
小学班主任教育随笔
2015/08/15 职场文书