基本概述

当浏览器向服务器发送同步请求时,服务处理同步请求的过程中,浏览器会处于等待的状态,服务器处理完请求把数据响应给浏览器并覆盖浏览器内存中原有的数据,浏览器重新加载页面并展示服务器响应的数据。

那么,有没有一种技术,可以让浏览器发送请求给服务器,服务器处理请求的过程中,浏览器不处于等待的状态,并且浏览器接收响应数据的同时不再重新加载整个页面,既请求发送之前的数据不丢失,又能实现页面的局部刷新呢?那就要用到ajax请求——异步请求模型,那么异步请求的原理是什么呢?

我们知道,在同步请求模型中,浏览器是直接向服务器发送请求,并直接接收、处理服务器响应的数据的。这就导致了浏览器发送完一个请求后,就只能干等着服务器那边处理请求,响应请求,在这期间其它事情都做不了。这就像是你到了一个新城市去找房子住,你可以自己去找,在网站上或者是街头小广告上去了解房源信息,找合适自己的那一个,然后去跟房东谈价钱。在这期间你的精力和时间大部分都用到了找房子上,你可能没时间再去找工作或者做其他的事情了。还有一种方式是你找一个租房中介,找你一个代理人,把你的需求告诉他让他来帮你找,在中介给你找房子的同时你还可以去找工作或者做其他的事情。

同步请求

同步XHR通常会导致网络挂起。但开发人员通常不会注意到这个问题,因为在网络状况不佳或服务器响应速度慢的情况下,挂起只会显示同步XHR现在处于弃用状态。建议开发人员远离这个API。

异步请求

异步请求正是基于以上所述的模式,浏览器把请求交给代理对象—XMLHttpRequest(绝大多数浏览器都内置了这个对象),由代理对象向服务器发起请求,接收、解析服务器响应的数据,并把数据更新到浏览器指定的控件上。从而实现了页面数据的局部刷新。异步请求使浏览器不用等待服务器处理请求,不用重新加载整个页面来展示服务器响应的数据,在异步请求发送的过程中浏览器还能进行其它的操作。我们来看一下异步请求的执行流程图:

android 异步请求和同步请求区别 异步请求变同步_http

XMLHttpRequest 支持同步和异步通信。但是,一般来说,出于性能原因,异步请求应优先于同步请求。

原生的Ajax对于异步请求的实现并不好用,特别是不同的浏览器对于Ajax的实现并不完全相同,这就意味着你使用原生的Ajax做异步请求要兼顾浏览器的兼容性问题,对于java程序员来讲这是比较头疼的事情,还好jQuery的出现帮我们解决了兼容性的问题,而且让异步请求的实现更加简单直观。

使用jquery的serialize()方法实现异步请求。

function sentAjax(){
    var formParam = $("#formId").serialize();
    alert(formParam);
    $.ajax({
          type: 'POST',
          url:"<%=basePath%>/manage/test/ajax",
          data: $("#formId").serialize(),
          success: function(getData){
         }
        });
}