Ajaxクロスドメイン実現コード(バックグラウンドjsp)


AJAX教程
AJAX=Aynchronous 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 Level 2(XHR 2)が提案されていますが、Serverの返却先にドメイン横断要求を許可する旨の声明を表示します。
以下は簡単にjsopとxtr 2を言います。
jsop:
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>
次にxtr 2について説明します
これはもっと簡単です。直接に呼び出しを作成すればいいです。

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();
  } 
 }
サービス:実際にはレスポンスの設定が必要です。
http Resonse.addHeader(「Access-Coontrol-Origin」);
いいです。