实例比较DWR和AJAX应用的优缺点

最新推荐文章于 2021-08-06 09:27:32 发布

程江玉

最新推荐文章于 2021-08-06 09:27:32 发布

阅读量1.4k

点赞数 1

分类专栏： Java EE 文章标签： dwr ajax xmlhttprequest string exception function

Java EE 专栏收录该内容

87 篇文章 0 订阅

订阅专栏

http://blog.sina.com.cn/s/blog_4c925dca01009xrb.html

通常，我们在一些网站上，都会有注册功能，在注册的时候，我们通常要判断，该用户名是否已经存在，在用户输入完后，离开时触发事件onblur,数据库中如该用户存在，会有提示信息，不存在，也会有提示信息，那么这个功能是如何实现的呢？
下面，阿堂结合单位的一个考试系统中，判断出“试卷”时，该试卷标题是否存在，给出相应信息.这里阿堂给出两种方法，一种方法是用ajax，一种方法是用dwr框架(实际上也是对ajax的封装)，阿堂认为用dwr框架会更简单

效果如下

两者的优缺点 ajax:配置少，js代码写得多 ;dwr配置多，js代码很少 ,其实配置也得很简单的,朋友们如有建议，欢迎给阿堂留言

第一种情况:用ajax 技术

main.jsp文件(主要代码，下面同上，不再作说明)

<td width="17%" bgcolor="#6666FF"><strong><font color="#FFFFFF" size="2">试卷标题</font></strong></td>
  <td width="83%"><input name="title" type="text" id="title" οnblur="return checkTitle(this.value)"></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td bgcolor="#6666FF"><strong><font size="2" color="#FFFFFF">试题组别</font></strong></td>
      <td> <font size="2" >
        <select name="examgroup" id="examgroup">
         <option value="ISH3仓务组X-SVR" selected>ISH3仓务组X-SVR</option>
         <option value="ISH3仓务组P-SVR">ISH3仓务组P-SVR</option>
      <option value="ISH3进货组">ISH3进货组</option>
         <option value="ISH3L/S组">ISH3L/S组</option>
   <option value="ISH3RPR组">ISH3RPR组</option>
   <option value="ISH1仓务组">ISH1仓务组</option>
   <option value="ISH2仓务组">ISH2仓务组</option>
   <option value="PM仓务组">PM仓务组</option>
   <option value="德宝MBL仓务组">德宝MBL仓务组</option>
   <option value="德宝其它客户仓务组">德宝其它客户仓务组</option>
   <option value="ISH1进货组">ISH1进货组</option>
      <option value="ISH2进货组">ISH2进货组</option>
   <option value="ISH1RPR组">ISH1RPR组</option>
   <option value="ISH2RPR组">ISH2RPR组</option>
   <option value="德宝RPR组">德宝RPR组</option>
      <option value="ISH1L/S组">ISH1L/S组</option>
      <option value="ISH2L/S组">ISH2L/S组</option>
      <option value="ISH2调度组">ISH2调度组</option>
         <option value="沙井综合物流仓务组">沙井综合物流仓务组</option>
        </select>
        </font></td>

对应的js代码
<script language="javascript">
  var XMLHttpReq;
  // alert(x);
  // οnblur="return checkTitle(this.value);"
   //创建XMLHttpRequest对象
     function createXMLHttpRequest()
      {
   if(window.XMLHttpRequest) { //Mozilla 浏览器
    XMLHttpReq = new XMLHttpRequest();
   }
   else if (window.ActiveXObject) { // IE浏览器
    try {
     XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
     try {
      XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
     } catch (e) {}
    }
   }
   }

  function processResponse() {
   // alert(XMLHttpReq.responseText);
      if (XMLHttpReq.readyState == 4) { // 判断对象状态
          if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
              replaceContent();
             } else { //页面不正常
                 window.alert("您所请求的页面有异常。");
                 window.alert(XMLHttpReq.status);
             }
         }
     }

  function checkTitle(value)
  {
    var i = document.getElementByIdx("examgroup").selectedIndex;
             var x = document.getElementByIdx("examgroup").options[i].value;
       var url = "<a href="http://localhost:8081/ishexam/checkTitle.jsp?title=" +value+"&remark="+x" style="text-decoration: none; color: rgb(62, 110, 43); ">http://localhost:8081/ishexam/checkTitle.jsp?title="+value+"&remark="+x;
       // alert(url); 此处传值正常
       createXMLHttpRequest();
       XMLHttpReq.onreadystatechange = processResponse;
       XMLHttpReq.open("GET", url, true);
       XMLHttpReq.send(null);
  }

    function replaceContent()
    {
      // alert(XMLHttpReq.responseText);
    var content=XMLHttpReq.responseText;
    var str=content.substr(0,3);
    // alert(content);
    if (str=="yes")
    {
     alert("对不起，这个组的这套试题已经出过,请重新出");
     document.getElementByIdx("title").focus();
    }
    else
     {

     }
    }
    </script>

checkTitle.jsp文件

<%@ page language="java" import="java.util.*,com.ish.struts.util.*" pageEncoding="gbk"%>
<%

Tools tool=new Tools();
request.setCharacterEncoding("GBK");
String title = new String(request.getParameter("title").trim().getBytes("iso8859-1"),"GBK");
String remark = new String(request.getParameter("remark").trim().getBytes("iso8859-1"),"GBK");
String tempstr;

if(tool.isExistTitleAndRemark(title,remark))
{
tempstr="yes";

}
else
{
tempstr="no";

}
out.clear();
out.print(tempstr.trim());

%>

Tools.java文件中的调用方法

//查询exam_paper表是否存在如下title和remark的记录
public boolean isExistTitleAndRemark(String title,String remark)
{
  boolean flag=false;
  conn=gd.getConnection();
  String sql="select * from exam_paper where title=? and  remark=?";
  //String sql1="select title,remark from exam_paper where title='ISH12仓' and  remark='德宝MBL仓务组'";
  try
  {

   ps=conn.prepareStatement(sql);
   ps.setString(1, title.trim());
   ps.setString(2, remark.trim());
   ResultSet rs=ps.executeQuery();
   if(rs.next())
   {
    flag=true;
//    System.out.println(rs.getString(1));
//    System.out.println(rs.getString(2));

   }
  }
  catch(Exception e)
  {
   e.printStackTrace();
  }
  finally
  {
   try{
    if(conn!=null)
     conn.close();
   }catch(Exception ex){
     ex.printStackTrace();
    }
  }

  return flag;
}

第二种方法。用dwr来实现(导入dwr.jar)
main.jsp文件

    <tr bgcolor="#FFFFFF">
      <td width="17%" bgcolor="#6666FF"><strong><font color="#FFFFFF" size="2">试卷标题</font></strong></td>

       <td width="83%"><input name="title" type="text" id="title" οnblur="return checkTitle1(this.value)"></td>

    </tr>
    <tr bgcolor="#FFFFFF">
      <td bgcolor="#6666FF"><strong><font size="2" color="#FFFFFF">试题组别</font></strong></td>
      <td> <font size="2" >
        <select name="examgroup" id="examgroup">
         <option value="ISH3仓务组X-SVR" selected>ISH3仓务组X-SVR</option>
         <option value="ISH3仓务组P-SVR">ISH3仓务组P-SVR</option>
      <option value="ISH3进货组">ISH3进货组</option>
         <option value="ISH3L/S组">ISH3L/S组</option>
   <option value="ISH3RPR组">ISH3RPR组</option>
   <option value="ISH1仓务组">ISH1仓务组</option>
   <option value="ISH2仓务组">ISH2仓务组</option>
   <option value="PM仓务组">PM仓务组</option>
   <option value="德宝MBL仓务组">德宝MBL仓务组</option>
   <option value="德宝其它客户仓务组">德宝其它客户仓务组</option>
   <option value="ISH1进货组">ISH1进货组</option>
      <option value="ISH2进货组">ISH2进货组</option>
   <option value="ISH1RPR组">ISH1RPR组</option>
   <option value="ISH2RPR组">ISH2RPR组</option>
   <option value="德宝RPR组">德宝RPR组</option>
      <option value="ISH1L/S组">ISH1L/S组</option>
      <option value="ISH2L/S组">ISH2L/S组</option>
      <option value="ISH2调度组">ISH2调度组</option>
         <option value="沙井综合物流仓务组">沙井综合物流仓务组</option>
        </select>
        </font></td>

对应的js代码
<script type='text/javascript' src='/ishexam/dwr/interface/tools.js'></script>
<script type='text/javascript' src='/ishexam/dwr/engine.js'></script>
<script type='text/javascript' src='/ishexam/dwr/util.js'></script>
  <script>
    function checkTitle1(value)
    {
      var i = document.getElementByIdx("examgroup").selectedIndex;
             var x = document.getElementByIdx("examgroup").options[i].value;
             tools.isExistTitleAndRemark1(value,x,callBackResult);
    }

    function callBackResult(data)
    {
      if(data!="")
      {
       alert(data);
       document.getElementByIdx("title").focus();
      }
      else
      {

      }
    }

</script>

Tools.java文件中对应的方法如下

public String isExistTitleAndRemark1(String title,String remark)
{
  String flag="";
  conn=gd.getConnection();
  String sql="select * from exam_paper where title=? and  remark=?";
  //String sql1="select title,remark from exam_paper where title='ISH12仓' and  remark='德宝MBL仓务组'";
  try
  {

   ps=conn.prepareStatement(sql);
   ps.setString(1, title.trim());
   ps.setString(2, remark.trim());
   ResultSet rs=ps.executeQuery();
   if(rs.next())
   {
    flag="对不起，这个组的这套试题已经出过,请重新出";
//    System.out.println(rs.getString(1));
//    System.out.println(rs.getString(2));

   }
  }
  catch(Exception e)
  {
   flag="";
   e.printStackTrace();
  }
  finally
  {
   try{
    if(conn!=null)
     conn.close();
   }catch(Exception ex){
     ex.printStackTrace();
    }
  }

  return flag.trim();
}

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>

在web-inf目录下生成一个dwr.xml文件，配置如下

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting
2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">

<dwr>
  <allow>
    <create creator="new" javascript="tools">
      <param name="class" value="com.ish.struts.util.Tools" />
    </create>
  </allow>
</dwr>