Prototype入门_ajax

下面这个是没有应用Prototype:

最近研究了一下Ajax，越看越有趣。Ajax其实就是JavaScript+DOM+CSS+XMLHttpRequest的结合体。前三个实现了DHTML（动态HTML），再加上XMLHttpRequest后，就成了Ajax。说Ajax 改变了用户的浏览体验，我觉得其实就是Ajax让用户能够在网页上执行连续不间断的操作，就和使用CS程序一样。之所以能够连续不断操作，是因为Ajax是异步的，用Ajax与后台通信，不会打断用户的操作（比如刷新界面等）。真的很不错。昨天从CSDN上看到一个用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：服务器返回结果，回调函数用来处理返回结果

下面是执行的结果：

 下面应用Prototype:

上用Ajax实现的一个登录验证程序，可以看到代码有些复杂。但是Java世界里从来就不缺少框架，Ajax也有不少优秀的框架，其中Prototype就是其中之一。通过Prototype可以轻松实现很多功能，关于Prototype请参见：http://www.prototypejs.org/

下面就用Prototype实现登录验证

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" src="js/prototype.js"></script>

        <scritp type="text/javascript">

           function check() {
                //获得用户输入的用户名和密码
                var params = "usr=" + document.getElementById("usr").value + "&pwd=" + document.getElementById("pwd").value;
                
               new Ajax.Request(
                        "login",      //请求URL
                {
                    method:'post',   
                    parameters : params,  //请求参数
                    onComplete: function(transport) {    //设置回调函数
                        var data = transport.responseXML;
                        var flag = data.getElementsByTagName("flag")[0].firstChild.nodeValue;
                        
                        if (flag == "false") {
                            alert('用户名或密码错误！请重新输入！');
                        } else {
                            window.open("ok", "_top");
                        }
                    }
                });
                
                return false;
     }

 怎样，和上实现相同的功能，却简单了许多

二、Ajax.Updater

Ajax.Updater是用来将返回的html插入到指定的标签中。比如

页面：

<body>
        <form name="myform" action="login.do" method="post" >            
            <div id="s"></div>
        </form>
    </body>

JavaScript：