ajax同步和异步的区别

article/2025/8/28 4:46:45

一、同步访问和异步访问的区别，先从概念上区别：
1、同步的概念应该是来自于操作系统中关于同步的概念。
2、不同进程为协同完成某项工作而在先后次序上调整(通过阻塞,唤醒等方式)。同步强调的是顺序性，谁先谁后；异步则不存在这种顺序性。
3、同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作。
4、异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。
二、同步访问的代码详细说明
以java的springmvc为例子。
页面端：首先是html端(jsp端),用户操作界面后发送请求到后台，不管是form表单提交，还是ajax提交，都可以设置请求为同步的

<!--form表单提交 -->
<form class="log-page" id="loginForm"/><h3>登录您的账号</h3><div class="input-prepend"><span class="add-on"><i class="icon-user"></i></span><input class="input-xlarge" type="text" name="username" placeholder="邮箱账号" value="1121121@11.com"/></div>...
</form>
<!--js控制ajax提交表单 -->
function loginSave() {if($.trim(username)==''){alert('账号不能为空');isBegin=1;return false;...var aa = "http://www.baidu.com";...$.ajax({type : "POST",async : false, // 设置同步方式  false代表异步，true代表同步cache : false,url : aa,data : $("#loginForm").serializeArray(),success : function(result) {result = eval("(" + result + ")");if (result.status == 'true' || result.status == true) {window.location.href=bb;}else{}}});}

服务端：然后后台接收请求后进行处理了在返回

/***  这里是springmvc的正常post请求*/@RequestMapping(value = "/list")public String list(Model model, HttpServletRequest request,String flag,String studentName)throws Exception {//select date_format(insertDate, '%Y-%m-%d %H:%i:%s')//CONVERT(varchar, insertDate, 120 )//to_char(insertDate,'yyyy-mm-dd,hh24:mi:ss')String sql="select a.* from t_student a where 1=1 ";if(studentName!=null&&!"".equals(studentName)){sql+=" and studentName like '%"+studentName+"%'";}sql+=" order by id desc";List list = db.queryListForPage(sql, request);request.setAttribute("list", list);return "/admin/student/list";}/*** 这里是springmvc的ajax提交*/@RequestMapping(value = "/editSave")public ResponseEntity editSave(Model model,HttpServletRequest request,Long id,String flag,String studentName,String age,String sex,String remark) throws Exception{int result = 0;if(id!=null){String sql="update t_student set studentName=?,age=?,sex=?,remark=? where id=?";result = db.update(sql, new Object[]{studentName,age,sex,remark,id});}else{String sql="insert into t_student(studentName,age,sex,remark) values(?,?,?,?)";result = db.update(sql, new Object[]{studentName,age,sex,remark});}if(result==1){return renderData(true,"操作成功",null);}else{return renderData(false,"操作失败",null);}}

上面两段代码，一个是post请求使用，一个是ajax请求使用，都是同步的，也就是说用户的下一步操作必须等到代码执行完成后。

讲解：当页面端提交后，整个页面是不能点击的，必须要等到服务端处理完成后返回到页面端，用户才能继续点击页面，进行下一步操作，这样一个等待的流程叫做同步，看效果截图：
同步异步1
三、异步访问的代码详细说明
以java的springmvc为例子。

页面端：首先是html端(jsp端),用户操作界面后发送请求到后台，ajax可以设置为异步

function loginSave() {if($.trim(username)==''){alert('账号不能为空');isBegin=1;return false;...var aa = "http://www.baidu.com";...$.ajax({type : "POST",async : false, // 设置同步方式  false代表异步，true代表同步cache : false,url : aa,data : $("#loginForm").serializeArray(),success : function(result) {result = eval("(" + result + ")");if (result.status == 'true' || result.status == true) {window.location.href=bb;}else{}}});}

服务端：用户点击后，程序还是会运行，但是界面端用户就不需要等待了，可以直接进行其他操作

/*** 这里是springmvc的ajax提交，可以进行异步操作，其实同步异步发生在客户端，服务端还是照常进行的，服务端只管命令来了一行行代码执行。*/@RequestMapping(value = "/editSave")public ResponseEntity editSave(Model model,HttpServletRequest request,Long id,String flag,String studentName,String age,String sex,String remark) throws Exception{int result = 0;if(id!=null){String sql="update t_student set studentName=?,age=?,sex=?,remark=? where id=?";result = db.update(sql, new Object[]{studentName,age,sex,remark,id});}else{String sql="insert into t_student(studentName,age,sex,remark) values(?,?,?,?)";result = db.update(sql, new Object[]{studentName,age,sex,remark});}if(result==1){return renderData(true,"操作成功",null);}else{return renderData(false,"操作失败",null);}}