ajax 原理 xmlhttprequest

<script type="text/javascript">

$(function(){
     $("#sss").click(function(){
      
        
           validate();
     });
           
        //  创建xmlHttpRequest对象：

        function createXMLHttpRequest() {
            //表示当前浏览器不是ie,如ns,firefox
            if(window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }

          //客户端事件触发：     

         function validate(){
             if(jQuery.trim("15289657").length!=0){
             //创建XMLHttpRequest
             createXMLHttpRequest() ;
             var url="http://192.168.1.1/api/gm/sss";//  这里后台我是用zendframework    sss代表方法
    
            
    
             //方法地址。处理完成后自动调用，回调。
            xmlHttp.open("GET", url, true);
             //在firebug里面却提示：“xmlhttp is not defined”
             //ff中，只能放在open紧接着的下面 ,别的地方会发生异常 ，别的浏览器不知道 ，反正这样写就没错
             xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            // xmlHttp.setRequestHeader("Content-type", "gb2312");
             xmlHttp.onreadystatechange=callback ;
            
             var version = "version="+ jQuery.trim("15289657")+"&timestampt="+new Date().getTime()
    
             xmlHttp.send(version);//将参数发送到Ajax引擎
    
            
    
             } else{ document.getElementById("userIdSpan").innerHTML = "";}       

          }

    //    结果返回操作：

        function callback(){      
             //alert(xmlHttp.readyState);
             
             
         /*    if(xmlHttp.readyState=='1'){
                 alert('当前状态1');
             }
             
            if(xmlHttp.readyState=='2'){
                 alert('当前状态2');
                 
             }
            
            if(xmlHttp.readyState=='3'){
                 alert('当前状态3');
             }
             if(xmlHttp.readyState=='2'){//这里我是想测试资料上面说的  当readyState小于3时  会出现异常，但是我没有测出来
                alert(xmlHttp.statusText);
                alert(xmlHttp.status);
            }*/
             //在这里要说的是  如果改成同步的话，1-3  这3个状态时获取不到的，因为当执行send（）后，不是立即返回，而是一直等待值的返回（中断了），所以只能接收到状态4，
         //    alert(xmlHttp.statusText);
             if(xmlHttp.readyState==4){ //Ajax引擎初始化
    
                 if(xmlHttp.status==200){ //http协议成功
                     alert(xmlHttp.responseText);
                     //只有为  3,4  时才能执行 ，不然也可能会报异常
                     alert(xmlHttp.getResponseHeader("Content-Type"));
                    
                 }else {
                   alert("请求失败，错误码="+xmlHttp.status);
                }                
    
             }

         }
   });



</script>
<div id='res'></div>

<input type='button' value='ceshi' id='sss'/>

onreadyStateChange事件，当readyState状态值发生改变就会触发此事件。

      其中，xmlHttpRequest提交http请求的过程中，readyState历经五个状态值（0，1，2，3，4），所以callback函数中的alert(xmlHttp.readyState)则会不断输出1，2，3，4。其中0状态不会输出，因为0状态的时候并不执行此事件。

     ff 浏览器中输出的readyState状态顺序一直是：1，2，3，4，1，4当时很纠结，因为状态值含义的分析，结果应该是1，2，3，4。后来折腾半天，才发现是浏览器的问题。不同的浏览器，执行的结果是不同的。使用IE浏览器测试，结果是1，2，3，4。嘎嘎。