jQuery中利用JSONP解决AJAX跨域问题

特别注意：JSONP跨域要用 get 提交方式，不能用Post

写在前面

跨域的解决方案有多种，其中最常见的是使用同一服务器下的代理来获取远端数据，再通过ajax进行读取，而在这期间经过了两次请求过程，使得获取数据的效率大大降低，这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP。

什么是跨域？

简单的来说，出于安全方面的考虑，页面中的JavaScript无法访问其他服务器上的数据，即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制，实现不同服务器之间通信的效果。

具体策略限制情况可看下表：

URL	说明	允许通信
http://www.a.com/a.js http://www.a.com/b.js	同一域名下	允许
http://www.a.com/lab/a.js http://www.a.com/script/b.js	同一域名下不同文件夹	允许
http://www.a.com:8000/a.js http://www.a.com/b.js	同一域名，不同端口	不允许
http://www.a.com/a.js https://www.a.com/b.js	同一域名，不同协议	不允许
http://www.a.com/a.js http://127.0.0.100/b.js	域名和域名对应ip	不允许
http://www.a.com/a.js http://script.a.com/b.js	主域相同，子域不同	不允许
http://www.a.com/a.js http://a.com/b.js	同一域名，不同二级域名（同上）	不允许
http://www.a.com/a.js http://www.b.com/b.js	不同域名	不允许

什么是JSONP？

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，而JSONP（JSON with Padding）则是JSON 的一种“使用模式”，通过这种模式可以实现数据的跨域获取。

JSONP跨域的原理

在同源策略下，在某个服务器下的页面是无法获取到该服务器以外的数据的，但img、iframe、script等标签是个例外，这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略，我们可以实现跨域请求数据，当然，也需要服务端的配合。当我们正常地请求一个JSON数据的时候，服务端返回的是一串JSON类型的数据，而我们使用JSONP模式来请求数据的时候，服务端返回的是一段可执行的JavaScript代码。

举个例子，假如需要从服务器（http://www.a.com/user?id=123）获取的数据如下：

{"id": 123, "name" : 张三, "age": 17}

那么，使用JSONP方式请求（http://www.a.com/user?id=123?callback=foo）的数据将会是如下：

foo({"id": 123, "name" : 张三, "age": 17});

当然，如果服务端考虑得更加充分，返回的数据可能如下：

try{foo({"id": 123, "name" : 张三, "age": 17});}catch(e){}

这时候我们只要定义一个foo()函数，并动态地创建一个script标签，使其的src属性为http://www.a.com/user?id=123?callback=foo：

<script type="text/javascript" src="http://www.a.com/user?id=123?callback=foo"></script>

便可以使用foo函数来调用返回的数据了。

在jQuery中如何通过JSONP来跨域获取数据

第一种方法是在ajax函数中设置dataType为'jsonp'：

$.ajax({
dataType: 'jsonp',
url: 'http://www.a.com/user?id=123',
success: function(data){
//处理data数据
}
});

第二种方法是利用getJSON来实现，只要在地址中加上callback=?参数即可：

$.getJSON('http://www.a.com/user?id=123&callback=?', function(data){
//处理data数据
});

也可以简单地使用getScript方法：

//此时也可以在函数外定义foo方法
function foo(data){
//处理data数据
}
$.getScript('http://www.a.com/user?id=123&callback=foo');

JSONP的应用

JSONP在开放API中可以起到非常重要的作用，开放API一般是运用于开发者的应用上，而这些应用往往是在开发者的服务器上而并非在新浪微博的服务器上，因此跨域请求数据成为前端开发者们所需要解决的一大问题，广大开放平台应该实现对JSONP的支持，这一点新浪微博开放平台便做的非常好（虽然某些API里没有说明，但实际上是可以使用JSONP方式调用的）。

出处：蓝飞技术部落格

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

前天在项目中写的一个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://www.cnblogs.com/know/archive/2011/10/09/2204005.html

相关阅读:
瀑布流
 轮播图
 封装动画的函数
 回到顶部带动画
 动画setInterval
模拟滚动条
 放大镜
 刷新
 cookie
拖拽
原文地址：https://www.cnblogs.com/cmblogs/p/2948637.html