跨域请求之jQuery的ajax jsonp的使用解惑

转自：http://www.cnblogs.com/know/archive/2011/10/09/2204005.html

前天在项目中写的一个ajax jsonp的使用，出现了问题：可以成功获得请求结果，但没有执行success方法，直接执行了error方法提示错误——ajax jsonp之前并没有用过，对其的理解为跟普通的ajax请求差不多，没有深入了解；出现了这种错误，几经调试(检查后台的代码和js部分的属性设置)还是不行，让我感觉很是意外和不解。于是，决定仔细研究下ajax jsonp的使用，并将最后测试成功的学习经验和大家分享下!

首先，贴出可以成功执行的代码：

(页面部分)

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" > 3 <head> 4     <title>Untitled Page</title> 5      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 6      <script type="text/javascript"> 7     jQuery(document).ready(function(){ 8         $.ajax({ 9             type : "get",10             async:false,11             url : "ajax.ashx",12             dataType : "jsonp",13             jsonp: "callbackparam",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)14             jsonpCallback:"success_jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名15             success : function(json){16                 alert(json);17                 alert(json[0].name);18             },19             error:function(){20                 alert(‘fail‘);21             }22         });23         var a="firstName Brett";24         alert(a);25     });26     </script>27     </head>28  <body>29  </body>30 </html>

(处理程序部分)

 1 <%@ WebHandler Language="C#" class="ajax" %> 2  3 using System; 4 using System.Web; 5  6 public class ajax : IHttpHandler { 7      8     public void ProcessRequest (HttpContext context) { 9         context.Response.ContentType = "text/plain";10         string callbackFunName = context.Request["callbackparam"];11         context.Response.Write(callbackFunName + "([ { name:\"John\"} ] )");12     }13  14     public bool IsReusable {15         get {16             return false;17         }18     }19 20 }

(请求抓包截图)

ajax请求参数说明：

dataType  String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。在1.4中，JSON就会生成一个JavaScript对象，而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。‘‘‘注意：‘‘‘在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

"text": 返回纯文本字符串

jsonp   String

在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，比如{jsonp:‘onJsonPLoad‘}会导致将"onJsonPLoad=?"传给服务器。

jsonpCallback   String

为jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。

ajax jsonp与普通的ajax请求的主要区别在于——请求响应结果的处理。如上面代码所示的响应结果为：

 success_jsonpCallback([ { name:"John"} ] ); ————其实就是，调用jsonp回调函数success_jsonpCallback,并将要响应的字符串或json传入此方法(作为参数值)，其底层的实现，大概的猜想应该是：
 function success_jsonpCallback(data) {     success(data); }

经测试，ajax jsonp对同步或异步请求没有影响。

------------------------------------------------------------------------------------完美分割线------------------------------------------------------------------------------------------------------------------------------------------------------------------以下转自：http://justcoding.iteye.com/blog/1366102

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点（流行术语为 Web 2.0 站点）的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力，它可将来自多个地方的内容集成为单一 Web 应用程序。

不过，由于受到浏览器的限制，该方法不允许跨域通信。如果尝试从不同的域请求数据，会出现安全错误。如果能控制数 据驻留的远程服务器并且每个请求都前往同一域，就可以避免这些安全错误。但是，如果仅停留在自己的服务器上，Web 应用程序还有什么用处呢？如果需要从多个第三方服务器收集数据时，又该怎么办？

理解同源策略限制

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。这个浏览器策略很旧，从 Netscape Navigator 2.0 版本开始就存在。

克服该限制的一个相对简单的方法是让 Web 页面向它源自的 Web 服务器请求数据，并且让 Web 服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用，但它是不可伸缩的。另一种方式是使用框架要素在当前 Web 页面中创建新区域，并且使用 GET 请求获取任何第三方资源。不过，获取资源后，框架中的内容会受到同源策略的限制。

克服该限制更理想方法是在 Web 页面中插入动态脚本元素，该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的，因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档，就不会成功。幸运的是，通过添加 JavaScript Object Notation (JSON) 可以改进该技术。

1、什么是JSONP？

要了解JSONP，不得不提一下JSON，那么什么是JSON ？

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

2、JSONP有什么用？

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

3、如何使用JSONP？

下边这一DEMO实际上是JSONP的简单表现形式，在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数。

HTML代码 （任一 ）：

Html代码  

  1. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  2. <script type="text/javascript">
  3. function jsonpCallback(result) {
  4. //alert(result);
  5. for(var i in result) {
  6. alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
  7. }
  8. }
  9. var JSONP=document.createElement("script");
  10. JSONP.type="text/javascript";
  11. JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";
  12. document.getElementsByTagName("head")[0].appendChild(JSONP);
  13. </script>
 

或者

Html代码  

  1. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  2. <script type="text/javascript">
  3. function jsonpCallback(result) {
  4. alert(result.a);
  5. alert(result.b);
  6. alert(result.c);
  7. for(var i in result) {
  8. alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
  9. }
  10. }
  11. </script>
  12. <script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>

JavaScript的链接，必须在function的下面。

服务端PHP代码 （services.php）：

Php代码  

  1. <?php
  2. //服务端返回JSON数据
  3. $arr=array(‘a‘=>1,‘b‘=>2,‘c‘=>3,‘d‘=>4,‘e‘=>5);
  4. $result=json_encode($arr);
  5. //echo $_GET[‘callback‘].‘("Hello,World!")‘;
  6. //echo $_GET[‘callback‘]."($result)";
  7. //动态执行回调函数
  8. $callback=$_GET[‘callback‘];
  9. echo $callback."($result)";
 

如果将上述JS客户端代码用jQuery的方法来实现，也非常简单。

$.getJSON
$.ajax
$.get

客户端JS代码在jQuery中的实现方式1：

Js代码  

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript">
  3. $.getJSON("http://crossdomain.com/services.php?callback=?",
  4. function(result) {
  5. for(var i in result) {
  6. alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
  7. }
  8. });
  9. </script>

 

客户端JS代码在jQuery中的实现方式2：

Js代码  

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript">
  3. $.ajax({
  4. url:"http://crossdomain.com/services.php",
  5. dataType:‘jsonp‘,
  6. data:‘‘,
  7. jsonp:‘callback‘,
  8. success:function(result) {
  9. for(var i in result) {
  10. alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
  11. }
  12. },
  13. timeout:3000
  14. });
  15. </script>

 

客户端JS代码在jQuery中的实现方式3：

Js代码  

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript">
  3. $.get(‘http://crossdomain.com/services.php?callback=?‘, {name: encodeURIComponent(‘tester‘)}, function (json) { for(var i in json) alert(i+":"+json[i]); }, ‘jsonp‘);
  4. </script>

 

其中 jsonCallback 是客户端注册的，获取 跨域服务器 上的json数据 后，回调的函数。
http://crossdomain.com/services.php?callback=jsonpCallback
这个 url 是跨域服务 器取 json 数据的接口，参数为回调函数的名字，返回的格式为

Js代码  

  1. jsonpCallback({msg:‘this is json data‘})

 

Jsonp原理： 
首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时，服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

 

使用JSON的优点在于：

  • 比XML轻了很多，没有那么多冗余的东西。
  • JSON也是具有很好的可读性的，但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示，浏览器对于JSON的格式化的显示就需要借助一些插件了。
  • 在JavaScript中处理JSON很简单。
  • 其他语言例如PHP对于JSON的支持也不错。

JSON也有一些劣势：

  • JSON在服务端语言的支持不像XML那么广泛，不过JSON.org上提供很多语言的库。
  • 如果你使用eval()来解析的话，会容易出现安全问题。

尽管如此，JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。

主要提示：

JSONP 是构建 mashup 的强大技术，但不幸的是，它并不是所有跨域通信需求的万灵药。它有一些缺陷，在提交开发资源之前必须认真考虑它们。

第一，也是最重要的一点，没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。（未来的 jQuery 版本可能有终止 JSONP 请求的特性）。

JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务，了解它能造成的威胁非常重要。

 
时间： 2024-12-17 00:14:20

跨域请求之jQuery的ajax jsonp的使用解惑的相关文章

ASP.NET 跨域请求之jQuery的ajax jsonp的使用解惑 （转载）

前天在项目中写的一个ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法,直接执行了error方法提示错误——ajax jsonp之前并没有用过,对其的理解为跟普通的ajax请求差不多,没有深入了解:出现了这种错误,几经调试(检查后台的代码和js部分的属性设置)还是不行,让我感觉很是意外和不解.于是,决定仔细研究下ajax jsonp的使用,并将最后测试成功的学习经验和大家分享下! 首先,贴出可以成功执行的代码: (页面部分) <!DOCTYPE html

AJAX跨域请求json数据的实现方法

这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下 我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果. 让我们看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的. jQuery的JSONPjQuery.getJSON方法:Js代码 jQuery.get

关于Jquery跨域请求php数据

什么引起了ajax不能跨域请求的问题? ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告. 跨域的安全限制都是指浏览器端来说的,服务器端是不存在跨域安全限制的.所以针对这2种情况衍生出2类跨域解决方案,一类是服务器端做中转类似代理方式,一类是js处理浏览器端的真正跨域访问. <script type="text/javascript" src="./jquery-1.6.4.min.j

ajax跨域请求学习笔记

前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可以使用ajax实现前端的优化.(好一个排比) 虽然ajax很好,但在使用起来也会有一定的限制,出于安全考虑,不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.(下面例子1可以直观看出) 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面

循序渐进Python3（十一） --6-- &#160;Ajax 实现跨域请求 jsonp 和 cors

Ajax操作如何实现跨域请求? Ajax (XMLHttpRequest)请求受到同源策略的限制. Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外XMLHttpRequest是一个纯粹的Javascript对象,这样的交互过程,是在后台进行的,用户不易察觉. 因此,XMLHTTP实际上已经突破了原有的Javascript的安全限制. 举个例子: 假设某网站引用了其它站点的javascript,这个站点被入侵并在javascript中加入获取用户输入并通过ajax提交

JS 中的跨域请求

跨域请求并不仅仅只是 Ajax 的跨域请求,而是对于一个页面来说,只要它请求了其他域名的资源了,那么这个过程就属于跨域请求了. 比如,一个带有其他域名的 src 的 <img> 标签,以及页面中引入的其他第三方的 CSS 样式等. 对于 img 以及 CSS 而言,跨域请求本身并没有更多的安全问题,因为这些请求都属于只读请求,并不会对源资源造成副作用. 而如果跨域请求是从脚本里面发出去的,由于脚本具有高度灵活性,浏览器出于安全考虑,会根据同源策略来限制它的功能,使得正常情况下,脚本只能请求同源

Zepto跨域请求

使用jquery进行跨域请求,可在 $.ajax({ success:function(data){ //如果返回json,data即为对象,jquery自动实现一个callback方法 } }) 而在zepto中需要手动实现,因为zepto精简了很多东西 下面附上代码 function pandoraCall(data){ console.log(data); } //按需执行下面的跨域请求 $.ajax({ type:"get", url:"http://localhos

关于使用jq跨域请求的实现

今天算是把js跨域请求搞定了,想实现跨越,首先想到的是JSONP,但是具体去做的时候,发现有很多坑.在本地测试好之后又发现目标网站做了https证书认证,也就是实用的jsonp请求地址必须是https请求方式...无语..继续实现https(后续会另开一篇关于lnmp下搭建https并自动续签证书的文章),废话不多说,下面是JSONP AJAX实现跨域请求. js部分$.ajax({ type:"get", //请求方式 async:true, //是否异步 url:"htt

利用JQuery jsonp实现Ajax跨域请求 .Net 的*.handler 和 WebService，返回json数据

1:跨域请求handler一般处理程序 using System; using System.Collections.Generic; using System.Web; using System.Web.Services; namespace CrossDomain { /// <summary> /// $codebehindclassname$ 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.