ajax同步和异步的差异

一、web中的同步和异步：

（1）同步请求：顺序处理，即当我们向服务器发出一个请求时，在服务器没返回结果给客户端之前，我们要一直处于等待状态直至服务器将结果返回到客户端，我们才能执行下一步操作。例如普通的B/S模式就是同步请求（注：B/S模式 也即服务器与浏览器通信主要采用HTTP协议；通信方式为“请求——响应”，浏览器发出请求；服务器做出响应。）

（2）异步请求：并行处理，当我们向服务器发出一个请求时，在服务器没返回结果之前，我们还是可以执行其他操作。例如AJAX技术就是异步请求。


二、ajax中的同步与异步：

不要怀疑，在ajax中其实也存在着同步请求的选项，下面就让我们重点来说说这块的内容。各位小伙伴搬好小板凳坐好了吗？咱们要开始讲解了哈：


ajax的open()方法

用法：open(http-method，url，async，userID，password)

后面是帐号和密码，在禁止匿名访问的http页面中，需要用户名和口令。

ajax.open方法中，第3个参数是设同步或者异步。prototype等js类库一般都默认为异步，即设为true。 先说下同步的情况下，js会等待请求返回，获取status。不需要onreadystatechange事件处理函数。 而异步则需要onreadystatechange事件处理，且值为4再正确处理下面的内容。

首先看看异步处理方式。

其中async是一个布尔值。如果是异步通信方式(true)，客户机就不等待服务器的响应；如果是同步方式(false)，客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式，在某些页面中，可能会发出多个请求，甚至是有组织有计划有队形大规模的高强度的request，而后一个是会覆盖前一个的，这个时候当然要指定同步方式：Flase。

请求方式

GET

最为常见的HTTP请求，普通上网浏览页面就是GET。GET方式的参数请求直接跟在URL后，以问号开始。（JS中用window.location.search获得）。参数可以用encodeURIComponent进行编码，使用方式：

1

var EnParam = encodeURIComponent(param);

URL只支持大约2K的长度，即2048字符数；

使用GET进行AJAX请求时候会缓存导致出现的页面不是正确的，一般方法加random参数值；

ajax.send(null)。

POST

向服务器提交数据用到。

需要将form表单中的值先取出转换成字符串，用&符号连接，（同GET传参数一样）；

提交数据量2GB；

使用ajax.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’)，处理提交的字符串；

ajax.send(strings)，这个strings表示form中需要提交的内容，例如a=1&b=2类似这样的字符串。

下面是ajax中同步请求与异步请求的代码示例，相信通过代码的比较，大家理解起来就不难了：

 
 

   
   

    
    

   
   
   
   

    
    

     
     		<script>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
                  
     
     //同步示例
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     function RequestByGet(nProducttemp, nCountrytemp) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     var xmlhttp
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     if(
     
     window.XMLHttpRequest) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     //isIE   =   false;  
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     					xmlhttp = 
     
     new XMLHttpRequest();
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				} 
     
     else 
     
     if(
     
     window.ActiveXObject) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     //isIE   =   true;  
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     					xmlhttp = 
     
     new ActiveXObject(
     
     "Microsoft.XMLHTTP");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				}
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     //Web page location.
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     var URL = 
     
     "http://www.baidu.com/;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				xmlhttp.open("GET
     
     ", URL, false);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				//xmlhttp.SetRequestHeader("Content-Type
     
     ","text/html; charset=Shift_JIS
     
     ")
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				xmlhttp.send(null);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				var result = xmlhttp.status;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				//OK
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				if(result == 200) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     					document.getElementById("div_RightBarBody
     
     ").innerHTML = xmlhttp.responseText;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				xmlhttp = null;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		</script>
    
    
   
   
 
 

 
 

   
   

    
    

   
   
   
   

    
    

     
     		<script>
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
     
     //异步示例
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     var xmlhttp
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     function RequestByGet(nProducttemp, nCountrytemp) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     if(
     
     window.XMLHttpRequest) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     //isIE   =   false;  
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     					xmlhttp = 
     
     new XMLHttpRequest();
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				} 
     
     else 
     
     if(
     
     window.ActiveXObject) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     //isIE   =   true;  
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     					xmlhttp = 
     
     new ActiveXObject(
     
     "Microsoft.XMLHTTP");
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				}
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     //Web page location.
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     var URL = 
     
     "http://www.baidu.com/";
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				xmlhttp.open(
     
     "GET", URL, 
     
     true);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				xmlhttp.onreadystatechange = handleResponse;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     //xmlhttp.SetRequestHeader("Content-Type","text/html; charset=UTF-8")
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				xmlhttp.send(
     
     null);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			}
    
    
   
   

   
   

    
    

   
   
   
   

    
    
 
    
    
   
   

   
   

    
    

   
   
   
   

    
    
			
     
     function handleResponse() {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
				
     
     if(xmlhttp.readyState == 
     
     4 && xmlhttp.status == 
     
     200) {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
					
     
     document.getElementById(
     
     "div_RightBarBody").innerHTML = xmlhttp.responseText;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     					xmlhttp = 
     
     null;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		<
     
     /script>
    
    
   
   
 
 

对比过上面的代码大家是不是清晰多了呢？

三、Ajax如何确定选择同步还是异步：

相信这是部分初学者包括我在内一直困惑的问题，就是什么时候该选择同步，什么时候该选择异步呢？

首先要清楚Ajax中的同步选择是为极少数既不能使用异步调用也不能重新载入整个页面的情况而准备的。而异步处理是为避免了服务器检索时候的延时问题，因为你的访客可以继续在页面进行操作，而要求的信息也可以在更新页面的同时得到处理。