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 相关文章推荐
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
详解vue+css3做交互特效的方法
Nov 20 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 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中Date获取时间不正确怎么办
2008/06/05 PHP
PHP-MySQL教程归纳总结
2008/06/07 PHP
php 应用程序安全防范技术研究
2009/09/25 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
Laravel5.5 实现后台管理登录的方法(自定义用户表登录)
2019/09/30 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
JS 表单验证大全
2011/11/23 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
Javascript 构造函数详解
2014/10/22 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
Python群发邮件实例代码
2014/01/03 Python
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Python导入oracle数据的方法
2015/07/10 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
python实现杨氏矩阵查找
2019/03/02 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
Python tkinter常用操作代码实例
2020/01/03 Python
PyTorch 普通卷积和空洞卷积实例
2020/01/07 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
励志演讲稿300字
2014/08/21 职场文书
付款承诺函范文
2015/01/21 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript