web中的同步请求和异步请求的差别(重点是ajax中的同步与异步)

此前，对于web中同步请求和异步请求的概念模糊不清，不过对于这样的知识盲点，不去克服的话都不好意思说自己是一名前端开发人员了[捂脸][捂脸]。还好，功夫不负有心人。通过自己的方式终于让自己理解了，这两个概念，因此，也想把自己的理解作博文，跟大家分享，如果说的不对，还请各位同行多多指教。

一、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中同步请求与异步请求的代码示例，相信通过代码的比较，大家理解起来就不难了：

[javascript]  view plain  copy

1. <script>  
2.                 //同步示例  
3.     function RequestByGet(nProducttemp, nCountrytemp) {  
4.         var xmlhttp  
5.         if(window.XMLHttpRequest) {  
6.             //isIE   =   false;    
7.             xmlhttp = new XMLHttpRequest();  
8.         } else if(window.ActiveXObject) {  
9.             //isIE   =   true;    
10.             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
11.         }  
12.   
13.         //Web page location.  
14.         var URL = "http://www.baidu.com/;  
15.         xmlhttp.open("GET", URL, false);  
16.         //xmlhttp.SetRequestHeader("Content-Type","text/html; charset=Shift_JIS")  
17.         xmlhttp.send(null);  
18.         var result = xmlhttp.status;  
19.   
20.         //OK  
21.         if(result == 200) {  
22.             document.getElementById("div_RightBarBody").innerHTML = xmlhttp.responseText;  
23.         }  
24.         xmlhttp = null;  
25.     }  
26. </script>  

[javascript]  view plain  copy

1. <script>  
2. //异步示例  
3.     var xmlhttp  
4.   
5.     function RequestByGet(nProducttemp, nCountrytemp) {  
6.         if(window.XMLHttpRequest) {  
7.             //isIE   =   false;    
8.             xmlhttp = new XMLHttpRequest();  
9.         } else if(window.ActiveXObject) {  
10.             //isIE   =   true;    
11.             xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
12.         }  
13.   
14.         //Web page location.  
15.         var URL = "http://www.baidu.com/";  
16.         xmlhttp.open("GET", URL, true);  
17.         xmlhttp.onreadystatechange = handleResponse;  
18.         //xmlhttp.SetRequestHeader("Content-Type","text/html; charset=UTF-8")  
19.         xmlhttp.send(null);  
20.     }  
21.   
22.     function handleResponse() {  
23.         if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {  
24.             document.getElementById("div_RightBarBody").innerHTML = xmlhttp.responseText;  
25.             xmlhttp = null;  
26.         }  
27.     }  
28. </script>  

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

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

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

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