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. shell学习之路:shell基础大全2

    原文:http://note.youdao.com/share/?id=cd2ad6e6d5db2b347f92958efc2bdbc1&type=note 正则表达式与通配符: 一.介绍: ...

  2. HTTP协议详解（真的很经典）

    HTTP 是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和 扩展.目前在WWW中使用的是HTTP/1.0 ...

  3. jQuery源码-dom操作之jQuery.fn.html

    写在前面 前面陆陆续续写了jQuery源码的一些分析,尽可能地想要cover里面的源码细节,结果导致进度有些缓慢.jQuery的源码本来就比较晦涩,里面还有很多为了解决兼容问题很引入的神代码,如果不g ...

  4. 有关html5设计那些事，你真的考虑过前端的实现吗(最近别人经常问我这种问题，所以我就写一篇了，可能也有别人和我一样吐槽过)

    很久以前在安卓2.0系统刚刚的时候就对HTML5比较关注!因为我也是那个时候刚刚入行做前端的.那个时候最大的乐趣就是看着w3plus上面各种css3的效果,觉得哇,好牛逼原来可以这样做,然后3年过去了 ...

  5. AngularJs基础总结(1.4版本)

    注明:现在用的是最新的1系列1.4版本. 一.细节方面入手: 1,ng-app根节点,一般别写在html上面,最多也就写在body就行了,因为我们难免会忘记这个写在哪里,然后复制一些案例代码却总报错. ...

  6. 【AngularJS】—— 4 表达式

    前面了解了AngularJS的基本用法,这里就跟着PDF一起学习下表达式的相关内容. 在AngularJS中的表达式,与js中并不完全相同. 首先它的表达式要放在{{}}才能使用,其次相对于javas ...

  7. 基础知识系列☞C#中数组Array、ArrayList和List三者的区别

    数组() #region 数组 //初始化方式_0:先声明再赋值 ]; weekDays_0[] = "Sun"; weekDays_0[] = "Mon"; ...

  8. 关于R中的mode()和class()的区别

    本文原创,转载请注明出处,本人Q1273314690(交流学习) 说明:本文曾经在15年11月在CSDN发过,但是由于CSDN不支持为知笔记的发布为博客的API功能,所以,自今天起,转移到博客园(幸好 ...

  9. 在lua脚本中使用我们自定义的精灵类

    首先创建cocos2dx-lua项目,然后在项目中添加我们的自定义精灵类:这里Himi类名为:HSprite // // HSprite.h // cocos2dx_lua_tests_by_Himi ...

  10. 用CSS画个三角形

    <!DOCTYPE html> <html> <head> <style type="text/css"> #trangle { d ...