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. 我的linux桌面

    经过几次尝试安装linux系统之后,终于把自己的系统安装成了linux系统. wangkongming@ThinkPad-T410 ~ $ lsb_release -a No LSB modules ...

  2. jQuery回调、递延对象总结（中篇) —— 神奇的then方法

    前言: 什么叫做递延对象,生成一个递延对象只需调用jQuery.Deferred函数,deferred这个单词译为延期,推迟,即延迟的意思,那么在jQuery中 又是如何表达延迟的呢,从递延对象中的t ...

  3. 大熊君大话NodeJS之------Net模块

    一,开篇分析 从今天开始,我们来深入具体的模块学习,这篇文章是这个系列(大熊君大话NodeJS)文章的第三篇,前两篇主要是以理论为主,相信大家在前两篇的学习中, 对NodeJS也有一个基本的认识,没事 ...

  4. EasyUI datagrid优化

    easyui datagrid 在IE上加载速度慢, 150行数据就无法忍受了. firefox加载速度还可以. jquery easyui datagrid使用参考 http://www.cnblo ...

  5. SQLServer安装错误之--->无法打开项 UNKNOWN\Components\DA42BC89BF25F5BD0AF18C3B9B1A1EE8\c1c4f01781cc94c4c8fb1542c0981a2a

    – 错误 1402.无法打开项 UNKNOWN\Components\7ABFE44842C12B390AF18C3B9B1A1EE8\54D21D49F3A8C1C49AC11A1B6445A83E ...

  6. 【AngularJS】—— 13 服务Service

    在AngularJS中有很多的服务,常用的比如$http,$location等等. 本篇文章会介绍一下的内容: 1 $http这种Angular提供的服务的使用 2 如何自定义服务,并总结服务需要注意 ...

  7. 深入理解计算机系统-从书中看到了异或交换ab两个值的新感

    还得从一个很经典的面试题说起:不通过第三个变量来交换两个变量a,b的值... 一个很经典的答案是通过异或来解决: 第壹步:a=a^b; 第贰步:b=a^b; 第叁步:a=a^b; 以前提起" ...

  8. Linux中postfix邮件服务器的搭建

    postfix是Wietse Venema在IBM的GPL协议之下开发的MTA(邮件传输代理)软件.postfix是Wietse Venema想要为使用最广泛的sendmail提供替代品的一个尝试.在 ...

  9. [Storm] 内部消息缓存

    这篇文件翻译自 http://www.michael-noll.com/blog/2013/06/21/understanding-storm-internal-message-buffers/ 当进 ...

  10. php打印出来金字塔

    /*                   空格数($k):   第几($i)层    所以:$k+$i=$m  $k=$m-$i *            *                 3--- ...