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");     
%>