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>
导入包dwr.jar包