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

什么是跨域呢？

比如说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>

可实现点击联想词跳转

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS跨域请求的问题解析

    JS跨域请求的问题解析

    同源策略 在运行中我们有时会出错是因为我们违反了同源策略,这是一种浏览器所实施的安全措施,用于限制具有不同来源的文档之间的交互.页面的来源由其协议,主机和端口号定义.具有相同来源的资源可以相互完全访问.但是如果具有不相同的源将会拒绝访问. http://www.a.com/a.js http://www.b.com/a.js 这两个之间就不可以互相访问,因为域名的不相同 域名组成 如果上面两个域名想互相访问就需要跨域请求,一般情况下同源政策规定:允许跨源 写入,而不允许跨源 读取这意味着同源政策

  • jsonp跨域获取数据的基础教程

    前言 由于浏览器有同源策略,所以要想获取非同源(协议,域名,端口三者有一不同都算非同源)的页面的数据,就得进行跨域 (1) jsonp原理 由于script标签的src属性可以访问非同源的js脚本,所以通过src属性访问服务器会返回函数的js代码,而我们想要的数据就作为函数参数返回,而我们会先定义这个函数,返回的js代码就可执行 (2) jsonp实现代码 请求页面 <!DOCTYPE html> <html> <head> <title></titl

  • JS中使用cavas截图网页并解决跨域及模糊问题

    前几天给了个需求对浏览器网页进行截图,把网页统计数据图形表等截图保存至用户本地. 首先对于网页截图,我用的是canvas实现,获取你需要截图的模块的div,从而使用canvas对你需要的模块进行截图. 我们先来引入canvas的js文件,js文件获取地址官网主页:http://html2canvas.hertzen.com/ <script type="text/javascript" src="js/html2canvas.js"></scrip

  • Vue.js 中 axios 跨域访问错误问题及解决方法

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起请求时,出现如下错误: Failed to load http://www.test.com/apis/index.php?&act=login: The value of the 'Access-Control-Allow-Origin' headerin the response must no

  • Springboot 实现跨域访问无需使用jsonp的实现代码

    Springboot 实现跨域访问 无需使用jsonp 在springboot的拦截器中添加respone的头信息即可 @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { //String origin = (String) request.getRemoteHost()+":"+re

  • 跨域请求两种方法 jsonp和cors的实现

    在网站后台跨域访问另一服务器时,若被访问服务器未设置response['Access-Control-Allow-Origin'] = '*' 那么将无法获取. jsonp方法 伪造ajax提交请求 请求端 // 基于jsonp // 原理: ajax 不能直接跨域 . //向html中加入script标签 含有访问路径,script标签直接访问路径达到效果 $('.get_service2').click(function () { // 伪造ajax提交请求 $.ajax({ url:'ht

  • 跨域解决之JSONP和CORS的详细介绍

    JSONP跨域和CORS跨域 什么是跨域? 跨域:指的是浏览器不能执行其它网站的脚本,它是由浏览器的同源策略造成的,是浏览器的安全限制! 同源策略 同源策略:域名.协议.端口均相同. 浏览器执行JavaScript脚本时,会检查这个脚本属于那个页面,如果不是同源页面,就不会被执行. JSONP跨域 只支持GET请求,不支持POST等其它请求,也不支持复杂请求,只支持简单请求. CORS跨域 支持所有的请求,包含GET.POST.OPTOIN.PUT.DELETE等.既支持复杂请求,也支持简单请求

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

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

  • vue项目中jsonp跨域获取qq音乐首页推荐问题

    自己利用业余时间,为了更加数据vue和es6的特性,自学着和做了vue的移动端webapp项目.在项目中也是遇到了很多的问题. 接下来,先说一下怎么实现这个需求,然后再说我遇到的问题,以用来纠错. 第一步,再vue项目中引入 jsonp ,并进行 jsonp 的封装. 使用 npm 引入,输入: npm install jsonp --save 安装好之后可以在自己的 package.json 文件中查看是否有此依赖.如下图所示: 如果有红框中显示的内容,说明安装成功,进入下一步封装: impo

  • jsonp跨域获取百度联想词的方法分析

    本文实例讲述了jsonp跨域获取百度联想词的方法.分享给大家供大家参考,具体如下: jsonp原理: 1.Web页面上用<script> 引入 js文件时则不受是否跨域的影响 (不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>.<img>.<iframe>) 2.于是我们把数据放到服务器上,并且数据为json形式(因为js可以轻松处理json数据) 3.因为我们无法监控通过<script&g

  • JSONP跨域模拟百度搜索

    JSONP跨域模拟百度搜索

    目录 一.什么是JSONP 二.JSONP跨域请求 三.模拟百度搜索 四.JSONP缺点 一.什么是JSONP JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法,在后来的Web服务中非常流行,JSONP看起来与JSON差不多,只不过是被包含在函数中调用的JSON,就像下面这样: callback({"name": "王欢"}); SONP由两部分组成:回调函数和数据.回调函数是当响应到来时应该在页面

  • JSONP跨域GET请求解决Ajax跨域访问问题

    前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要

  • Vue2.0 vue-source jsonp 跨域请求

    Vue2.0 vue-source jsonp 跨域请求

    本文介绍了Vue2.0 vue-source jsonp 跨域请求,分享给大家,希望对大家有所帮助 以调用百度的输入提示接口为例 main.js import Vue from 'vue' import VueResouse from 'vue-resource' import App from './App.vue' Vue.use(VueResouse) new Vue({ el: '#app', render: h => h(App) }); App.vue <script> ex

  • 基于vue-resource jsonp跨域问题的解决方法

    最近在学习vue.js 碰到个ajax跨域请求的问题,之前知道可以用jsonp解决,但是一直没实践过,这次用发现里面好多问题,所以现在记录下来,希望可以给刚接触使用jsonp的同学一点帮助! 关于什么是jsonp,以及为什么要用jsonp我就不多说了,不明白的同学自行百度一下. 我们先来说一下jQuery里面的jsonp请求,这搞懂了 vue-resource 里面的jsonp就容易明白了. 这里我以json数据为例,首先我们通过 $.get可以直接得到一个我们想要的对象,但是用 jsonp 就

  • 关于JSONP跨域请求原理的深入解析

    关于JSONP跨域请求原理的深入解析

    目录 什么是同源策略 什么是JSONP 练习 jsonp的缺点 总结 什么是同源策略 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略. 简单来讲,域名,协议,端口相同.当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面.当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行.如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问. 什么是J

  • AngularJS实现的JSONP跨域访问数据传输功能详解

    本文实例讲述了AngularJS实现的JSONP跨域访问数据传输功能.分享给大家供大家参考,具体如下: 大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不是一回事儿 JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议.我们拿最近比较火的谍战片来打个比方,JSON是地下党们用来书写和交换情报的"暗号

  • jsonp跨域请求数据实现手机号码查询实例分析

    本文实例讲述了jsonp跨域请求数据实现手机号码查询的方法.分享给大家供大家参考,具体如下: 前言 网上有很多开放的api,我们在本地通过ajax获取数据时,总会碰到一个问题,那就是跨域!如果不借助php等,仅仅通过js怎么解决跨域的问题呢?或许jsonp是个不错的选择. 知识准备 之前一篇<说说JSON和JSONP 也许你会豁然开朗>对jsonp已经介绍的很详细了,这里就不多介绍了,直接上实例吧 代码: <!DOCTYPE HTML> <html> <head&

随机推荐