详细分析jsonp的原理和实现方式(jsonp的使用)

推荐整理分享详细分析jsonp的原理和实现方式(jsonp的使用)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jsonp实现原理解析,jsonp的使用,jsonp是什么,怎样实现的,json的parseobject,jsoncpp,jsonp用法,jsonp实现原理解析,jsonp用法,内容如对您有帮助，希望把文章链接给更多的朋友！

针对跨域问题，本文主要给大家详细分析一下jsonp的原理，希望能够给你提供到帮助。

详细分析jsonp的原理和实现方式

一：跨域问题。

二，跨域产生的原因

Js是不能跨域请求。出于安全考虑，js设计时不可以跨域。

什么是跨域：

1、域名不同时。

2、域名相同，端口不同。

只有域名相同、端口相同时，才可以访问。

可以使用jsonp解决跨域问题。

三，跨域失败的案例 3.1，同源策略

首先基于安全的原因，浏览器是存在同源策略这个机制的，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。看起来不知道什么意思，实践一下就知道了。

3.2，随便建两个网页

一个端口是，一个，按照定义它们是不同源的。

3.3，用jQuery发起不同源的请求

在端口的网页上添加一个按钮，Click事件随便发起两个向端口为域的请求。

根据同源策略，很明显会悲剧了。浏览器会阻止，根本不会发起这个请求。（not allowed by Access-Control-Allow-Origin）

OK，原来jsonp是要解决这个问题的。

换句话就是说在一个src中或者一个url中直接去请求了另一个项目的json数据。

例如在端口是的项目中的页面的url中直接去请求了一个 4.1，启发

我们有时候在项目中经常能看到这样的代码

这样即使不在同一个项目中，也可以请求成功。就是利用了这个漏洞，或者说是技术吧，来实现的宽裕的请求。

4.2，方法（案例一） 4.2.1，利用script获取不同源的json

既然它叫jsonp，很明显目的还是json，而且是跨域获取。根据上面的分析，很容易想到：利用js构造一个script标签，把json的url赋给script的scr属性，把这个script插入到dom里，让浏览器去获取。实践：

添加一个按钮事件来测试一下：

首先，第一个浏览器， 网页上用script标签来请求这个这个Url也是OK的，但是最下面报js语法错误了。原来用script标签加载完后，会立即 把响应当js去执行，很明显{"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"}不是合法的js语句。

4.2.2,利用script获取异域的jsonp

显然，把上面的json放到一个回调方法里是最简单的方法。例如，变成这样：

如果存在jsonpcallback这个方法，那么jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})就是合法的js语句。

在这里需要注意的就是在原来的json格式的数据{"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"}要封装成jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})这样一个脚本，这样才会被回调的时候解析到，否则解析也是失败的。

由于服务器不知道客户端的回调是什么，不可能hard code成jsonpcallback，所以就带一个QueryString让客户端告诉服务端，回调方法是什么，当然，QueryString的key要遵从服务端的约定，上面的是”callback“。

添加回调函数：

把前面的方法稍微改改参数：

OK，服务器返回jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的 东方"})，我们也写了jsonpcallback方法，当然会执行。OK顺利获得了json。没错，到这里就是jsonp的全部。

4.2.3，利用jQuery获取jsonp

上面的方式中，又要插入script标签，又要定义一个回调，略显麻烦，利用jQuery可以直接得到想要的json数据，同样是上面的jsonp：

得到的结果跟上面类似。

4.2.4，总结

一句话就是利用script标签绕过同源策略，获得一个类似这样的数据，jsonpcallback是页面存在的回调方法，参数就是想得到的json。

jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})

4.3，案例二 4.3.1，简单应用

程序A中sample的部分代码：

程序B中test.js的代码：1 //调用callback函数，并以json数据形式作为阐述传递，完成回调2 callback({message:"success"}); 这其实就是JSONP的简单实现模式，或者说是JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义吧。

一般情况下，我们希望这个script标签能够动态的调用，而不是像上面因为固定在html里面所以没等页面显示就执行了，很不灵活。我们可以通过javascript动态的创建script标签，这样我们就可以灵活调用远程服务了。

4.3.2，简单应用的升级以一

程序A中sample的部分代码：

程序B的test.js代码不变，我们再执行下程序，是不是和原来的一样呢。如果我们再想调用一个远程服务的话，只要添加addScriptTag方法，传入远程服务的src值就可以了。这里说明下为什么要将addScriptTag方法放入到window.onload的方法里，原因是addScriptTag方法中有句document.body.appendChild(script);，这个script标签是被添加到body里的，由于我们写的javascript代码是在head标签中，document.body还没有初始化完毕呢，所以我们要通过window.onload方法先初始化页面，这样才不会出错。

这样这个 的回调函数，但是我现在要的就是result而不是其它的方法，所以在这里自己定义回调方法。而不是写死的。可能下一次我就改成result1，result2，result3，等了只要自己把回调方法的名称改一下就行了。

4.4.4,jquery对jsonp的支持

jQuery框架也当然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法(详细可以参考

详解webpack + react + react-router 如何实现懒加载 在Webpack1中主要是由bundle-loader进行懒加载，而Webpack2中引入了类似于SystemJS的System.import语法，首先我们对于System.import的执行流程进行简单阐述：Webpack会

three.js中文文档学习之如何本地运行详解 前言本文属于系列问题，需要的朋友们开始之前可以参考以下的两篇文章：1、three.js中文文档学习之创建场景2、three.js中文文档学习之通过模块导入如

Three.js开发实现3D地图的实践过程总结 前言本文主要介绍Three.js的开发基础和基本原理，以及如何实现3D全景图。想在web端实现3D全景图的效果，除了全景图片、WebGL外，还需要处理很多细节。