jquery ajax跨域请求详解

最近在做一个手机Web项目,硬着头皮上了。现在比较流行的就是使用Phonegap+HTML5+CSS+JS/JQuery做一个看起来
native的mobile web
app。但是由于时间急,而且这些东西都不是很熟悉,再加上这只是对已有web网站的mobile化,因此采用了Phonegap+几乎纯server端
页面的方式,做起来省事多了,但是缺点还是有一大堆的,这里就不细说了。

本文章来给大家详细jquery中的ajax跨域请求,
在JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式。分别是JQuery的jquery.ajax
jsonp格式和jquery.getScript方式。

唠叨之前首先声明一点,本人不是教授,也没有大量研究过,因此如有说错的地方,请指出,不甚感谢。

ajax要在各种浏览器下都实现完美的跨域需要借助于jsonp技术,jsonp实质是请求一个js脚本文件,在js文件载入完毕时执行某个函数,这样就可以完美的规则跨域问题了。

好了,这篇随笔要展示的是跨域访问的一种实现,这是针对传统ajax不支持跨域访问而提出的。当然你也可以用别的技术实现跨域访问,比如说websocket,只是这种实现比较费lib。只用一个2Kb的jsonp包就能跨域访问,何乐而不为呢。

什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型。使用这种类型的话,会创建一个查询字符串参数
callback=?
,这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名,以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理,根据客户端提交的callback的参数,返回一个callback(json)的数据,而客户端将会用script的方式处理返回数据,来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。

首先来说说啥叫跨域访问,即由于浏览器的安全,不允许访问不同域下的资源,通俗的说,A网站的资源不允许被B网站所使用。不过这也不是绝对的,偶尔借个螺丝刀也是可以的,像a标签的href,script标签的src,form表单的
action属性等都是可以“借”东西的。

jquery封装了jsonp请求的发送方式,使jsonp请求和ajax请求方式几乎相同了,如下是jquery跨域请求的写法:

对于jsonp真正的原理,目前也没有很深入的去了解过。至于百度上搜的什么原理,说的都不对。比如“使用script标签加载配置对象中的跨域
url”,我想说的是为什么ajax就不能加载跨域url呢。而且我发现一个怪事,同样使用$.getJson()进行JSONP跨域访问,如果type
为get,则可以跨域访问,但如果改成post,则不行了。

 代码如下

好了,我们还是开始这个例子吧,理论什么的还是等有空google去吧。

复制代码

首先理一下简单的需求,就是本地html可以登录到server端进行验证,而且登录后还应该是在本地,这是一个典型的跨域访问。

$.ajax({
     url:”testserver.php”,
     dataType: ‘jsonp’, // 注意:JSONP <– P (lowercase)
     success:function(json){
         // do stuff with json (in this case an array)
         alert(“Success”);
     },
     error:function(){
         alert(“Error”);
     },
澳门新葡亰网站注册,});

用到的技术:

注意跨域请求的一般ajax请求的区别在于dataType设置成了jsonp了

前台采用HTML+CSS+JQuery + JQuery Mobile,即做成一个mobile web
app,可以在手机上进行登录,需要使用Phonegap进行打包。

对应的服务器端代码示例如下:

后台采用纯粹的servlet进行处理,使用tomcat做web服务器。

 代码如下

哦,忘了jsonp是主角了,那就赶紧先拉出来溜溜吧。先上登录页面,我们那可爱的jsonp就被用到submit按钮上。注意一
点,如果你不是js大神,那么使用jquery的方法$.json(…)是没法实现error方法的回调的,即如果服务器压根没开,要请求的登录验证
url根本不能访问,$.json()方法努力尝试,发现不行,于是果断不通知你就撤了。解决的方法是使用jquery-jsonp插件,一个大小只有
2K的“高科技”啊,当然大神可以自己实现。

复制代码

functionlogon(){var_url=createReqUrl();if(!_url)returnfalse;//alert(_url);showWaiting();$.jsonp({url:_url,timeout:5000,success:function(jsonData){if(jsonData[0].success==true){saveUserID(jsonData[0].retuid);//redirectturnToMenuPage();}else{$(#showError).html(jsonData[0].errorinfo);showSubmit();}},error:function(xOptions,textStatus){$(#showError).html(textStatus);showSubmit();}});}

<?php
$arr = array(“element1″,”element2”,array(“element31″,”element32”));
$arr[‘name’] = “response”;
echo $_GET[‘callback’].”(“.json_encode($arr).”);”;  // 09/01/12
corrected the statement
?>

这个方法可谓是前台登录的要害了。要做的事情是:

上面介绍的是php的,下面我来看个与asp.net的

1.获取web服务器地址配置页面中的值,再加
上表单输入框的值,最后拼接成一个url。注意这个url要带上“callback=?”,以方便后面$.jsonp的使用(当然也不是必须要这样做的,
这边不写后面可以补不足)。

前台请求代码