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. 【采集层】Kafka 与 Flume 如何选择--转自悟性的博文

    [采集层]Kafka 与 Flume 如何选择 收藏 悟性 发表于 2年前 阅读 23167 收藏 16 点赞 4 评论 1 摘要: Kafka, Flume 采集层 主要可以使用Flume, Kaf ...

  2. SpringMVC应用

    SpringMVC的核心是DispatcherServlet,这个Servlet充当SpringMVC的前端控制器. SpringMVC是多线程的吗??? 控制器是一个用于处理请求的Spring组件. ...

  3. motto11

    我们应该这样来提高自己表达能力:在和人交流的时候,以欣赏的态度接受对方的观点,如果不太同意对方的观点,不能说对方的观点不好,而应该说,你的想法(观点)很好,但我认为,xxxxxx这样做会更好些. 这样 ...

  4. 弹出框二 之 bootbox.js

    1.可以通过Nuget下载 2.引入 jquery bootstrap bootbox.js 3.使用 $(function () { //bootbox.alert("确认删除" ...

  5. C#~异步编程续~.net4.5主推的await&async应用(转)

    之前写过两篇关于异步编程的文章,详细可以进入C#~异步编程和C#~异步编程在项目中的使用 .net的各个版本都有自己主推的技术,像.NET1.1中的委托,.NET2.0中的泛型,.NET3.0中的Li ...

  6. ThinkPHP的四种URL模式 URL_MODEL

    ThinkPHP支持四种URL模式,可以通过设置URL_MODEL参数来定义,包括普通模式.PATHINFO.REWRITE和兼容模式. 普通模式 设置URL_MODEL 为0 采用传统的URL参数模 ...

  7. mysql 调用外部程序

    一.下载 lib_mysqludf_sys: 下载地址:https://github.com/mysqludf/repositories 二.配置与使用: 1.解压之后,已经有了我们需要的 lib_m ...

  8. 【转载】android中.9png

    在Android的设计过程中,为了适配不同的手机分辨率,图片大多需要拉伸或者压缩,这样就出现了可以任意调整大小的一种图片格式“.9.png”.这种图片是用于Android开发的一种特殊的图片格式,它的 ...

  9. windows下调用外部exe程序 SHELLEXECUTEINFO

    本文主要介绍两种在windows下调用外部exe程序的方法: 1.使用SHELLEXECUTEINFO 和 ShellExecuteEx SHELLEXECUTEINFO 结构体的定义如下: type ...

  10. FineUI第十三天---`列布局

    这是经典的列布局:                  <x:Panel runat=                     <Items>                      ...