ajax 同步和异步的区别

举个例子：普通B/S模式（同步）AJAX技术（异步）
同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事

异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕

请求方式，分为GET与POST：

 

GET

 

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

 

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

（注：文中的 ajax 表示XMLHTTP请求对象。）

 

 

 1  // 同步传输模式
 2 
 3  function  RequestByGet(nProducttemp,nCountrytemp)
 4  {
 5       var  xmlhttp
 6 
 7       if  (window.XMLHttpRequest)  
 8      {  
 9            // isIE   =   false;  
10           xmlhttp    =     new    XMLHttpRequest();  
11      }  
12       else   if  (window.ActiveXObject)
13      {  
14            // isIE   =   true;  
15           xmlhttp    =     new    ActiveXObject( " Microsoft.XMLHTTP " );  
16      }
17                   
18       // Web page location.
19       var  URL = " http://www.baidu.com/;
20      xmlhttp.open( " GET " ,URL, false);
21      //xmlhttp.SetRequestHeader( " Content - Type " , " text / html; charset=Shift_JIS")
22      xmlhttp.send( null );
23       var  result  =  xmlhttp.status;
24     
25       // OK
26       if (result == 200 )
27      {
28          document.getElementById( " div_RightBarBody " ).innerHTML = xmlhttp.responseText;
29      }
30      xmlhttp  =   null ;
31  }
32 
33 
34  // 异步传输模式
35  var  xmlhttp
36 
37  function  RequestByGet(nProducttemp,nCountrytemp)
38  {
39       if  (window.XMLHttpRequest)  
40      {  
41            // isIE   =   false;  
42           xmlhttp    =     new    XMLHttpRequest();  
43      }  
44       else   if  (window.ActiveXObject)
45      {  
46            // isIE   =   true;  
47           xmlhttp    =     new    ActiveXObject( " Microsoft.XMLHTTP " );  
48      }
49                   
50       // Web page location.
51       var  URL = " http://www.baidu.com/ " ;
52      xmlhttp.open( " GET " ,URL,  true );
53      xmlhttp.onreadystatechange  =  handleResponse;
54       // xmlhttp.SetRequestHeader("Content-Type","text/html; charset=UTF-8")
55      xmlhttp.send( null );  
56  }
57 
58  function  handleResponse()
59  {
60       if (xmlhttp.readyState  ==   4   &&  xmlhttp.status == 200 )
61      {
62          document.getElementById( " div_RightBarBody " ).innerHTML = xmlhttp.responseText;
63          xmlhttp  =   null ;
64      }
65  }
66