jQuery的ajax jsonp跨域请求

了解：ajax、json、jsonp、“跨域”的关系

要弄清楚以上ajax、json、jsonp概念的关系，我觉得弄清楚ajax是“干什么的”，“怎么实现的”，“有什么问题”，“如果解决存在的问题”等这几个问题，就自然明白了。

1）ajax是干什么的？

Ajax是最大的亮点是在不刷新页面的情况下，迅速的响应用户的一些请求行为，从而提升用户的体验。

2）怎么实现的？

Ajax是基于xmlHttpRequest（XHR）对象与server端进行通信，将一些数据传送给服务器端，服务器端再以一定的格式将结果数据返回给客户端处理。其中目前最流行的数据格式就是json格式。

在ajax请求的场景中，我们可以通过firefox的firebugger查看XHR，就可以找到该请求的一些信息了。

3）有什么问题？

由于xmlHttpRequest（XHR）对象是遵守浏览器同源策略的，因而只能与当前页面同源的server端进行交互，也就是会遇到“跨域问题”。

这里可以得出一个结论：目前只要是采用基于xmlHttpRequest（XHR）对象的ajax请求就会碰到“跨域问题”。

4）如何解决？

Ajax由于是基于xmlHttpRequest（XHR）对象的，有跨域问题，那对于跨域的请求ajax就行不通了，只能另找它法了。

JSONP就是其中一种方案。JSONP实际上是利用浏览器同源策略对<script>标签的引入不做限制这一缺口，实现跨域请求的。也就是说浏览器可以跨域引入其他域的script脚本，这样就可以通过js生成一个script标签，并让它的src指向不同域的链接对不同域的server端发起请求，server端进行处理后，返回一段script脚本，在客户端执行。

举一个自己试验过的例子，在任意一个页面中，写入类似如下的script标签和js函数：

这样后端返回类似test(data)的数据，在页面上执行，就完成了跨域请求。

结论：

从上面四点，就可以知道json是ajax请求的一种数据交换格式，jsonp与ajax是完全不同的两种请求方式，jsonp是用来解决ajax不能跨域的一种解决方案。

启发：

1）要实现跨域，基于XHR的ajax目前基本是行不通的。

2）要实现跨域，只要找到既不刷新页面、又不被浏览器阻止与js交互的请求方式，基本上就找到了跨域请求的解决办法。

例如：script请求、image请求、flash请求等都是可以利用来做异步请求的。

a. Jsonp就是script请求的典型代表之一，而且是我们平时用的最多的一种方式；

b. image请求其实我们也已经用过很多了，比如我们经常用的打点功能，查看其源码，可以知道打点功能完全可以基于这种方式完成的；

c. flash请求用的比较少，跨域的例子在我们的应用中暂时还没找到，不过通过flash自身本身就有跨域实现机制，而且与js交互也比较灵活，可以分析出实现跨域应该是没有问题。

亲身测试：TSP项目

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

前台代码：

 $("#aa-btn").click(function () {
        $.ajax({
            type: "get",
            async: false,
            url: "http://localhost:2475/news/getNews.ashx?action=get&type=0",
            dataType: "jsonp",
            jsonp: "callbackparam", //传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
            jsonpCallback: "success_jsonpCallback", //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
            success: function (json) {
                debugger;
                alert(json);
            },
            error: function (e, a, d) {
                debugger;
                alert('fail');
            }
        });
    });

后台服务代码：

 public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";
            context.Response.ContentEncoding = System.Text.Encoding.UTF8;
            string ReturnCode = string.Empty;
            string callback = string.Empty;
            string ErrorMsg = "参数错误";
            ToJsonP tojsonp = new ToJsonP();
            NewsBLL bll = new NewsBLL();
            if (!string.IsNullOrEmpty(context.Request["callbackparam"]))
            {
                callback = context.Request["callbackparam"];//跨域-必有项。这个是跨域请求的回调，同前台Ajax的配置项jsonp同名（默认也是callback）。
            }
            string type = context.Request["type"];
            ReturnCode = tojsonp.DataConvert(bll.GetNewsList(type));
            //context.Response.Write(ReturnCode);
            context.Response.Write(callback + "(" + ReturnCode + ")");
            context.ApplicationInstance.CompleteRequest();
           
        }

结果：正常进入success：functions(){}