jQuery的ajax jsonp跨域请求

时间:2022-02-12 00:55:11

了解: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(){}
jQuery的ajax jsonp跨域请求