1 示例描述：
登陆注册程序中，必须保证每个用户ID不能重复。这种检测用户ID的操作用Ajax完成。
行为：当用户输入ID后，会使用Ajax将信息提交到服务器上进行验证，如果此ID没有被人使用，则提示可以使用。如果被人使用了，则提示错误信息。
2 建立database和user表 并插入数据：
create database mld;
create table user( userid varchar(30) PRimary key,name varchar(30),password varchar(32));
insert into user values("admin","administrator","admin");
3 编写注册表单页 regist..html的分析：
① 若是ID重复，则不能提交。
form中有一个onsubmit="return "事件
② form表单中，ID项填写完成，失去焦点后，就立刻开始检测并提示（核心）
ID里面有一个 onblur="核心业务名字"事件。
在ID后面有一个<span></span>将提示的信息显示出来。
4 regist.html的核心代码：
<html><head><meta charset="UTF-8"><title>注册</title><script type="text/javascript">var xmlHttp;var flag;
//创建xmlhttpfunction createXMLHttp() {if (window.XMLHttpRequest) {xmlHttp = new XMLHttpRequest();} else {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");}}
//3的②中的核心函数function checkUserid(userid) {createXMLHttp();xmlHttp.open("POST", "CheckServlet?userid=" + userid);//查找ID的请求
//open post参数后面的资源，有可能是现成的内容，也有可能是另一个需要执行的代码。该xmlhttp接收这段执行代码的返回的内容xmlHttp.onreadystatechange = checkUseridCallback;//回调函数xmlHttp.send(null);//发送请求doucument.getElementById("msg").innerHTML = "正在验证";}function checkUseridCallback() {if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) {var text = xmlHttp.responseText;//接收"CheckServlet?userid=" + userid 返回的内容if (text == "true") {flag = false;//flag的意义在于，若是返回true，则说明ID重复，则无法提交。为了满足3的①的业务逻辑document.getElementById("msg").innerHTML = "用户ID重复，无法使用！";} else {flag = true;document.getElementById("msg").innerHTML = "此用户ID可以注册！";}}}}function checkForm(){//form能否提交，取决于返回的flag的内容. 在form中：onsubmit="return checkForm()"return flag;}</script></head><body><form action="regist.html" method="post" onsubmit="return checkForm()">用户ID:<input type="text" name="userid" onblur="checkUserid(this.value)" /> //离开焦点调用js中的业务逻辑<span id="msg"></span><br /> 姓 名:<input type="text"name="name" /></br> 密 码:<input type="passWord" name="password" /></br><input type="submit" vaule="注册" /> <input type="reset" value="重置" /></form></body></html>
5 ：由js中的逻辑很容易看出在servlet中我们要的是什么：
名字：CheckServlet
业务：检查其userid是否存在。
若存在，返回"true"
若不存在，返回“false”
6 CheckServlet.java 代码：
package org.lxh.ajaxdemo ;import java.sql.* ;import java.io.* ;import javax.servlet.* ;import javax.servlet.http.* ;public class CheckServlet extends HttpServlet{public static final String DBDRIVER = "org.gjt.mm.MySQL.Driver" ; public static final String DBURL = "jdbc:mysql://localhost:3306/mldn" ;public static final String DBUSER = "root" ;public static final String DBPASS = "0000" ;//我的mysql数据库的密码public void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{this.doPost(request,response) ;}public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{request.setCharacterEncoding("GBK") ;response.setContentType("text/html") ;Connection conn = null ;PreparedStatement pstmt = null ;ResultSet rs = null ;PrintWriter out = response.getWriter() ;//返回用response返回。因为在js中是用post方法，所以在这里直接用doPostString userid = request.getParameter("userid") ;//接收参数try{Class.forName(DBDRIVER) ;conn = DriverManager.getConnection(DBURL,DBUSER,DBPASS) ;String sql = "SELECT COUNT(userid) FROM user WHERE userid=?" ;pstmt = conn.prepareStatement(sql) ;pstmt.setString(1,userid) ;rs = pstmt.executeQuery() ;if(rs.next()){if(rs.getInt(1)>0){// 用户ID已经存在了out.print("true") ;//返回true} else {out.print("false") ;//返回false}}}catch(Exception e){e.printStackTrace() ;}finally{try{conn.close() ;}catch(Exception e){}}}}
6 部署servlet 到web.xml并启动服务器 然后就可以执行了
新闻热点
疑难解答
