`
javaeyetodj
  • 浏览: 431485 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

jsonp

 
阅读更多

 转自:http://www.cnblogs.com/lemontea/archive/2012/12/11/2812268.html

jsonp详解

json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。

同源策略

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

1.随便建两个网页

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

image_thumb4

2.用jQuery发起不同源的请求

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

$("#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)

image_thumb8

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

script标签的跨域能力

不知道大家知不知道CDN这个东西,例如微软的CDN,使用它,我们的网页可以不提供jQuery,由微软的网站帮我们提供:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>

回到我们的2698端口的网页,上面我们在Click事件里有一个对2701端口域的jQuery文件的请求,这次使用script标签来请求。

<script type="text/javascript" src="http://localhost:2701/Scripts/jquery-1.4.4.min.js"></script>

当然,200,OK了

image_thumb15

同样是端口2698的网页发起对2701域的请求,放在script里设置scr属性的OK了,另一个方式就悲剧。利用script的跨域能力,这就是jsonp的基础。

利用script获取不同源的json

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

function CreateScript(src) {
    $("<script><//script>").attr("src", src).appendTo("body")
}

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

$("#getJsonByHand").click(function () {
    CreateScript("http://localhost:2701/home/somejson")
})

image_thumb21

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

利用script获取异域的jsonp

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

image_thumb[3]

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

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

添加回调函数:

function jsonpcallback(json) {
    console.log(json)
}

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

$("#getJsonpByHand").click(function () {
    CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")
})

image_thumb[8]

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

利用jQuery获取jsonp

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

$("#getJsonpByJquery").click(function () {
    $.ajax({
        url: 'http://localhost:2701/home/somejsonp',
        dataType: "jsonp",
        jsonp: "callback",
        success: function (data) {
            console.log(data)
        }
    })
})

得到的结果跟上面类似。

总结

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

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

到这里不免产生一个疑惑,同源策略是基于安全的原因建立的,发起不同源的请求是被认为不安全的,不可以接受的,但为什么这样绕一个小圈子就可以接受呢?这样就安全了吗?感觉就像洗澡时怕被人看见,把门关上,但侧面的大窗户却是打开的,这样做有意义吗?元芳你怎么看?

分享到:
评论

相关推荐

    json和jsonp数据格式返回

    JSON(JavaScript Object Notation)和JSONP(JSON with Padding)是两种常见的数据交换格式,尤其在Web开发中广泛使用。本文将深入探讨这两种格式的特点、用途以及它们在跨域数据请求中的作用。 **1. JSON简介** ...

    JSONP解决跨域问题

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`&lt;script&gt;`标签可以跨域请求资源的特性,为了解决JavaScript在浏览器端由于同源策略限制无法直接访问不同源的HTTP请求的问题。在本场景中,前端使用...

    Ajax跨域请求解决方案-JSONP

    然而,Ajax技术在实现动态网页交互时常常需要跨越这个限制,这时就引入了JSONP(JSON with Padding)作为跨域请求的一种解决方案。本文将详细介绍JSONP的工作原理以及如何在ASP.NET网站开发中应用JSONP解决Ajax跨域...

    详解如何在Vue项目中发送jsonp请求

    在页面a中由前端发送一个jsonp请求到客户方,得到一个token值 前端得到token值后向自己后端发送一个请求,后端根据token去redis(token的值就是redis里的key)里取值(key=token的值,value=用户信息等)判断用户是否已...

    jsonp示例2则

    在本示例中,我们将深入探讨JSONP的工作原理,以及如何使用Python来实现JSONP服务。 **JSONP的原理** JSONP的核心思想是通过动态插入`&lt;script&gt;`标签,其`src`属性指向提供数据的服务端URL。服务端返回的不是标准的...

    使用JSONP完成HTTP和HTTPS之间的跨域访问

    - **JSONP**:一种允许从一个域加载另一个域中的脚本的技术,它通过动态创建`&lt;script&gt;`标签并插入到DOM中来实现。 - **跨域限制**:浏览器的安全策略之一,限制了从一个源加载的脚本获取或设置另一个源上的资源的...

    JSONP简单调用实例

    JSONP简单调用实例。ASP.NET和纯HTML。jQuery的$.ajax的调用!jsonP说白了,就是在json字符串外面包上一个:参数名称+左右括弧!只是包了个:jsonpCallback() 而已! 相关文章:...

    纯servlet实现JSONP

    在这个纯Servlet实现JSONP的例子中,我们将深入理解JSONP的工作原理,以及如何在Java的Servlet环境中实现这一功能。 首先,让我们了解JSONP的基本概念。JSON(JavaScript Object Notation)是一种轻量级的数据交换...

    jsonp原理.txt

    ### JSONP原理详解 #### 一、什么是JSONP? JSONP(JSON with Padding)是一种用于解决浏览器同源策略限制的方法,允许网页从不同域名的服务器上加载数据。它利用了`&lt;script&gt;`标签不受同源策略限制的特点来实现...

    跨域访问解决方法-jsonp

    为了解决这个问题,开发者通常采用JSONP(JSON with Padding)技术。本文将详细探讨JSONP的工作原理以及如何在实际项目中使用它来跨域获取JSON数据。 ### JSONP简介 JSONP全称为"JSON Padding",它并不是JSON的一...

    Ajax结合Jsonp实例

    **Ajax与Jsonp结合在Jquery中的应用** Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个网页的情况下,与服务器进行数据交互,提升用户体验。而Jsonp(JSON with Padding)是解决浏览器同源策略...

    html通过 ajax jsonp跨域请求接收和传送数据

    2. **JSONP跨域**: JSONP的工作方式不同,它不依赖于XMLHttpRequest对象。首先,客户端在HTML页面中定义一个全局函数,如`handleData(data)`。然后,创建一个`&lt;script&gt;`标签,将`src`属性设置为服务器的URL,URL中...

    js跨域jsonp的使用

    然而,为了实现数据交互,开发者们找到了一种名为JSONP(JSON with Padding)的解决方案。本文将深入讲解JSONP的原理及其在解决跨域问题中的应用。 ### JSONP 原理 JSONP 的全称是“JSON with Padding”,它并非一...

    Jsonp+asp.net

    在标题"Jsonp+asp.net"中,我们可以理解为这个项目或教程是关于如何在ASP.NET环境下使用JSONP与前端交互数据的。ASP.NET是微软开发的一种Web应用程序框架,它提供了丰富的功能和工具来构建动态网站、Web应用和服务。...

    Jsonp和java操作

    JSONP (JSON with Padding) 是一种跨域数据交互协议,主要应用于JavaScript中,用来解决浏览器的同源策略(SOP)限制。同源策略限制了JavaScript只能与相同协议、相同域名、相同端口的源进行交互,但JSONP巧妙地利用...

    利用JQuery jsonp实现Ajax跨域请求json数据

    但为了实现数据交互,开发者常使用JSONP(JSON with Padding)这一技术来规避同源策略,实现在客户端跨域获取JSON数据。本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net...

    本地实现的最简单jsonp例子.zip

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`&lt;script&gt;`标签可以跨域请求资源的特性来实现数据的交换。这个本地实现的最简单jsonp例子旨在帮助初学者更好地理解这一概念。 首先,我们要明确的是,...

    jsonp源码以及jar包

    JSONP(JSON with Padding)是一种跨域数据交互协议,它的基本思想是利用JavaScript函数调用的特性,将数据封装在函数调用中,从而绕过浏览器的同源策略限制。在网页开发中,如果你需要从一个不同的域名下获取数据,...

    .net3.5 WCF实现jsonp

    JSONP(JSON with Padding)是一种跨域数据交互协议,它利用了`&lt;script&gt;`标签可以跨域请求资源的特性,将JSON数据包裹在一个JavaScript函数调用中返回,从而实现跨域通信。在.NET 3.5中,Windows Communication ...

Global site tag (gtag.js) - Google Analytics