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

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

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

一：跨域问题。

二，跨域产生的原因

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

什么是跨域：

1、域名不同时。

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

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

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

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

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

3.2，随便建两个网页

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

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

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

rush:xhtml;"> $("#getotherDomainThings").click(function () { $.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js",function (data) { console.log(data) })

$.get("http://localhost:2701/home/index",function (data) {
console.log(data)
})
})

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

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

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

例如在端口是8080的项目中的页面的url中直接去请求了一个这个语句，而这个category.json就在8081的webapp的目录下，就会产生跨域请求的提示。

四，跨域的解决方法 4.1，启发

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

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

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

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

").attr("src",src).appendTo("body") }

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

首先，第一个浏览器，http://localhost:2701/home/somejson这个Url的确是存在一个json的，而且在 2698网页上用script标签来请求这个2701这个Url也是200OK的，但是最下面报js语法错误了。原来用script标签加载完后，会立即 把响应当js去执行，很明显{"Email":"[e-mail]","Remark":"我来自遥远的东方"}不是合法的js语句。

4.2.2,利用script获取异域的jsonp

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

如果存在jsonpcallback这个方法，那么jsonpcallback({"Email":"[e-mail]","Remark":"我来自遥远的东方"})就是合法的js语句。

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

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

添加回调函数：

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

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

4.2.3，利用jQuery获取jsonp

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

得到的结果跟上面类似。

4.2.4，总结

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

jsonpcallback({"Email":"[e-mail]","Remark":"我来自遥远的东方"})

4.3，案例二 4.3.1，简单应用

程序A中sample的部分代码：

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

这样这个路径就可以动态的变化了。

4.3.3，简单应用的升级二

上面的例子是最简单的JSONP的实现模型，不过它还算不上一个真正的JSONP服务。我们来看一下真正的JSONP服务是怎么样的，比如Google的ajax搜索接口：

q=?这个问号是表示你要搜索的内容，最重要的是第二个callback=?这个是正如其名表示回调函数的名称，也就是将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调。有点罗嗦了，还是看看实现代码吧：

rush:xhtml;">