ajax是個好東西，本文簡單介紹ajax+jsp實現使用者名驗證的方法。
html頁面:
<html>
<title>AJAX實例：對使用者名的校驗</title>
<!-- 引入verify.js -->
<script type="text/javascript" src="verify.js"></script>
<body>
<!-- AJAX方式下不需要用表單來提交資料,因此不用寫表單標籤 -->
<!-- AJAX方式不需要name屬性，需要id屬性 -->
輸入使用者名後，當游標離開使用者名輸入框，即回應onblur事件。
使用者名：<input type="text" id="username" onblur="verify()"/>
密 碼：<input type="text" id="password"/>
<!-- 這個div用來存入伺服器返回的資訊，開始為空 -->
<!-- id屬性定義是為了利用dom的方式找到一個節點進行操作 -->
<div id="result"></div>
</body>
verify.js檔
//定義XMLHttpRequest物件
var xmlHTTP;
function verify(){
var username=document.getElementById("username").value;
//創建XMLHttpRequest物件
if(window.XMLHttpRequest){
//針對FireFox,Mozillar,Opera,Safari,IE7,IE8
xmlHTTP = new XMLHttpRequest();
//對某些特定版本的mozillar瀏覽器的bug進行修正
if(xmlHTTP.overrideMineType){
xmlHTTP.overrideMineType("text/xml");
}
}else if(window.ActiveXObject){
//針對IE5，IE5.5，IE6
//兩個可以用於創建XMLHTTPRequest物件的控制項名稱。保存在一個JS陣列中。
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i = 0; i<activeName.length; i++){
//取出一個控制項名進行創建，如果成功就終止迴圈
try{
xmlHTTP = new ActiveXObject(activexName[i]);
break;
}catch(e){}
}
}
if(xmlHTTP){
alert("XMLHttpRequest物件創建成功！");
return;
}else{
alert("XMLHttpRequest物件創建失敗！");
}
//註冊回呼函數,只寫函數名，不能寫括弧，寫括弧表示調用函數。
xmlHTTP.onreadystatechange = callback;
//設置連接資訊(請求方式，請求的url,true表示非同步方式交互)
xmlHTTP.open("GET","AJAXServer?name=" + username, true);
//發送資料，開始和伺服器進行交互。
xmlHTTP.send(null);
//使用POST方式請求，需要手動設置HTTP的請求頭
//xmlHTTP.setRequestHeader("Content-Type","aplication/x-www-form-urlencoded");
//xmlHTTP.send("name=" + username);
}
//回呼函數
function callback(){
//判斷物件的狀態是否交互完成
if(xmlHTTP.readyState == 4){
//判斷HTTP的交互是否成功
if(xmlHTTP.status == 200){
//獲取伺服器端返回的資料（文本）
var resbonseText = xmlHTTP.responseText;
//將資料顯示在頁面上
var divNode = document.getElementById("result");
//設置元素節點中的html內容
divNode.innerHTML = responseText;
}
}
}
後臺servlet程式碼：
public class AJAXServer extends HttpServlet{
protected void doPost(HTTPServletRequest request, HttpServletResbonse resbonse)throws ServletException,IOException{
doGet(request, resbonse);
}
protected void doGet(HTTPServletRequest request, HttpServletResbonse resbonse)throws ServletException,IOException{
try{
request.setCharacterEncoding("utf-8");
resbonse.setContentType("text/html; charset=utf-8");
PrintWriter out = resbonse.getWriter();
String old = request.getParameter("name");
if(old == null || old.length() == 0){
out.println("使用者名不能為空！");
}else{
String name = old;
if(name.equals("zhangsan")){
out.println("使用者名[" + name + "]已經存在！");
}else{
out.println("使用者名[" + name + "]尚未存在，可以使用！");
}
}
}catch(Exception e){
e.printStackTrace();
}
}
}
說明：
1.onreadystatechange 請求狀態改變的事件觸發器（readyState變化時會調用此方法）
2.readyState有五中狀態：
readyState = 0 未初始化
readyState = 1 表示open方法成功調用
readyState = 2 伺服器已經應答用戶端請求
readyState = 3 交互中。Http頭資訊已經接收，回應資料尚未接收。
readyState = 4 資料接收完成。
全站熱搜
留言列表
