ajax同步和异步的区别

一、同步访问和异步访问的区别，先从概念上区别：
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="[e-mail]"/>
    </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请求使用，都是同步的，也就是说用户的下一步操作必须等到代码执行完成后。

讲解：当页面端提交后，整个页面是不能点击的，必须要等到服务端处理完成后返回到页面端，用户才能继续点击页面，进行下一步操作，这样一个等待的流程叫做同步，看效果截图：

三、异步访问的代码详细说明
以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);
			}
		}

上面两段代码，ajax请求使用，可以设置为异步，下一步操作可以不用等待服务器代码执行完成后就可以进行其他操作了。

讲解：当页面端提交后，整个页面是可以点击的，不是必须要等到服务端处理完成后返回到页面端，用户就可以继续点击页面，进行下一步操作，这样一流程叫做异步，看效果截图：