Ajax跨域请求的解决办法

由于项目需要，对项目进行优化，将项目中的一部分动态页面生成静态页面来提高访问的速度，随后这些静态页面与web服务器分开，存于其他服务器，并为其指定了二级域名。问题来了，导致以前写的ajax全部over。

  于是埋头苦找问题，照旧，在ajax的后提方法中设置断点，不料，断点尽然跳不进，后来，将ajax方法中与后台交互的url改为全路径（不用相对路径），结果，断点顺利进入，欣喜若狂。于是将所有url改为全路径，以为问题得到解决。后来发现ajax后台能够正常执行，但是页面上的ajax回调方法却没被执行。

  由于之前没有类似经验，于是google百度一番，发现这是一个ajax跨域问题。网上给出的不外乎以下几种方法：

1.web端代理的方式，即用户访问A网站时所产生的对B网站的跨域访问请求均提交到A网站的指定页面，由该页面代替用户页面完成交互，从而返回合适的结果。

2.iframe，解决方案就是用window.location对象的hash属性，利用JS改变hash值网页不会刷新，可以这样实现通过JS访问hash值来做到通信，大体就是AB网站各嵌入一个对方网站的iframe，然后通过连续不断的监听hash值的变化来进行通信。比如A网站通过改变B网站iframe的hash后，B网站监听到hash的变化后就进行处理，这种方式需要开发者可以控制两个网站的代码。

3.通过script标签来请求，原理就是在本域内的A内生成一个JS标签，它的SRC指向请求的另外一个域的某个页面B，这个src里面通常会加一个A页面定义好的回调函数，B返回数据即可，可以直接返回调用这个回调函数，这种跨域的通信方式被称为JSONP，此方案存在的缺陷是， script的src属性完成该调用时采取的方式时get方式，如果请求时传递的字符串过大时，可能会无法正常运行。

4.window.name，window.name是一种解决跨域数据传输的新技术，通过在iframe中加载一个跨域的HTML文件，并且在HTML文件中设置window.name的值为需要传给接受者的数据，接收者就可以取得到window.name的值并且返回，比较关键的是同源策略的影响对location的控制不受限制，所以需要加载一个代理的页面来让发送页面读取window.name.

5.使用flash，原理是JavaScript将数据提交给本域下的 Flash，通过 Flash 中转去访问其他域的接口，只需要其他域的根目录下有一个crossdomain.xml文件，文件中设置允许所有域名或允许本域访问即可。

 

 

先说说自己项目的ajax架构：采用jquery1.6.2和struts2注解的形式

后台struts2示例代码：

@SuppressWarnings("serial")
@ParentPackage("json-default")
@Results( { @Result( type = "json })

public class BaserAjaxAction extends BaseAction {

    

Map<String, String> map = new HashMap<String, String>();

/**
  * 是否登录
  *
  * @return
  * @throws Exception
  */
 public String isAreadyLogin() throws Exception {
  try {
   Object mid = this.getReq().getSession().getAttribute(
     SessionKey.BASER_ID);
   Object mname = this.getReq().getSession().getAttribute(
     SessionKey.USER_NAME);
   Object pic = this.getReq().getSession().getAttribute(
     SessionKey.BASER_PIC);
   if (null != mid && null != mname) {
    map.put("result", "true");
    map.put("userId", mid.toString());
    map.put("userName", mname.toString());
    if (pic != null && !"".equals(pic)) {
     map.put("pic", Constant.UPLOAD_USER_IMAGE_DIR + pic);
    }
   } else {
    map.put("result", "false");
   }
  } catch (Exception e) {
   logger.error("isLogin", e);
  }
  return SUCCESS;
 }

public Map<String, String> getMap() {
  return map;
 }

 public void setMap(Map<String, String> map) {
  this.map = map;
 }

}

 代码很简单，这里采用注解的方式，这是利用struts2-json-plugin这个插件，采用json的数据传递格式与前台js交互。注意：这里map当然可以根据需要定义其他的存数数据的集合和数据类型。但是一定要有get方法，否则前台将不能正常得到数据信息（好好研究下struts2-json-plugin这个插件就知道了）。很方便 

 

前台代码：

function isLogin() {
 $.ajax( {
  type : 'post',
  url : basePath+'/front/baser_ajax!isAreadyLogin.action',
  dataType : 'json',
  success : isLoginCallback
 });
}

function isLoginCallback(data) {
 var htmlCode = "";
 if (data.map.result == "true") {
  htmlCode += "<a class='login_act' target='_blank' href=\'" + basePath
    + "/user/visterHome-" + data.map.userId + ".html'>"
    + data.map.userName + "</a>";
  htmlCode += "<a class='login_act' href='javascript:loginOut();'>退出</a>";
  htmlCode += "<a class='file_upload' href='javascript:checkLoginOn();'>上传视频</a>";
  document.getElementById('isLogin').value = data.map.userId;
  $('#afterLoginId_').html(htmlCode);
 }
}

 

这里也很简单，就是通过url : basePath+'/front/baser_ajax!isAreadyLogin.action',跟后台的名为baser_ajax这个action中的isAreadyLogin方法交互，得到一些数据，再填充到页面，

但是对我来说，显然这以上所说的几种解决方案对我来说都不太实际，要改动很多代码，后来看到一篇关于jquery跨域的文章（忘记链接地址了），虽然说的不是很完全，但是对我帮助很大，里面说到采用第三方的一个协议jsonp. 于是就尝试，把  dataType : 'json',换成  dataType : 'jsonp',  后台struts2注解加上params = {
  "callbackParameter", "callback" })，name = "success" 结果搞定。

完整代码：

@SuppressWarnings("serial")
@ParentPackage("json-default")
@Results( { @Result(name = "SUCCESS", type = "json", params = {
  "callbackParameter", "callback" }) })
public class BaserAjaxAction extends BaseAction {

..................}

 

 

function isLogin() {
 $.ajax( {
  type : 'post',
  url : basePath+'/front/baser_ajax!isAreadyLogin.action',
  dataType : 'jsonp',
  success : isLoginCallback
 });
}

function isLoginCallback(data) {
 var htmlCode = "";
 if (data.map.result == "true") {
  htmlCode += "<a class='login_act' target='_blank' href=\'" + basePath
    + "/user/visterHome-" + data.map.userId + ".html'>"
    + data.map.userName + "</a>";
  htmlCode += "<a class='login_act' href='javascript:loginOut();'>退出</a>";
  htmlCode += "<a class='file_upload' href='javascript:checkLoginOn();'>上传视频</a>";
  document.getElementById('isLogin').value = data.map.userId;
  $('#afterLoginId_').html(htmlCode);
 }
}

 

希望对有需要的人有所帮助！

 

 

评论

1 楼 gteam.yu 2011-11-08  

感觉和一般的ajax请求差不多，没有看到跨域的那个部分。（是不是我理解不够哦）