`

jsonP简单使用

阅读更多

文章源自:http://blog.csdn.net/alen1985/article/details/6365394

    介绍JSONP之前,先简单的介绍一些JSON。JSON是JavaScript Object Notation的缩写,是一种轻量的、可读的基于文本的数据交换开放标准。源于JavsScript编程语言中对简单数据结构和关联数组的展示功能。它是仅含有数据对和简单括号结构的纯文本,因此可通过许多途径进行JSON消息的传递。

 

1. JSONP定义
    JSONP是英文JSON with Padding的缩写,是一个非官方的协议。它允许在服务器端生成script tags返回至客户端,通过javascript callback的形式来实现站点访问。 JSONP是一种script tag的注入,将server返回的response添加到页面实现特定功能。

 

2.JSONP由来

    要解释JSONP的来由,先要说一下浏览器的“同源策略(SOP:Same Origin Policy)”。 简而言之,就是浏览器限制脚本程序只能和同协议、同域名、同端口的脚本进行交互,这包括共享和传递变量等。cookie的传递也是遵从同样策略。这就造成 一些涉及到多个服务器的应用在整合时一些麻烦。跨域访问的问题造成A站点的Ajax代码无法访问B站点的数据。

     如何解决跨域访问呢?那就要借助浏览器 的一个特性:尽管浏览器不允许页面中的脚本程序跨域读取数据,但却允许HTML引用跨域的资源,如图片,CSS和脚本程序。对于脚本程序的引用比较特殊, 它被浏览器解析以后,就和本地的脚本程序别无二致且可立即进行解释并执行。如在B站点的一个js文件,一个简单的提示框:alert(“This is Victor!”);。在A站点引用这个js,这个脚本就会在B站点的应用中执行,显示一个alert信息。由于站外脚本的引用是通过script tag来实现的,而脚本程序又可通过DOM的方式可以对HTML页面的所有标签进行控制(包括动态的创建script标签),这就可以实现通过调用站外程 序对本地资源进行更改了。另外,通过<script> 标记的使用,就可从服务端直接返回可执行的JavaScript函数调用或者JSON数据。

 

3. JSONP原理与实现
    首先在客户端注册一个callback, 然后把callback的名字传给服务器。此时,服务器先生成 JSON数据。然后以JavaScript 语法的方式,生成一个function, function名字就是传递上来的参数jsonp. 
    然后,将JSON数据直接以入参的方式,放置到function中,这样就生成了一段 js 语法的文档,返回给客户端。
    最后,在客户端浏览器中解析script标签,并执行返回的JavaScript文档,此时数据作为参数,传入到了客户端预先定义好的回调函数里(动态执行回调函数) 。

其实 JSONP是个很简单的一个东西。主要是利用了 <script/>标签对javascript文档的动态解析来实现。(其实也可以用eval函数) 。

 

4.下面分别用js和jquery实现代码如下:

test.jsp中的js代码:

    <script type="text/javascript">    
        function jsonpCallback(result){     
           alert(result[1].name);     
        }     
    </script>  
    <script type="text/javascript"src="http://localhost:8080/Jsonp/jsonp.jsp?callback=jsonpCallback"></script>  

 或jquery代码:

    <script type="text/javascript">     
        $.getJSON("http://localhost:8080/Jsonp/jsonp.jsp?callback=?", function(json){      
            alert(json[0].name);     
        });     
    </script>  

 jsonp.jsp代码:

    <%  
         String callback = request.getParameter("callback");  
         out.print(callback+"([ { name:'John',age:'19'},{ name:'joe',age:'20'}] );");  
         //out.print(callback);  
    %>  

 当然,后台可以用action或servlet等实现。

 

 最后,只要是浏览器输入http://localhost:8080/Jsonp/test.jsp就会弹出John了。

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    JSONP简单调用实例

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

    js跨域jsonp的使用

    总结来说,JSONP是一种适用于简单跨域请求的解决方案,尤其在不支持CORS的旧版本浏览器中,它是实现跨域通信的重要手段。然而,随着CORS的普及,JSONP的使用逐渐减少,但在某些场景下仍然具有其独特的价值。理解和...

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

    这个本地实现的最简单jsonp例子旨在帮助初学者更好地理解这一概念。 首先,我们要明确的是,JavaScript通常受到同源策略的限制,即只能访问与自身同源(协议、域名、端口相同)的资源。但`&lt;script&gt;`标签是个例外,...

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

    ### 使用JSONP完成HTTP和HTTPS之间的跨域访问 ...虽然JSONP是一种相对简单的方法,但在实际应用中需要考虑到其局限性和潜在的安全风险。开发者在使用此技术时,应确保充分理解其实现原理及可能带来的安全影响。

    Jsonp和java操作

    JSONP (JSON with Padding) 是一种跨域数据交互协议,主要应用于JavaScript...随着CORS(Cross-Origin Resource Sharing)的发展,JSONP的重要性逐渐降低,但考虑到兼容性和简单性,JSONP仍然在某些场景下被广泛使用。

    jsonp 使用例子

    下面将详细讲解JSONP的工作原理、使用场景以及如何实现JSONP。 **1. JSONP的工作原理** JSONP的核心思想是动态插入`&lt;script&gt;`标签,因为浏览器允许跨域加载JavaScript脚本。当服务器返回的数据被包裹在一个函数...

    12 React 获取数据 axios插件 fetch-jsonp插件的使用

    为了在React中实现JSONP请求,我们需要使用fetch-jsonp库。 5. **fetch-jsonp的介绍**:fetch-jsonp是针对fetch API的JSONP实现,用于解决跨域问题。它允许你向其他域发送GET请求,并接收JSON数据。 6. **fetch-...

    json和jsonp数据格式返回

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

    PHP AJAX JSONP实现跨域请求使用范例_ajax如何解决跨域请求

    在这个实例中,我们使用 jQuery 的.ajax() 方法来发送 POST 请求,并指定 dataType 为 jsonp,以便使用 JSONP。 ```javascript $.ajax({ type: "post", url: "ajax.php", dataType: "jsonp", jsonp: "callback...

    jsonp示例2则

    在Python中,我们可以使用Flask或Django等Web框架来构建一个简单的JSONP服务。下面以Flask为例: 首先,安装Flask: ```bash pip install flask ``` 然后,创建一个名为`jsonp_server.py`的文件,编写以下代码: `...

    使用Jsonp方式跨域获取json

    - 优点:简单,支持所有浏览器,无需服务器端额外配置,只需返回符合JSONP格式的响应即可。 - 缺点:只支持GET请求,不支持POST等其他HTTP方法;没有错误处理机制,如果服务器返回的不是有效的JavaScript,浏览器...

    jsonp 简单示例

    标题“jsonp简单示例”指的是一个用来展示JSONP基本用法的项目。在这个项目中,通常会包含两个部分:一个是服务器端的脚本,提供JSON数据;另一个是客户端的HTML页面,通过JavaScript来调用服务器端的数据。 描述中...

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

    简单来说,就是以下3步 客户方点击某个按钮进入我们的页面a 在页面a中由前端发送一个jsonp请求到客户方,得到一个token值 前端得到token值后向自己后端发送一个请求,后端根据token去redis(token的值就是redis里...

    jsonp源码以及jar包

    6. **JSONP的使用**:虽然`jsoup`自身并不直接支持JSONP,但你可以配合使用其他Java库(如`HttpURLConnection`或`Apache HttpClient`)来发送JSONP请求。你需要构造一个动态生成的回调函数名,将这个函数名作为参数...

    cyjsonp实现了一个简易的jsonp库

    cy-jsonp库的使用相当简单。首先,需要引入该库,可以是通过CDN或者下载到本地。然后,调用`cy.jsonp`函数,传入必要的参数。例如: ```javascript cy.jsonp({ url: 'http://example.com/data?callback=?', ...

    Ajax跨域请求解决方案-JSONP

    在Web开发中,由于浏览器的同源策略限制,JavaScript无法直接发起对不同源(协议、域名或端口)的HTTP请求。然而,Ajax技术在实现动态...然而,对于兼容老版本浏览器或者简单的跨域需求,JSONP仍然是一种有效的选择。

    跨域访问解决方法-jsonp

    总结,JSONP是一种简单且广泛使用的跨域解决方案,尤其适用于那些不支持CORS的旧版本浏览器。然而,考虑到安全性和灵活性,CORS在现代Web开发中已成为更推荐的选择。理解JSONP的工作原理和使用方法对于任何Web开发者...

    纯servlet实现JSONP

    以下是一个简单的Servlet实现JSONP的示例代码: ```java import javax.servlet.*; import javax.servlet.http.*; import java.io.IOException; public class JSONPServlet extends HttpServlet { @Override ...

    jsonp跨域请求

    ### JSONP的使用步骤 1. **定义回调函数**:在JavaScript中,预先定义好用于接收数据的全局函数,如`function handleData(data) { ... }`。 2. **构造URL**:根据需要请求的数据,构造一个URL,包含服务端接口地址...

Global site tag (gtag.js) - Google Analytics