本系列博客汇总在这里：AJAX 汇总

一、什么是同步和异步？

AJAX（5）_AJAX 的同步和异步_xml

二、演示代码

1、同步

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
//定义xmlhttprequest
var xmlHttp;
function ajaxFunction()
{
	try
	{	 
	   xmlHttp=new XMLHttpRequest();
	}
	catch (e)
	{
		try 
		{
	    	xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	    }
	    catch (e)
	    {
	    	try
	    	{
	       		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	    	}
	    	catch (e)
	    	{
	       		alert("您的浏览器不支持AJAX！");
	       		return false;
	    	}
     	}
  	}
}
function validUser(obj)
{
	//创建XMLHttpRequest
	ajaxFunction();
	var url = "/ajax_demo/valid";	
	//打开连接,第一个参数是请求方式，第二个参数是请求地址，第三个参数是同步还是异步，true异步，false是同步
	xmlHttp.open('post', url, false);
	//如果是post请求必须设置,setRequestHeader必须放在open下面
	xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
	//接受服务器 的响应
	xmlHttp.onreadystatechange = _callback;
	var data = "username="+obj.value;
	//发送数据,如果是get请求数据是在url上传递，不需要发送数据,send必须在最后调用。
	xmlHttp.send(data);
	alert("111");	
}
function _callback()
{
	alert("222");
	//readyState==4请求完成
	if(xmlHttp.readyState == 4)
	{
		//服务器响应正确
		if(xmlHttp.status == 200)
		{
			//接收服务器的响应数据
			var result = xmlHttp.responseText;
			if(result == 'error')
			{
				document.getElementById('tip').innerHTML = '用户名已存在';
			}
			else
			{
				document.getElementById('tip').innerHTML = '';
			}
		}
	}
} 
</script>
</head>
<body>
<form>
<table>
	<tr>
		<td>用户名</td>
		<td><input id="username" type="text" onblur="validUser(this)"><span id='tip'></span></td>
	</tr>
</table>
</form>
</body>
</html>

AJAX（5）_AJAX 的同步和异步_其他_02
AJAX（5）_AJAX 的同步和异步_ajax_03

2、异步

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
//定义xmlhttprequest
var xmlHttp;
function ajaxFunction()
{
	try
	{	 
	   xmlHttp=new XMLHttpRequest();
	}
	catch (e)
	{
		try 
		{
	    	xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	    }
	    catch (e)
	    {
	    	try
	    	{
	       		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
	    	}
	    	catch (e)
	    	{
	       		alert("您的浏览器不支持AJAX！");
	       		return false;
	    	}
     	}
  	}
}
function validUser(obj)
{
	//创建XMLHttpRequest
	ajaxFunction();
	var url = "/ajax_demo/valid";	
	//打开连接,第一个参数是请求方式，第二个参数是请求地址，第三个参数是同步还是异步，true异步，false是同步
	xmlHttp.open('post', url, true);
	//如果是post请求必须设置,setRequestHeader必须放在open下面
	xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
	//接受服务器 的响应
	xmlHttp.onreadystatechange = _callback;
	var data = "username="+obj.value;
	//发送数据,如果是get请求数据是在url上传递，不需要发送数据,send必须在最后调用。
	xmlHttp.send(data);
	alert("111");	
}
function _callback()
{
	alert("222");
	//readyState==4请求完成
	if(xmlHttp.readyState == 4)
	{
		//服务器响应正确
		if(xmlHttp.status == 200)
		{
			//接收服务器的响应数据
			var result = xmlHttp.responseText;
			if(result == 'error')
			{
				document.getElementById('tip').innerHTML = '用户名已存在';
			}
			else
			{
				document.getElementById('tip').innerHTML = '';
			}
		}
	}
} 
</script>
</head>
<body>
<form>
<table>
	<tr>
		<td>用户名</td>
		<td><input id="username" type="text" onblur="validUser(this)"><span id='tip'></span></td>
	</tr>
</table>
</form>
</body>
</html>

AJAX（5）_AJAX 的同步和异步_ajax_04
AJAX（5）_AJAX 的同步和异步_其他_05
如有错误，欢迎指正！