Ajax跨域?qū)崿F(xiàn)代碼(后臺(tái)jsp)

更新時(shí)間：2017年01月21日 17:13:13 投稿：mdxy-dxy

這篇文章主要介紹了Ajax跨域?qū)崿F(xiàn)代碼(后臺(tái)jsp),需要的朋友可以參考下

AJAX 教程

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。

在應(yīng)用時(shí)主要是創(chuàng)建XMLHttpRequest對(duì)象，調(diào)用指定服務(wù)地址。

但是IE中各個(gè)版本支持的不太一樣,所以在創(chuàng)建次對(duì)象時(shí)可能要特殊處理下。

一般如下：

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 "創(chuàng)建AJAX對(duì)象失??！";
   }
  }
 }
 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);
  }
 };

但是瀏覽器再執(zhí)行javascript代碼時(shí)，有個(gè)著名的同源策略，這使得跨域請(qǐng)求就不是那么方便了。

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

1、通過中間代理服務(wù)器，獲取要跨域請(qǐng)求的數(shù)據(jù)。

2、通過iframe內(nèi)嵌帶請(qǐng)求域的頁(yè)面，來(lái)解決跨域訪問問題。

3、通過jsonp方式。

4、不過現(xiàn)在已經(jīng)提出了XMLHttpRequest Level2(XHR2)允許跨域請(qǐng)求，不過要在server的返回頭中顯示聲明允許跨域請(qǐng)求（瀏覽器的支持情況：http://caniuse.com/#feat=xhr2）。

下面簡(jiǎn)單說下jsonp與xtr2。

jsonp：

jsonp簡(jiǎn)單的說就是利用<script>標(biāo)簽來(lái)實(shí)現(xiàn)跨域請(qǐng)求的調(diào)用，因?yàn)闉g覽器中腳本的加載是不受同源策略影響的。

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);
 }

服務(wù)端（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;
  }
 }

這樣就可以實(shí)現(xiàn)跨域調(diào)用了。

而我們經(jīng)常用的jquery已經(jīng)實(shí)現(xiàn)了此類方式的封裝，使用起來(lái)更簡(jiǎn)單。

$(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');
   }
  });
  });
 });

服務(wù)端（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：

這個(gè)就更簡(jiǎn)單了,直接創(chuàng)建調(diào)用即可。

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();
  } 
 }

服務(wù)端：其實(shí)只要在返回response中設(shè)置
httpResponse.addHeader("Access-Control-Allow-Origin", "*");
即可。

您可能感興趣的文章: