Ajax跨域实现代码(后台jsp)

ajax 教程

ajax = asynchronous javascript and xml（异步的 javascript 和 xml）。

在应用时主要是创建xmlhttprequest对象，调用指定服务地址。

但是ie中各个版本支持的不太一样,所以在创建次对象时可能要特殊处理下。

一般如下：

function createxmlhttprequest(){
 var xmlhttp;
 try{
  xmlhttp = new xmlhttprequest();//ie7及以上，其他浏览器
 }catch(e){
  try{
   xmlhttp = new activexobject("msxml2.xmlhttp");//ie6
  }catch(e){
   try{
    xmlhttp = new activexobject("microsoft.xmlhttp");//ie6以下
   }catch(e){
    throw "创建ajax对象失败！";
   }
  }
 }
 return xmlhttp;
 }


 var xmlhttp = createxmlhttprequest();
  xmlhttp.open("get","http://localhost:8080/simpleblog/ajaxtest",true);
  xmlhttp.send(null);
  xmlhttp.onreadystatechange = function(result){
  if(xmlhttp.readystate==4 && xmlhttp.status == 200){
   alter(result.test);
  }
 };

但是浏览器再执行javascript代码时，有个著名的同源策略，这使得跨域请求就不是那么方便了。

那一般都是用什么方式支持跨域呢？

1、通过中间代理服务器，获取要跨域请求的数据。

2、通过iframe内嵌带请求域的页面，来解决跨域访问问题。

3、通过jsonp方式。

4、不过现在已经提出了xmlhttprequest level2(xhr2)允许跨域请求，不过要在server的返回头中显示声明允许跨域请求（浏览器的支持情况：）。

下面简单说下jsonp与xtr2。

jsonp：

jsonp简单的说就是利用<script>标签来实现跨域请求的调用，因为浏览器中脚本的加载是不受同源策略影响的。

function get() {
  var url = 'http://localhost:8080/simpleblog/ajaxtest?callback=callback';
  var script = document.createelement('script'); 
  script.setattribute("type","text/javascript"); 
  script.src = url; 
  document.body.appendchild(script); 
 }
 
 function callback(va){
  alert(va.test);
 }

服务端（java）：

 boolean jsonp = false;
 string cb = this.request.getparameter("callback");
 if (cb != null) {
 jsonp = true;
 response.setcontenttype("text/javascript");
 } else {
  response.setcontenttype("application/x-json");
 }
 printwriter out = response.getwriter();
 if (jsonp) {
  try {
   out.println(cb + "({\"test\":\"1\"})");
   out.flush();
   out.close();
  } catch (exception e) {
   throw e;
  }
 }

这样就可以实现跨域调用了。

而我们经常用的jquery已经实现了此类方式的封装，使用起来更简单。

$(document).ready(function (){
  $('#jqueryajax').bind('click', function(){
  $.ajax({
   type: 'get',
   async: false,
   url: 'http://localhost:8080/simpleblog/ajaxtest1',
   datatype: 'jsonp',
   jsonp: 'callback',
   success: function(json){
    alert(json.result);
   },
   error: function(){
    alert('fail');
   }
  });
  });
 });

服务端（java）：
我用了struts是这样写的：

public class ajaxtest1 extends actionsupport {

 private string result;
 public string getresult() {
  return result;
 }
 
 public string execute() {
 
  this.result = "1";
  return "jqueryajax";
 }
}

配置文件：

<action name="ajaxtest1" class="ajaxtest1">
 <result name="jqueryajax" type="json">
  <param name="callbackparameter">callback</param>
 </result>
 </action>

下面说说xtr2：

这个就更简单了,直接创建调用即可。

function createcorsrequest(method,url){
  var xhr=new xmlhttprequest();
  if('withcredentials' in xhr){
  xhr.open(method,url,true);
  }else if(typeof xdomainrequest!='undefined'){
   xhr=new xdomainrequest(); 
   xhr.open(method,url);
  }else{
   xhr=null;
  }
  return xhr;
 }
 
 function xhr2(){
  var request=createcorsrequest('get','http://localhost:8080/simpleblog/ajaxtest1');
  if(request){
  request.onload=function(){
   alert(request.responsetext);
  }
  request.onerror=function(e){
   alert('error');
  }
  request.send();
  } 
 }

服务端：其实只要在返回response中设置
httpresponse.addheader("access-control-allow-origin", "*");
即可。