JSONP跨域模拟百度搜索
目录
- 一、什么是JSONP
- 二、JSONP跨域请求
- 三、模拟百度搜索
- 四、JSONP缺点
一、什么是JSONP
JSONP是JSON with padding（填充式JSON或参数式JSON）的简写，是应用JSON的一种新方法，在后来的Web服务中非常流行，JSONP看起来与JSON差不多，只不过是被包含在函数中调用的JSON，就像下面这样：
callback({"name": "王欢"});
SONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面 中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据。下面就是一个典型的JSONP请求。
https://freegeoip.net/json/?callback=handleResponse
这个URL是在请求一个JSONP地理定位服务，通过查询字符串来指定JSONP服务的回调参数是很常见的，就像上面的URL所示，这里指定的回调函数的名字叫做：handleResponse() JSONP是通过动态
<script>元素来使用的，使用时可以为src属性指定一个跨域URL。可以不受限制的从其他域加载资源，因为JSONP是有效的JavaScript代码，所以在请求完成后，即在JSONP响应加载到页面中以后，就会立即执行。
二、JSONP跨域请求
我们知道，同源策略是浏览器的一种安全机制，所谓的源是指协议、域名和端口号，当我们的脚本在运行时，浏览器会检测它所执行的脚本和他所取得的的数据与我们HTML页面是否相同，如果相同，就是同源的，会进行成功的请求，如果他们的源不相同，就是跨域请求。在默认情况下，浏览器是不支持跨域请求的，那么如果我们想要跨域请求，该如何操作呢？
script标签是不受同源策略的限制的，即我们在请求script脚本的时候，无论是在HTML所在的服务器还是其他服务器，它都可以请求到，所以我们就利用script标签的这种性质来进行数据的跨域请求。就来看看JSONP是如何进行跨域请求的。
首先，我们请求一段script代码，这段代码里如果它能调用我们所指定的一个函数，并将数据作为实参传递进来，那么只要我们定义了这个函数并定义了形参，形参就会接收到他的实参来得到数据。举个例子：
假设在脚本中定义了一个getData(data) ，如果现在请求一个脚本，这个脚本能够调用getData()这个函数，并将data 作为实参传递进来，那形参收到的数据就可以进行相应的处理。
<script>
function getData(data){
console.log(data);
}
var script = document.createElement('script');
script.id = 'jsonp';
script.src = 'jsonp.js';
document.body.appendChild(script);
</script>
假设前端已经把函数名告诉了后端，后端就可以调用这个getData() ，并且可以传递信息。在jsonp.html就可以请求到下述jsonp.js文件。
getData({
name: '小王',
age: 20
})
运行得到结果为：
得到了一个Object对象，就是我们所传递的数据。
那么，我们如何告诉服务器getData()这个函数呢？如果我们每次都固定是getData(),我们的开发会很死板，就不能定义其他函数名字。实际上，我们可以通过get请求将我们前端定义的函数名字通过参数告诉后端，后端动态生成这样的一个脚本文件并返回给函数的调用就可以。
百度就有一个这样的接口，我们一起来看看。
打开浏览器百度页面，打开调试工具，看一下NETwork标签下面会监听所有关于浏览器向服务器发送的http请求并查看数据。
在搜索框键入“b”，请求如图：
请求得到的关键字为：
这里的callback函数其实是jquery生成的一个全局函数。得到这个URL后，我们可以保存其有用的信息，并将回调函数换成别的函数：
https://www.baidu.com/sugrec?pre=1&wd=b&req=2&csor=1&cb=getData();
将其输入到地址栏中进行测试：
可以发现，这个回调函数就变成了我们设置的。
三、模拟百度搜索
我们现在就可以通过这个接口去发生JSON来模拟一下百度搜索页面。
我们定义一个全局变量作为接收数据的函数，data就是接收到的数据，一旦getdata()函数被调用，说明我们我们的Jsonp函数就发送完成，此时可以通过removeChild()删除script标签，这样就可以实现每当我们发送一次请求，script标签在接收到数据后就会被删除，在数据处理的时候，getData（）返回给我们的是一个对象，对象里面有一个关键字g,里面对应的是一个数组，数组里面是字符串，我们先将这个数组遍历，然后根据每个元素生成一个li加到input下面的ul就可以，先将ul里面的html清空，这样的话，每次请求的li都是全新的，当keyup出来的时候，首先取到当前input的value值并调用getdata()函数，将wd传进来，就实现了jsonp传递数据的过程。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: relative;
width: 600px;
height: 40px;
}
input {
width: 500px;
height: 40px;
border: 2px solid #4E6EF2;
}
button{
position: absolute;
left: 411px;
top: 0;
width: 95px;
height: 44px;
background-color: #4E6EF2;
border: none;
font-size: 18px;
color: white;
}
ul{
position: relative;
left: -40px;
top: -10px;
width: 411px;
height: 400px;
}
li{
height: 40px;
width: 411px;
line-height: 40px;
font-size: 16px;
list-style: none;
}
</style>
</head>
<body>
<div>
<input type="text" value =''>
<button>百度一下</button>
</div>
<ul></ul>
<script src="jquery.js"></script>
<script>
//
function getData(data){
var script = document.querySelector('#jsonp');
script.parentNode.removeChild(script);
$('ul').html('');
for(var i =0;i<data.g.length;i++){
$('<li>'+data.g[i].q +'</li>').appendTo('ul');
}
}
//动态生成script脚本
function getList(wd){
var script = document.createElement('script');
script.id = 'jsonp';
script.src = 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=26350&req=2&csor=1&cb=getData&wd='+wd;
document.body.appendChild(script);
}
//给
var ipt = document.querySelector('input');
ipt.addEventListener('keyup',function(){
var wd = this.value;
getList(wd);
console.log(wd);
})
</script>
</body>
</html>
效果为：
四、JSONP缺点
JSONP之所以在开发人员中极为流行，是因为它非常简单易用，不过他也有两点不足：
- 首先，
JSONP是从其他域中加载执行代码。如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃JSONP调用之外，没有办法追究。 其次，要确定JSONP请求是否失败并不容易。虽然HTML5给<script>元素新增了一个onerror事件处理程序，但目前还没有得到任何浏览器的支持。为此，开发人员不得不使用计时器检测指定时间内是否接收到了响应。但是毕竟不是每个用户的上网速度和带宽都一样，所以操作起来也不尽人意。
到此这篇关于JSONP跨域模拟百度搜索的文章就介绍到这了,更多相关JSONP跨域模拟百度搜索内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
百度搜索框智能提示案例jsonp
先给大家展示下效果图: 下面一段代码给大家分享了百度搜索框智能提示案例jsonp的知识,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度下拉_sug-jquery</title> <script src="jquery-1.11.3.js"><
-
jQuery使用jsonp实现百度搜索的示例代码
项目实现:还原百度搜索功能: 项目原理:利用json回调页面传参; 什么是jsonp:就是利用<script>标签的src地址,让目标页面回调本地页面,并且带入参数,也解决了跨域问题: 代码如下: html(css代码不提供) <div class="box"> <input type="text" /> <div class="ssk"></div> <button>×&l
-
JSONP解决JS跨域问题的实现
现代编程中前后端都已经是分开部署了,前端有自己的域,后端也有自己的域.由于浏览器同源策略的限制,非同源下的请求,就会产生跨域问题.解决跨域问题的方法有很多种,例如CORS(cross orign resources share)和JSONP.这里我就着重介绍一下jsonp的解决方案. 一:基础概念 同源策略:同一协议,同一域名,同一端口号.只要不满足三者其中一种都是属于跨域问题. 举几个简单的例子 1: https://www.a.com:8080到http://www.a.com:8080的请
-
深入浅析同源与跨域,jsonp(函数封装),CORS原理
目录 同源政策 Ajax请求限制: Ajax 只能向自己的服务器发送请求 同源: 同源政策的目的: 不受同源策略限制: 跨域问题 跨域的原因: 解决跨域问题: 使用 JSONP 解决 解决方法: JSONP JSONP的优缺点: JSONP代码优化: JSONP函数封装: CORS 使用CORS解决 Express框架中跨域的实现: 同源政策 Ajax请求限制: Ajax 只能向自己的服务器发送请求 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 比
-
跨域解决方案Jsonp原理解析
这篇文章主要介绍了跨域解决方案Jsonp原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.什么是Jsonp? Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 为什么我们从不同的域(网站)访问数据需要一个特殊的技术( JSONP )呢?这是因为同源策略. 同源策略,它是由 Netscape 提出的一个著名的安全策略,现在所有支持 Ja
-
JSONP跨域模拟百度搜索
目录 一.什么是JSONP 二.JSONP跨域请求 三.模拟百度搜索 四.JSONP缺点 一.什么是JSONP JSONP是JSON with padding(填充式JSON或参数式JSON)的简写,是应用JSON的一种新方法,在后来的Web服务中非常流行,JSONP看起来与JSON差不多,只不过是被包含在函数中调用的JSON,就像下面这样: callback({"name": "王欢"}); SONP由两部分组成:回调函数和数据.回调函数是当响应到来时应该在页面
-
jQuery Jsonp跨域模拟搜索引擎
效果还不错 就差加上键盘控制了... 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>迷糊网罗</title> <style type="text/css"> * { margin: 0; padding: 0; } form { position: absolute; left: 50%; to
-
jsonp跨域获取百度联想词的方法分析
本文实例讲述了jsonp跨域获取百度联想词的方法.分享给大家供大家参考,具体如下: jsonp原理: 1.Web页面上用<script> 引入 js文件时则不受是否跨域的影响 (不仅如此,我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>.<img>.<iframe>) 2.于是我们把数据放到服务器上,并且数据为json形式(因为js可以轻松处理json数据) 3.因为我们无法监控通过<script&g
-
利用jsonp跨域调用百度js实现搜索框智能提示
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择. 使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript也可以实现跨域调用js. ok,了解了jsonp的原理和应用后,我们看看百度的智能提示是如何做的 在chrome的调试窗口下看看百度搜索发出的请求.当输入关键字"a",请求如图: 用firebug看下请求的参数,如图: 请求方式:get请求 请求参数:wd明显是要搜索的关键字:cb是请求
-
jsonp跨域及实现百度首页联想功能的方法
什么是跨域呢? 比如说ajax必须在自己的域(名)之下,才能进行异步的请求,如果不是在同一个域之下就不能进行请求,会报错.比如说我们用ajax去请求腾讯的API如果我们的这个域不在腾讯那个接口的'白名单'里面,腾讯的接口就会拒绝给我返回数据.但是大多数情况下,我们不可能每次都去去相应的网站申请一个'白名单',这个时候我们就要用到跨域这种方法,跨域有很多方式比如说用iframe但是这种的可操作性太差了,不能操作frame里面的DOM元素.当先最流行的一种的方式是使用jsonp这种方式. 什么是JS
-
JSONP跨域原理以及实现方法详解
目录 前言 一.同源策略和跨域 1.1 同源策略 1.1.1 什么是同源 1.1.2 什么是同源策略 1.2 跨域 1.2.1 什么是跨域 1.2.2 浏览器对跨域请求的拦截 1.2.3 如何实现跨域数据请求 二.JSONP 概述 2.1 JSONP原理 2.2 优点 2.3 缺点 三.JSONP 应用流程 四.JSONP 实现 3.1 简单的实例: 3.2 可靠的 JSONP 实例: 五.JSONP安全性问题 5.1 CSRF攻击 5.2 XSS漏洞 5.3 服务器被黑,返回一串恶意执行的代码
-
关于JSONP跨域请求原理的深入解析
目录 什么是同源策略 什么是JSONP 练习 jsonp的缺点 总结 什么是同源策略 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略. 简单来讲,域名,协议,端口相同.当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面.当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的,即检查是否同源,只有和百度同源的脚本才会被执行.如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问. 什么是J
-
JSONP跨域GET请求解决Ajax跨域访问问题
前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现方法有多种,本例采用jQuery+Ajax,完成后,在本地调试了一切ok,但是部署到服务器上以后就出现问题了,后台服务调用没有响应,怎么回事?代码没怎么改动,唯一修改的地方就是jQuery的ajax方法中的url地址.难道是这里的问题,经过检查和调试,发现原来是同源策略在作怪,我们知道,JavaScript或jQuery是在Web前端开发中经常使用的动态脚本技术.在JavaScript中,有一个很重要
-
借助node实战JSONP跨域实例
一.前言: 浏览器安全是基于同源策略的.所谓同源策略就是三相同: 1.协议相同: 2.域名相同: 3.端口相同. 但,凡事都是有利弊,同源策略也导致了我们想用AJAX跨域请求,但NO!!为了规避这种限制,其中有一方法就是JSONP. JSONP的基本思想:就是通过<script>的src,向服务器请求数据,且这不受同源策略限制(img和iframe的src也是如此):然后服务器将相应的数据放入指定的函数回调名中,返回给前端. 这,就实现了跨域请求信息. 如下图所示: 了解了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