JSONP原理详解及应用实例

JSONP用于跨域获取数据。在解释它之前，我们先来谈谈它和JSON的区别

什么是JSON？

JSON是一种基于文本的数据交换方法，或数据描述格式。

它的优点是：

1.基于纯文本，跨平台传输极其简单；

2、Javascript原生支持，几乎所有后台语言都支持；

3.轻量级数据格式，占用字符很少，特别适合互联网传输；

4.可读性强。虽然不如XML清晰，但经过合理的缩进，还是很容易识别的；

5、易于编写和分析，当然前提是你需要知道数据结构；

当然JSON也有一些缺点，比如跨域数据无法获取，JSONP的出现正好弥补了这个缺点

什么是JSONP？

JsONP是开发者匠心打造的非官方跨域数据交换协议，其本质是JS文件。

JSONP的客户端特定实现

在网页上调用js文件时，不受是否跨域的影响(不仅如此，所有属性为‘src’的标签都有跨域的能力，比如script、img、iframe)。js文件中的代码跨域(当然符合web脚本的安全策略)，网页可以无条件执行。接下来我们就用具体的例子来说明JSONP的原理。首先，确保您的计算机上安装了nodejs

1.建立本地网络服务器

创建一个新的文件夹jsonp，并输入它来打开命令行工具

Npm安装koa koa-static创建新的index.js文件

//index . jsconst KOA=require(' KOA ')const app=new KOA()app . use(require(' KOA-static ')(_ _ dirname/' public ')app . listen(3000)2。创建新的公共文件夹后，输入文件夹并创建index.html。

//index.html！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 dy脚本src=' http 3360http://apps . bdimg.com/libs/Jquery/2 . 1 . 4/Jquery . min . js '/script script var local handler=function(数据};/script script type=' text/JAVAScript ' src=' http :/somejsonp . js '/script/body/html//somejsonp . jslocalhender({ ' result ' : '我是远程js带来的数据' })；3.然后回到jsonp文件夹，输入命令节点index.js，用浏览器打开http://localhost:3000，看到浏览器窗口弹出的js文件中的结果，也就是我们得到了js的数据。这是jsonp的基本原理。

动态获取JSONP数据就是在页面中动态插入一个脚本标签，scr中包含了路径和参数，这样后台就可以根据参数动态生成JS文件，这就涉及到后台实现了，这里不再赘述。

JQuery中JSONP的实现

jquery中jsonp的封装也是基于上述原理，下面是基于jquery的代码

修改index.html

！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 dy script src=' http 3360http://apps . bdimg.com/libs/jquery/2 . 1 . 4/jquery . min . js '/script script $。Ajax({ URL : ' http://localhost :3000/somejsonp . js '，dataType: 'jsonp '，jsonp: '回调'，jsonp回调： '本地处理程序'，success :函数(数据){alert(数据。result)} })/script/body/html jquery动态生成脚本标记并定义方法。在jsonpCallback的方法名与导入的js文件的方法名一致的前提下。

再次刷新页面，查看弹出框中获得的jsonp中的数据。

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

具体例子

在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、脚本等标签是个例外，这些标签可以通过科学研究委员会属性请求到其他服务器上的数据。而JSONP就是通过脚本节点中的科学研究委员会属性调用跨域的请求。当我们通过JSONP模式请求跨域资源时，服务器返回给客户端一段爪哇岛描述语言代码，这段爪哇岛描述语言代码自动调用客户端回调函数。

前端

！DOCTYPE html head title jsonp/title meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/head dyscript//动态创建脚本标签，并请求函数addScriptTag(src){ var script=document。create element(' script ')；script.setAttribute('type '，' text/JavaScript ')；script . src=src document . body . appendchild(脚本);};//在装载后，跨域请求窗户。onload=function(){ addScriptTag(' http://127。0 .0 .1:8080/jsonp？回调=测试');};//回调函数，必须为全局，不然会报错功能测试（数据){ alert(数据。姓名)；};/脚本/正文/html搭建节点服务器

//告诉Node.js引入超文本传送协议(超文本传输协议的缩写)模块给该服务器应用使用var http=require(' http ')；//引入全球资源定位器(统一资源定位符)模块解析全球资源定位器(统一资源定位符)字符串var URL=必选(' URL ')；//引入参数模块处理询问字符串var查询字符串=require('查询字符串')；//创建新的超文本传送协议服务器var服务器=http。CreateServer()；//通过请求事件来响应请求请求server.on('request '，function(req，RES){ var urlPath=URL。解析(请求。网址).路径名；var QS=查询字符串。解析(请求。网址。拆分(？))[1]);if(urlPath==='/jsonp ' QS。回调){ RES .写头(200，{ ' Content-Type ' : '应用/JSON；charset=utf-8 ' })；定义变量数据={ ' name ' : ' Monkey ' }；data=JSON.stringify(数据);定义变量回调=QS。回调'('数据')；'；res.end(回调);} else{ res.writeHead(200，{ ' Content-Type ' : ' text/html；charset=utf-8 ' })；res.end('地狱世界\ n ')；}});//监听8080端口服务器。听(' 8080 ')；//用于提示我们服务器启动成功控制台。日志('服务器正在运行!');运行节点服务器之后，在浏览器打开上面所写的超文本标记语言页面，运行结果为：

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