jQuery 调用jsonp实现与原理

您的评价:
     
 收藏该经验    

通过jQuery实现JSONP

一般的ajax是不能跨域请求的，因此需要使用一种特别的方式来实现跨域，其中的原理是利用 <script> 元素的这个开放策略，具体后面谈。

1.客户端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
     <title>JSIONP TEST</title>
      <script type="text/javascript" src=jquery.min.js"></script>
      <script type="text/javascript">
     jQuery(document).ready(function(){ 
        $.ajax({
             type: "get",
             dataType: "jsonp",
             jsonp: "callback",
             jsonpCallback:"jsonpCallback",
             success: function(json){
                 alert('json:' + json);
             },
             error: function(){
                 alert('fail');
             }
         });
     });
     </script>
     </head>
  <body>
  </body>
 </html>

  • jsonp

    类型: String

    在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。在jQuery 1.5，，设置jsonp选项为false，阻止了jQuery从加入"?callback"字符串的URL或试图使用"=?"转换。在这种情况下，你也应该明确设置jsonpCallback设置。例如, { jsonp: false, jsonpCallback: "callbackName" }

  • jsonpCallback

    类型: String, Function

    为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成一个独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。从jQuery 1.5开始，你也可以使用一个函数作为该参数设置，在这种情况下，该函数的返回值就是jsonpCallback的结果。

2.服务器端

1
2
3
4
5
6
7
8
9
10
11
12
13
public void doGet(HttpServletRequest req, HttpServletResponse res)
throws ServletException, RemoteException, IOException{
doPost(req, res);
}
public void doPost(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {
    res.setContentType("text/javascript; charset=UTF-8");//jsonp其实回写的就是一段JavaScript代码
    String functionName= req.getParameter("callback");//获得回调函数名字
    PrintWriter out = res.getWriter();            out.print(String.formate("%s({'value': '001', 'text': 'show 001'})", functionName));
            //jsonpCallback({'value': '001', 'text': 'show 001'}) 写到前端的结果
    out.flush();
            out.close();
   }

JSONP原理

我们不能从不同的服务器ajax数据，但是<script>就可以做到，我们在本地写一个函数，然后在远端引入的这个js文件对这个函数进行了调用，在调用过程中可以传递参数，这样子的一个过程就是jsonp
本地服务器 localhost

1
2
3
4
5
6
7
<script type="text/javascript">    var localFunction = function(data){
        alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：'+ data.result);
};
</script> 
<script type="text/javascript" src="http://remoteserver.com/remote.js">
//remote.js 其实就一句话  localFunction({"result":"我是远程js带来的数据"});，在浏览器加载完成之后，远端loading过来的这个文件可以执行本地的JavaScript代码，里面可以携带数据，不过需要有一个函数名作为媒介
</script>

最后看到的结果就是


参考：
http://zh.wikipedia.org/wiki/JSONP
http://www.css88.com/jqapi-1.9/jQuery.ajax/

jQuery 调用jsonp实现与原理的更多相关文章

  1. jquery 中jsonp的实现原理

    在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的 ajax是不能进行跨域请求的.但 img.iframe .script等标签是个例外,这些标签可以通过 src属性请求到其 ...

  2. 紧接上篇，jQuery调用jsonp，并且在页面上展示

    在上篇中提到了spring4.1+支持jsonp的调用,做了个例子,用来在页面上展示jsonp: (js写的丑了点,本人后端出生,前端大侠们轻拍~) var Menu = function () { ...

  3. jquery ajax jsonp跨域调用实例代码

    今天研究了AJAX使用JSONP进行跨域调用的方法,发现使用GET方式和POST方式都可以进行跨域调用,这里简单分享下,方便需要的朋友 客户端代码 复制代码 代码如下: <%@ Page Lan ...

  4. Jquery调用从ashx文件返回的jsonp格式的数据处理实例

    开发环境:vs2010+jquery-1.4.min.js 解决问题:网上代码比较少,好多调试不通,返回数据不用json而用jsonp主要考虑解决跨域问题 开发步骤:打开VS2010,新建一web站点 ...

  5. 用jQuery与JSONP轻松解决跨域访问的问题

    浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...

  6. 深入剖析jsonp跨域原理

    在项目中遇到一个jsonp跨域的问题,于是仔细的研究了一番jsonp跨域的原理.搞明白了一些以前不是很懂的地方,比如: 1)jsonp跨域只能是get请求,而不能是post请求: 2)jsonp跨域的 ...

  7. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  8. jsonp 跨域原理详解

    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...

  9. jQuery的jsonp跨域是这么回事.

    实现跨域请求的有iframe,img,script中的src属性.那么jquery是如何解决跨域请求的呢? 一:项目jsonp2中有个app.js文件,代码如下: function app(json) ...

随机推荐

  1. [IOC]Unity使用

    Unity是什么? unity是patterns&practices团队开发的一个轻量级.可扩展的依赖注入容器. Unity特性 1.它提供了创建(或者装配)对象实例的机制,而这些对象实例可能 ...

  2. Codeforces Round #268 (Div. 2) ABCD

    CF469 Codeforces Round #268 (Div. 2) http://codeforces.com/contest/469 开学了,时间少,水题就不写题解了,不水的题也不写这么详细了 ...

  3. 高效率http页面优化法则一【JS对DOM的操作】

    高效http页面优化法则一很多人都认为JS的效率太慢了,都不愿意用js来实现相对困难一点的程序逻辑.在这里我要说的是其实js的效率并不慢,慢的是DOM,如果操作好DOM,你的js效率将提高接近千倍(这 ...

  4. php加速运行优化

    一个系统的运行性能,除了程序本身要写的完善,还有要看php本身的一些问题,对于php的运行优化,主要有这些加速器:wincache,xcache,ZendOPcache,eAccelerator加速器 ...

  5. HDOJ 4717 The Moving Points

    The Moving Points Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others ...

  6. 【转】(笔记)CANopen协议【CANFestival】移植方法

    一.背景 CAN组网就必须得要应用层协议,原因就在于 * 便于网络管理与控制 * 确认数据的收发 * 发送大于8个字节的数据块(CAN每帧数据传输大小为8字节) * 为不同节点分配不同的报文标识符 * ...

  7. 【PHP面向对象(OOP)编程入门教程】20.PHP5接口技术(interface)

    PHP与大多数面向对象编程语言一样,不支持多重继承.也就是说每个类只能继承一个父类.为了解决这个问题,PHP引入了接口,接口的思想是指定了一个实现了该接口的类必须实现的一系列方法.接口是一种特殊的抽象 ...

  8. Ubuntu 14 如何解压 .zip、.rar 文件？

    .zip 和 .rar 是Windows下常用的压缩文件,在Ubuntu中如何解压? [解压.zip文件] Ubuntu中貌似已经安装了unzip软件,解压命令如下: unzip ./FileName ...

  9. 第二天 django apache

    1. 475  brew tap homebrew/apache 476  brew install mod_wsgi 477  ls /usr/local/Cellar/mod_wsgi/4.5.7 ...

  10. xcode7 NSAppTransportSecurity

    在Info.plist中添加  NSAppTransportSecurity 类型  Dictionary Dictionary 下添加  NSAllowsArbitraryLoads 类型 Bool ...