Ajax入门实例

最近研究了一下Ajax，越看越有趣。Ajax其实就是JavaScript+DOM+CSS+XMLHttpRequest的结合体。前三个实现了 DHTML（动态HTML），再加上XMLHttpRequest后，就成了Ajax。说Ajax 改变了用户的浏览体验，我觉得其实就是Ajax让用户能够在网页上执行连续不间断的操作，就和使用CS程序一样。之所以能够连续不断操作，是因为Ajax是异步的，用Ajax与后台通信，不会打断用户的操作（比如刷新界面等）。真的很不错。昨天从优快云上看到一个用Ajax技术实现的网络操作系统Ajax13，进去试了一把，爽！

下面是我刚学习Ajax做的一个程序：登录验证

用户输入用户名和密码后到服务器验证，之后返回结果，如果验证失败，就弹出对话框提示，否则就跳转到其他页面。

1.页面

< form  name ="myform"  action ="login.do"  method ="post"  onSubmit ="return check()" >
           Name:  < input  type =text  id ="usr"  name ="usr" >< br >
           Password:  < input  type =password  id ="pwd"  name ="pwd" >< br >
            
            < input  type =submit  />  
</ form >

2.JavaScript

< script type = " text/javascript " >
     var  xmlRequest  =   null ;
     var  READY_STATE_UNLOAD  =   0 ;
     var  READY_STATE_LOADING  =   1 ;
     var  READY_STATE_LOADED  =   2 ;
     var  READY_STATE_INTERACTIVE  =   3 ;
     var  READY_STATE_COMPLATE  =   4 ;
            
     // 获取XMLHttpRequest对象
     function  getXMLHttpRequest()  {
         if  (window.XMLHttpRequest)  ... {
                   return   new  XMLHttpRequest();
        }   else   ... {
                   return   new  ActiveXObject( " Microsoft.XMLHTTP " );
        }
    }
        
     function  check()  {
             // 获得用户输入的用户名和密码
             var  params  =   " usr= "   +  document.getElementById( " usr " ).value  +   " &pwd= "   +  document.getElementById( " pwd " ).value;
                
             sendRequest( " login " , params,  " get " );
        
             return   false ;
    }

                       // 发送请求
     function  sendRequest(url, params, method)  {
                      if  ( ! method)  ... {
                               method = " post " ;
                         }
                 ... ... ...

                           //获得XMLHttpRequest对象
                        xmlRequest  =  getXMLHttpRequest();
                     if  (xmlRequest)  ... {
                               // 设置回调函数
                               xmlRequest.onreadystatechange = callBack;
                    
                              // 打开连接
                              xmlRequest.open(method, url,  true );
                              xmlRequest.setRequestHeader( " Content-Type " ,  " application/x-www-form-urlencoded " );
                              // 设置参数
                             xmlRequest.send(params);
                     }
                
             }
            
                      // 回调函数
              function  callBack()  {
                         var  ready  =  xmlRequest.readyState;
                         var  data  =   null ;
                
                     if  (ready  ==  READY_STATE_COMPLATE)  ... {
                                  data  =  xmlRequest.responseXML;
                    
                                    // 获得返回结果
                                   var  flag  =  data.getElementsByTagName( " flag " )[ 0 ].firstChild.nodeValue;
                    
                                if  (flag  ==   " false " )  ... {
                                        alert( ' 用户名或密码错误！请重新输入！ ' );
                                 }   else   ... {
                                            // 打开新窗口
                                          window.open( " ok " ,  " _top " );
                                    }
                  }                  
    }
            
</ script > ...

执行的过程是这样的：

Step1：获得XMLHttpRequest对象

Step2：设置请求URL，参数，回调函数

Step3：将请求发送给服务器

Step4：服务器返回结果，回调函数用来处理返回结果

下面是执行的结果：