Ajax用戶唯一性的驗證
今天初步學習了Ajax技術，簡單的做了一個小程序，用Ajax技術，實現從數據庫中獲取名字，驗證用戶的用戶名的唯一性的操作。
在寫的時候遇到了BUG，調了半天，不知道怎麼回事，就是在<input type=”text”>文本框中不管輸入什麼，在後臺總是顯示null 。 後來才發現 是參數名傳錯了。 糾結啊~~~~~~~~
我是用hibernate來寫的，需要引入的文件：
1、首先建WEB PROJECT ,
在domain包下創建Employee實體，封裝id,name屬性。生成 構造器，toString()方法，以及set()和get()方法。在創建Employee.hbm.xml文件。
2、在dao包下，創建EmployeeDao接口，在裏面封裝根據用戶名查找findByName()方法。在EmployeeDaoImpl中實現 這個方法。根據query查詢。
3、創建service層。
4、JSP源碼：
在jsp中：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
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>用戶名唯一性的驗證</title>
</head>
<body>
<div id="bdy" align="center">
<h1>Ajax案例</h1>
用戶名：<input type="text" name="uname" id="uname"/>
<input type="button" value="檢查用戶名" id="checkBtn">
<span id="msg" style="color: red"></span>
</div>
</body>
</html>
<script type="text/javascript">
<!--
//當窗體加載完畢後 觸發該函數
window.onload = function(){
//alert(createXMLHttpRequest());
//第一步：初始化XMLHttpRequest對象
var xmlHttp = createXMLHttpRequest();
//獲取btn按鈕對象
var btnNode = document.getElementById("checkBtn");
//註冊事件
btnNode.onclick = function(){
var inputNameNode = document.getElementById("uname");
//當readystate對象狀態發生變化的時候觸發該匿名函數
xmlHttp.onreadystatechange = function(){
//服務器端已經處理完畢，返回信息
if(xmlHttp.readyState==4){
//代表的是返回的頁面是否正常
if(xmlHttp.status==200){
/*第六步：客戶端接收*/
var msg = xmlHttp.responseText;
/*第七步：修改頁面內容*/
document.getElementById("msg").innerHTML=msg;
}
}
}
//第二步：規定請求的參數
/*
method:get|post 區別
url:請求的路徑 相對路徑 絕對路徑
async：異步：true 同步：false boolean值
*/
xmlHttp.open("POST","./servlet/HelloServlet?timeStamp="+new Date().getTime(),true);
//用POST方法時，必須設置一個頭 xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
/*第三步：服務器發送請求*/
xmlHttp.send("name="+inputNameNode.value);
/*第四步：第五步： 服務器接收 服務器返回*/
}
}
//ajax XMLHttpRequest對象
function createXMLHttpRequest(){
//聲明一個xmlHttp;
var xmlHttp;
try{
//firefox opera等非 IE的瀏覽器中
xmlHttp = new XMLHttpRequest();
}catch(ex){
try{
//IE瀏覽器
xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
}catch(e){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
//-->
</script>
5、在servlet中完成操作。代碼如下：
package cn.csdn.hr.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import cn.csdn.hr.dao.EmployeeDao;
import cn.csdn.hr.dao.EmployeeDaoImpl;
import cn.csdn.hr.domain.Employee;
public class HelloServlet extends HttpServlet {
public HelloServlet() {
super();
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//System.out.println("請求處理中...........");
doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//doGet(request, response);
//第四步：服務器接收
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
System.out.println(name);
//第五步：服務器返回
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
EmployeeDao employeeDao= new EmployeeDaoImpl();
boolean flag = employeeDao.findByName(name);
if(flag){
out.print("用戶名已經存在");
}else{
out.print("用戶名可用！");
}
out.flush();
out.close();
}
}
最終，運行結果如下：
（1） 在數據庫中的數據讀取：
（2） 如果用戶名不在數據庫中存在的情況下：
