開發者學堂課程【Ajax入門ajax第三例:使用者名是否已被注冊】學習筆記,與課程緊密聯系,讓使用者快速學習知識。
課程位址:
https://developer.aliyun.com/learning/course/31/detail/671ajax第三例:使用者名是否已被注冊
内容介紹:
一.編寫頁面
二.編寫servlet
三.示範使用者名是否被注冊
四.繼續編寫servlet
五.給使用者名注冊監聽器
六、嘗試
一.編寫頁面:
ajax3.jsp
給出系統資料庫單頁面
給使用者名文本框添加onblur事件的監聽
擷取文本框的内容,通過ajax4步發送給伺服器,得到響應結果*如果為1:在文本框後顯示"使用者名已被注冊”
如果為0:什麼都不做!
二.編寫servlet:
ValidateUsernameServlet
擷取用戶端傳遞的使用者名參數>判斷是否為itcast
是:傳回1
否:傳回0
三.示範使用者名是否被注冊:
寫一個頁面:ajax3.jsp。
示範用戸名是否被注冊
使用者名:br/>
密 碼: r/>
此時表單已經沒有問題了。
四.繼續編寫servlet:
1.擷取參數username
2.判斷是否為itcast
3.如果是:響應1
4.如果不是:響應0
String username = request. getParameter ("username") ;
if (username . equalsIgnoreCase ("itcast")) {
response.getwriter() .print("1") ;
} else {
response .getwriter() .print("0");
window.onload = function() (
//擷取文本框,給它的失去焦點事件注冊監聽
var userEle = document. getElementById ("usernameEle") ;
userEle.onblur = function() {
//1.得到異步對象
var xmlHttp = createXMLHttpRequest() ;
//2.打開連接配接
xm1Http. open("POST", "", true) ;
//3.設定請求頭: Content-Type
xmlHttp.getRequestHeader ("Content -Type", "application/x-www form-urlencoded");//
4.發送請求,給出請求體
xmlHttp. send ("username="+ userEle.value) ;
//5.給xmlHttp的onreadystatechange事件注冊監聽
xmlHttp . onreadystatechange = function() {
if (xmlHttp. readystate == 4 && xmlHttp.status == 200) {//雙重判斷

//擷取伺服器的響應,判斷是否為1
//是:擷取 span, 添加内容:“使用者名已被注冊”
var text = xmlHttp. responseText;
if(text== "1") {
//得到 span 元素
var span = document . getElementById ("errorSpan");span. innerHTML = "使用者名已被注冊! ";
此時代碼已經寫完。
六、嘗試:
如果更改使用者名後還顯示,此時需要增加判斷,更改代碼:
span. innerHTML =使用者名已被注冊! ";} else { span. innerHTML = "" 。此時已成功。