Ajax原理介紹及跨域解決方案

1.Ajax原理介紹

   Ajax 全名叫"Asynchronous Javascript And XML" (異步的Javascript and XML)，是一種建立交互式網頁應用的網頁開發技術

與傳統的web應用比較，ajax 應用能夠僅向服務器發送並取回必須的數據,它使用SOAP或者Web Service接口，並在客戶端採用Javascript處理來自服務器的響應, 由於服務器和瀏覽器之間交換的數據大量減小, 從而提升性能的提高,大大減小了web服務器的處理時間

   Ajax工做原理:

Ajax的工做原理至關於在用戶和服務器之間加了一箇中間層ajax引擎,使用戶與服務器響應異步化, 並非全部的用戶請求都提交給服務器,使一些數據驗證和數據處理都交給Ajax引擎本身來作, 只有肯定須要從服務器讀取新數據時再由ajax引擎代爲向服務器提交請求, 工做流程圖以下:

Ajax其核心有Javascript, XMLHttpRequest,DOM對象組成, 經過XMLHttpRequest對象來向服務器發異步請求,從服務器得到數據, 而後Javascript來操做DOM使界面更新

下面咱們來看一下在實際項目當中咱們對ajax的使用:

/*validate username and password*/
function validate_user(username,password){
   if(username==''){
          $("input[name='username']").focus();
          $("#checkUser").css('display','block');
          return false;
   }else if(password==''){
          $("input[name='password']").focus();
          $("#checkPwd").css('display','block');
          return false;
   }else {
         //這裏咱們使用的是jquery, jquery自己對ajax進行了封裝
          $.ajax({
             type:"POST",//POST提交
             url:"/platform/login",//提交請求地址
             data:"username=" + username + "&password=" + password,//傳輸數據
             success:function(data){
                //請求成功
                if(data=='success'){
                   location.href="/platform/index";
                }else{
                  $("#existPwd").css('display','block');
                   $("#password").focus();
                  $.unblockUI();
                  return false;
                }
             }
          });
   }
}

Ajax優勢和缺點

優勢：

• 頁面無刷新,在頁面內與服務器通訊,給用戶的體驗很是的好

• 使用異步的方式與服務器通訊, 不須要打斷用戶的操做,具備快速的響應能力

        

缺點:

• 安全問題, 開發者很容易暴漏數據和服務器邏輯, 容易讓黑客從遠端服務器創建新的攻擊，好比跨站點腳本攻擊, SQL注入攻擊

• 對搜索引擎的支持比較弱    

2.跨域解決方案

所謂的跨域是指從A.com 到 B.com系統之間的請求數據訪問, 打個比方公司有一個用戶權限管理權限系統, 想去獲取財務系統的部分帳單數據, 那麼這個時候就是A系統會去發一個request到B系統請求數據返回

下面咱們來講說關於jQuery中咱們如何解決跨域問題的:

$(document).ready(function(){   
     var url='http://localhost:8080/WorkGroupManagment/open/getGroupById"
       +"?id=1&callback=?';   
       
       $.ajax({
         url:url,
         dataType:'jsonp',
         processData: false, 
         type:'get',
         success:function(data){
           alert(data.name);
       },
       error:function(XMLHttpRequest, textStatus, errorThrown) {
           alert(XMLHttpRequest.status);
     }});
   });

使用JSONP方式解決跨域問題

JSON與JSONP格式的區別在於:

 JSON格式

{    "message":"獲取成功",    
     "state":"1",    
     "result":{"name":"zhangsan","id":1,"description":"11"}
}

JSONP格式:

callback({    
     "message":"獲取成功",    
     "state":"1",    
     "result":{"name":"zhangsan","id":1,"description":"11"}
})

後端的代碼:

@RequestMapping(value = "/getGroupById")
  @ResponseBody  public ReturnObject getGroupById(@RequestParam("id") Long id,
      HttpServletRequest request, HttpServletResponse response){
    String callback = request.getParameter("callback");
    ReturnObject result = null;
    Group group = null;    
    try {
      group = groupService.getGroupById(id);
      result = new ReturnObject(group, "獲取成功", Constants.RESULT_SUCCESS);
    } catch (BusinessException e) {
      e.printStackTrace();
      result = new ReturnObject(group, "獲取失敗", Constants.RESULT_FAILED);
    }   
     return result;
  }

另一種方式是jquery插件 jquery-jsonp, 使用方式以下:

var url="http://localhost:8080/WorkGroupManagment/open/getGroupById"
    +"?id=1&callback=?";
$.jsonp({ 
 "url": url,  
 "success": function(data) {
    $("#current-group").text("name:"+data.result.name);
  },  
  "error": function(d,msg) {
    alert("Could not find user "+msg);
  }
});

這種方式的好處在於,服務器端代碼無需任何改動

but以上所說的都是get 跨域方案, 如何使Post方式腫麼辦, 納尼, 下面介紹一下Post的跨域方案-CORS(Cross Origin Resource Sharing)

<%  
    response.setHeader("Access-Control-Allow-Origin","http://www.dmc.com");     
%>