AJAX的同步与异步

ajax给了我们很多方便，不用页面跳来跳去，也让页面的功能越来越强大，用ajax可以实现输入框的自动匹配、用户注册验证用户名是否存在、登录验证其密码是否正确等。但是昨天，做一个搜索地图模块时，纠结了一个下午加今天一个早上，就因为不懂ajax的基本原理，导致一直调试，同样的值，在一个地方alert两次，前面为空，后面可以。通过查阅相关资料，发现其根本原因就是ajax的异步特点。在你调用的服务器还未响应，值还未返回时，就alert了，所以固然没有值。下面就我理解，举两个例子说明下，也当做备忘：

先创建一个XMLHttpRequest 对象：

[javascript] view plain copy print ?

1. function createAjaxObject(){  
2.        var xmlHttpRequest;  
3.            try{  
4.                xmlHttpRequest = new XMLHttpRequest();// Firefox, Opera 8.0+, Safari   
5.            }catch(e){  
6.                try{  
7.                    xmlHttpRequest = new ActiveXObject("Msxm12.XMLHTTP");// Internet Explorer6.0+   
8.                }catch(e){  
9.                    try{  
10.                        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");//Internet Explorer 5.5+   
11.                    }catch(e){  
12.                        alert("你这是什么破浏览器啊！");  
13.                        return false;  
14.                    }                  
15.                }  
16.            }  
17.            return xmlHttpRequest;  
18.        }  

 function createAjaxObject(){
        var xmlHttpRequest;
            try{
                xmlHttpRequest = new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
            }catch(e){
                try{
                    xmlHttpRequest = new ActiveXObject("Msxm12.XMLHTTP");// Internet Explorer6.0+
                }catch(e){
                    try{
                        xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");//Internet Explorer 5.5+
                    }catch(e){
                        alert("你这是什么破浏览器啊！");
                        return false;
                    }                
                }
            }
            return xmlHttpRequest;
        }

异步方法使用：

[javascript] view plain copy print ?

1. function getJSON2(){  
2.             var tmp;  
3.             var xmlHttpRequest=createAjaxObject();  
4.             xmlHttpRequest.open('GET',url,true);//GET即采用get方法，url为请求的地址，true设置为异步，默认就是异步，所以也可以不用写   
5.             xmlHttpRequest.send(null);  
6.             xmlHttpRequest.onreadystatechange = function(){  //注册回调函数   
7.                 //readyState有四种可能值：0——请求未初始化（在调用 open() 之前），1——请求已提出（调用 send() 之前），2——请求已发送（这里通常可以从响应得到内容头部），3——请求处理中，4——请求已完成。   
8.                 if(xmlHttpRequest.readyState==4){  
9.                     if(xmlHttpRequest.status == 200){  
10.                         alert(xmlHttpRequest.responseText);  
11.                         //var json = eval('('+xmlHttpRequest.responseText+')');   
12.                         //alert(json.Stops[0].StopName);   
13.                        //tmp = json.Stops[0].StopName;   
14.                        //alert(tmp);//有值   
15.                      }  
16.                 }  
17.             }  
18.             //alert(tmp); //没有值   
19.             xmlHttpRequest=null;  
20.         }  

function getJSON2(){
            var tmp;
            var xmlHttpRequest=createAjaxObject();
            xmlHttpRequest.open('GET',url,true);//GET即采用get方法，url为请求的地址，true设置为异步，默认就是异步，所以也可以不用写
            xmlHttpRequest.send(null);
            xmlHttpRequest.onreadystatechange = function(){  //注册回调函数
                //readyState有四种可能值：0——请求未初始化（在调用 open() 之前），1——请求已提出（调用 send() 之前），2——请求已发送（这里通常可以从响应得到内容头部），3——请求处理中，4——请求已完成。
                if(xmlHttpRequest.readyState==4){
                    if(xmlHttpRequest.status == 200){
                        alert(xmlHttpRequest.responseText);
                        //var json = eval('('+xmlHttpRequest.responseText+')');
                        //alert(json.Stops[0].StopName);
                       //tmp = json.Stops[0].StopName;
                       //alert(tmp);//有值
                     }
                }
            }
            //alert(tmp); //没有值
            xmlHttpRequest=null;
        }

同步方法：

[javascript] view plain copy print ?

1. function getJSON2(){  
2.             var tmp;  
3.             var xmlHttpRequest=createAjaxObject();  
4.             xmlHttpRequest.open('GET',url,false);//GET即采用get方法，url为请求的地址，false设置为同步，默认就是异步，所以也可以不用写   
5.             xmlHttpRequest.send(null);  
6.             var result = xmlHttpRequest2.status;  
7.                     if(result == 200){  
8.                         alert(xmlHttpRequest.responseText);  
9.                         //var json = eval('('+xmlHttpRequest.responseText+')');   
10.                         //alert(json.Stops[0].StopName);   
11.                        //tmp = json.Stops[0].StopName;   
12.                        //alert(tmp);//有值   
13.             }  
14.             //alert(tmp); //有值,成功，但是破坏了ajax异步的初衷。   
15.             xmlHttpRequest=null;  
16.         }  

function getJSON2(){
            var tmp;
            var xmlHttpRequest=createAjaxObject();
            xmlHttpRequest.open('GET',url,false);//GET即采用get方法，url为请求的地址，false设置为同步，默认就是异步，所以也可以不用写
            xmlHttpRequest.send(null);
            var result = xmlHttpRequest2.status;
                    if(result == 200){
                        alert(xmlHttpRequest.responseText);
                        //var json = eval('('+xmlHttpRequest.responseText+')');
                        //alert(json.Stops[0].StopName);
                       //tmp = json.Stops[0].StopName;
                       //alert(tmp);//有值
            }
            //alert(tmp); //有值,成功，但是破坏了ajax异步的初衷。
            xmlHttpRequest=null;
        }

分析原因：
        如果是异步(true)，返回值是null，因为程序执行完send后不等xmlhttp的响应，而继续执行下一条js语句，所以tmp还没有来的及变化就已经返回null了。所以如果想获得xmlhttp返回值必须用同步，异步无法得到返回值。 这就是为什么我在后面的操作一直取不到这个函数的返回值的缘故了。ajax的同步破坏了ajax异步的初衷，除非忘不得已（比如需要对响应的数据进行进一步处理）才使用。
 还有，同步异步使用xmlhttp池时都要注意：取得xmlhttp时只能新建xmlhttp，不能从池中取出已用过的xmlhttp，（这种情况主要发生在需要循环的时候）因为被使用过的xmlhttp的readyState为4，所以同步异步都会send但不执行onreadystatechange。