重庆小程序开发_JSONP原理及应用实例详解

JSONP原理及应用实例详解       这篇文章主要介绍了JSONP原理及应用实例详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

JSONP 被用于跨域获取数据。在讲解它之前,先讲讲它与 JSON 之间的区别

什么是JSON?

JSON 是一种基于文本的数据交换方式,或者叫做数据描述格式。

其优点是:

1、基于纯文本,跨平台传递极其简单;

2、Javascript 原生支持,后台语言几乎全部支持;

3、轻量级数据格式,占用字符数量极少,特别适合互联网传递;

4、可读性较强,虽然比不上 XML 那么一目了然,但在合理的依次缩进之后还是很容易识别的;

5、容易编写和解析,当然前提是你要知道数据结构;

JSON 的缺点当然也有,跨域无法获取数据,而 JSONP 的出现正好弥补了这一缺陷

什么是JSONP?

JSONP 是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议,其本质就是 js 文件。

JSONP的客户端具体实现
Web页面上调用js文件时不受是否跨域的影响(不仅如此,凡是拥有"src"这个属性的标签都拥有跨域的能力,比如 script 、 img 、 iframe ) 跨域js文件中的代码(当然指符合web脚本安全策略的),web页面也是可以无条件执行的。

接下来将以具体实例解释 JSONP 的原理,首先确保你的电脑上安装了nodejs

1.建立本地 web 服务器

新建文件夹 jsonp, 进入该文件夹内打开命令行工具

npm install koa koa-static

新建 index.js 文件

// index.js
const Koa = require('koa')
const app = new Koa()
app.use(require('koa-static')(__dirname + '/public'))
app.listen(3000)
<, somejsonp.js文件

// 
 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1.0" 
 meta http-equiv="X-UA-Compatible" content="ie=edge" 
 title Document /title 
 /head 
 body 
 script src="libs/jquery/2.1.4/jquery.min.js" /script 
 script 
 var localHandler = function(data){
 alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result);
 /script 
 script type="text/javascript" src="./somejsonp.js" /script 
 /body 
 /html 

3.然后回到 jsonp 文件夹,输入命令node index.js后,用浏览器打开p>

动态获取 JSONP 的数据,就是在页面中动态插入一段script标签,scr中包含路径及参数,这样后台可根据参数动态生成JS文件,涉及后台实现,这里不做过多阐述。

JSONP 在 JQuery 中的具体实现

jquery 中对于 jsonp 的封装也是基于以上原理,下面是基于 jquery 的代码

<

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1.0" 
 meta http-equiv="X-UA-Compatible" content="ie=edge" 
 title Document /title 
 /head 
 body 
 script src="libs/jquery/2.1.4/jquery.min.js" /script 
 script 
 $.ajax({
 url: 'somejsonp.js',
 dataType: "jsonp",
 jsonp: "callback",
 jsonpCallback: "localHandler",
 success: function (data) {
 alert(data.result)
 /script 
 /body 
 /html 

jquery 动态生成script标签,并定义好方法。前提是jsonpCallback的方法名与引入的js文件方法名一致。

重新刷新页面即可看到弹出框中获取的 jsonp 中的数据。

简单描述就是——先定义一个方法,然后引入外部JS调用这个方法并携带数据。

具体示例

在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。 而JSONP就是通过script节点中的src属性调用跨域的请求。当我们通过JSONP模式请求跨域资源时,服务器返回给客户端一段javascript代码,这段javascript代码自动调用客户端回调函数。

前端

 !DOCTYPE html 
 head 
 title jsonp /title 
 meta http-equiv="Content-Type" content="text/html; charset=utf-8"/ 
 /head 
 body 
 script 
 //动态创建script标签,并请求
 function addScriptTag(src){
 var script = document.createElement('script');
 script.setAttribute('type', 'text/javascript');
 script.src = src;
 document.body.appendChild(script);
 //在onload后,跨域请求
 window.onload = function(){
 addScriptTag('jsonp callback=test');
 //回调函数,必须为全局,不然会报错
 function test(data){
 alert(data.name);
 /script 
 /body 
 /html 

搭建node server

//告诉Node.js引入http模块给该服务器应用使用
var http = require('http');
//引入url模块解析url字符串
var url = require('url');
//引入querystring模块处理query字符串
var querystring = require('querystring');
//创建新的HTTP服务器
var server = http.createServer();
//通过request事件来响应request请求
server.on('request',function(req, res){
 var urlPath = url.parse(req.url).pathname;
 var qs = querystring.parse(req.url.split(' ')[1]);
 if(urlPath === '/jsonp' qs.callback){
 res.writeHead(200,{'Content-Type':'application/json;charset=utf-8'});
 var data = {
 "name": "Monkey"
 data = JSON.stringify(data);
 var callback = qs.callback+'('+data+');';
 res.end(callback);
 else{
 res.writeHead(200, {'Content-Type':'text/html;charset=utf-8'});
 res.end('Hell World\n');
//监听8080端口
server.listen('8080');
//用于提示我们服务器启动成功
console.log('Server running!');

运行node server之后,在浏览器打开上面所写的html页面,运行结果为:

以上就是对于 JSONP 的简洁描述,希望对你有帮助。也希望大家多多支持凡科。