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：服务器返回结果，回调函数用来处理返回结果

下面是执行的结果：