ajax和dwr入门学习

来源：互联网发布：js滚动代码编辑：程序博客网时间：2024/05/17 09:19

ajax对大家来说相信都很熟悉了，在这里只是利用一段很简单的程序来实现Ajax的效果，以供一些初学者参考，希望能帮助大家理解，加快学习速度。OK，切入正题。

一、用最简单的方式实现用户注册时的验证效果

首先新建一个jsp，有一个form，有两个表单元素：用户名（username）、邮件地址（email），源代码如下：

<%@ page language="java" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">    
<title>使用ajax进行简单验证</title>
<script type="text/javascript">
var XMLHttpReq = false;
function creatXMLHttpRequest(){ //创建XMLHttpRequest 对象
    
    if(window.ActiveXObject){ //IE 浏览器
       try{
            XMLHttpReq = new ActiveXObject("Msxm12.XMLHTTP");
       }catch(e){
           try{
                XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
           }catch(e){
                //alert(e);
           }
       }
    }else if(window.XMLHttpRequest){ //Mozilla 浏览器
       XMLHttpReq = new XMLHttpRequest();
    }
}
//发出请求：url-请求路径，processRes-返回信息处理函数名
function sendRequest(url,processRes){
    creatXMLHttpRequest();
    XMLHttpReq.open("POST",url,true);// XMLHttpReq.open("GET",url,true);
    XMLHttpReq.onreadystatechange = processRes;//指定响应函数(状态改变的触发器)
    //或 XMLHttpReq.onreadystatechange = function(){};
    XMLHttpReq.send();//发送请求
}
/*上面这段js程序可以用一个js文件单独写出来，这样每次使用时只需要导入即可*/
//处理返回信息函数
function processResponse(){    
    if(XMLHttpReq.readystate == 4 && XMLHttpReq.status == 200){//请求完成
        var res = XMLHttpReq.responseText;//返回值
        if(res=="false"){//判断返回值
            view_name.style.color='green';
            view_name.innerHTML='该用户名可以正常使用';
            document.all("btn").disabled=false; 
        }else if(res=="true"){
            view_name.style.color='red';
            view_name.innerHTML='用户名已存在'; 
            document.all("btn").disabled=true;            
       }  
   }else{
        view_name.style.color='yellow';
        view_name.innerHTML='验证中……'; 
        document.all("btn").disabled=true;  
   }
}
//到后台验证用户名是否存在
function checkName(){
    var name = document.all("username").value;//获取要验证的名字
    if(name==""){
        view_name.style.color='red';
        view_name.innerHTML='用户名不能为空';
        document.all("btn").disabled=true;  
    }else{
        sendRequest('<%=request.getContextPath()%>/checkAction.do?NAME='+name,processResponse);//将信息发送到后台进行验证
    }
}
</script>
</head>
<body>
  <form action="regAction.do" method="post">
    用户名：<input type="text" name="username" onblur="checkName()"><span id="view_name"></span><br>
    邮  箱：<input type="text" name="email">
    <br><br>
    <input type="submit" name="btn" disabled="disabled">
    </form>
  </body>
</html>

可以看到，比一般的多了一些js代码，具体是什么里面都有注释，就不在这里多说了，要提一下的是，从14到38行之间的内容是不需要变的，只是复制过去就OK，然后要注意的就是返回信息处理函数里面对请求状态的判断，当XMLHttpReq.status的值等于4或200的时候代表请求结束，通过XMLHttpReq.responseText得到返回的值。

接着看下后台处理的Action的内容，先看源代码：

package com.struts.action;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import com.db.UserDao;
public class CheckAction extends Action {
    /**
     * Method execute 检查用户名是否存在
     * 
     */
    public ActionForward execute(ActionMapping mapping, ActionForm form,
            HttpServletRequest request, HttpServletResponse response)
            throws IOException {
        String name = request.getParameter("NAME");// 获取用户输入的用户名 
        PrintWriter out = response.getWriter();
        if (new UserDao().isExists(name)) {// 查询数据库是否存在 
            out.write("false");
        } else {//不存在 
            out.write("true");
        }
        return null;
    }
}

后台处理也很简单，就是把传进来的值取出来，然后经过验证得到返回结果，要注意的是返回值不是用return关键字返回，而是通过response产生的PrintWriter对象的字符输出流方式返回值，所以这里Action的返回值就是null。

通过这点程序就已经实现了ajax的简单效果，其他操作都与平时的操作完全一样，所以就不多说了。

总结一下这两段程序，实际上实现ajax就是首先产生一个XMLHttpRequest对象，然后能过XMLHttpRequest对象的open和send方法发送请求到后台处理，然后后台通过response产生PrintWriter对象，利用流输出方式返回到页面，在页面上通过状态改变的触发器处理返回结果这样一个过程。

二、使用dwr框架实现上面的验证功能

使用dwr框架的话会使你的代码正简洁、美观。下面看下实现方式：

首先下载dwr的jar包(可以点这里下载)，将dwr.jar(名字不一定相同)包放在lib下，在WEB-INF下新建一个xml文件，命名为dwr.xml，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<dwr>
    <allow>
        <create creator="new" javascript="checkName">
            <param name="class" value="com.db.UserDao"/>
        </create>
    </allow>
</dwr>

web.xml里面加上如下代码：

<servlet>
        <servlet-name>dwr-invoker</servlet-name>
        <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
        <init-param>
            <param-name>debug</param-name>
            <param-value>true</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>dwr-invoker</servlet-name>
        <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>

jsp页面代码：

<%@ page language="java" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">    
    <title>使用dwr框架进行简单验证</title>
    <script type="text/javascript" src="dwr/engine.js"></script>
    <script type="text/javascript" src="dwr/util.js"></script>
    <script type="text/javascript" src="dwr/interface/checkName.js"></script>
    <script type="text/javascript">
    function checkUserName(){
        checkName.isExists(document.all("username").value,callBackCheck);
    }
    
    function callBackCheck(data){
        //alert(data);
        if(data == true){
            alert("用户名已存在");
        }else{
            document.all("btn").disabled=false;
        }
    }
    </script>
</head>
<body>
  <form action="regAction.do" method="post">
    用户名：<input type="text" name="username" onblur="checkUserName()"><br>
    邮  箱：<input type="text" name="email">
    <br><br>
    <input type="submit" name="btn" disabled="disabled">
    </form>
  </body>
</html>

OK，我们再对照着代码看下，首先在dwr.xml里面，javascript="checkName"中，javascript的值就是页面上调用java类方法所使用的名称（jsp页面的17行），create节点里面的参数值是对应的检查用户名是否存在的类名，这样在页面上就可以通过javascript的值来调用这个类里面的方法，web.xml添加的内容是固定的，直接复制过去就OK，在页面上需要导入三个js文件，其中dwr/engine.js和dwr/util.js是固定的，而dwr/checkName.js则是根据dwr.xml里面的javascript的名字生成的，所以名字与它的值相同，这个是需要变化的，最后在js里调用UserDao类中的isExists时后面多加了一个参数，实际传入的是返回信息的处理的函数名，如果有返回值的话这个函数要加一个参数。这个示例里面有很多没有提到它的含意，在这里一两句话也是说不清楚的，希望大家自己去找下dwr的相关资料，这样相信大家会理解得更加深刻。

使用dwr框架不太容易理解，也增加了配置的复杂度，但代码相对更灵活、简洁一些。不管通过什么方式，只要能达到相同的效果就OK，看自己个人能力和爱好，呵呵……