AJAX的跨域访问-两种有效的解决方法介绍

  新的W3C策略实现了HTTP跨域访问,还亏我找了很久的资料解决这个问题:

  只需要在servlet中返回的头部信息中添加Access-Control-Allow-Origin这个既可。

  比如我要开放所有我本地的跨域访问,就设置如下:response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1/*");

  这样我本地的A工程中的AJAX请求就可以跨域请求B工程中的servlet。

  代码如下:

  HTML的JS的ajax请求:

  

复制代码 代码如下:

  /* Create a new XMLHttpRequest object to talk to the Web server */

  var xmlHttp = false;

  /*@cc_on @*/

  /*@if (@_jscript_version >= 5)

  try {

  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

  } catch (e) {

  try {

  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

  } catch (e2) {

  xmlHttp = false;

  }

  }

  @end @*/

  if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {

  xmlHttp = new XMLHttpRequest();

  }

  var url = "http://127.0.0.1:2012/esb/servlet/HttpClient?randomType=MIX";

  xmlHttp.open("GET", url, true);

  //Setup a function for the server to run when it's done

  xmlHttp.onreadystatechange = function(){

  if (xmlHttp.readyState == 4) {

  var response = xmlHttp.responseText;

  alert(response);

  }

  }

  //Send the request

  xmlHttp.send(null);

  servlet代码:

  

复制代码 代码如下:

  protected void service(HttpServletRequest req, HttpServletResponse resp)

  throws ServletException, java.io.IOException {

  resp.setHeader("Pragma", "no-cache");

  resp.setHeader("Cache-Control", "no-cache");

  //下面那句是核心

  resp.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1/*");

  resp.setDateHeader("Expires", 0);

  ServletOutputStream sos = resp.getOutputStream();

  try {

  sos.write(obj.toString().getBytes("GBK"));

  } catch (Exception e) {

  System.out.println(e.toString90)

  } finally {

  try {

  sos.close();

  } catch (Exception e) {

  LOG.error(e);

  }

  }

  }

  代码在本机测试是可以的,待过两天,我把servlet放到服务器上去,然后再本地测试。

  上面的方式虽然很完美的解决了问题,但是上面的文章也说了。可能存在安全问题,而且新标准是否都支持还是个问题,所以我们可以套用另外一种取巧的方式来完成同样的效果,因为js不存在跨域问题,如果我们服务器的servlet返回的是JS脚本,那就可以了。我们可以在A工程的js中使用javascript的src来访问B工程的servlet,然后通过servlet输出的js脚本来传递数据。因此根据这个思想我又做了下面代码的测试:

  页面的JS代码:

  

复制代码 代码如下:

  function loadAjax(){

  id="testesbscript";

  oScript = document.getElementById(id);

  var head = document.getElementsByTagName("head").item(0);

  if (oScript) {

  head.removeChild(oScript);

  }

  oScript = document.createElement("script");

  var url = "http://127.0.0.1:2012/esb/servlet/HttpClient?randomType=MIX&success=justHandle

  oScript.setAttribute("id",id);

  oScript.setAttribute("type","text/javascript");

  oScript.setAttribute("language","javascript");

  head.appendChild(oScript);

  }

  //jsutHandle这个函数是反调函数。servlet代码中会使用eval这种方式来执行。

  function justHandle(dd){

  alert(dd);

  }

  servlet的代码:

  

复制代码 代码如下:

  protected void service(HttpServletRequest req, HttpServletResponse resp)

  throws ServletException, java.io.IOException {

  Object obj = "test";

  ServletOutputStream sos = resp.getOutputStream();

  StringBuffer sb = new StringBuffer();

  resp.setCharacterEncoding("GBK");

  resp.setHeader("Charset","GBK");

  resp.setContentType("charset=GBK");

  //下面那句表明是javascript脚本文件

  resp.setContentType("text/javascript");

  sb.append("eval(/""+paramMap.get("success")+"(/'"+obj.toString()+"/')/")");

  try {

  sos.write(sb.toString().getBytes(this.character_encoding));

  } catch (Exception e) {

  System.out.println(e.toString());

  } finally {

  try {

  sos.close();

  } catch (Exception e) {

  System.out.println(e.toString());

  }

  }

  }