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并啟動服務器 然后就可以執行了
新聞熱點
疑難解答
