天天看點

ajax第三例:使用者名是否已被注冊| 學習筆記示範用戸名是否被注冊

開發者學堂課程【Ajax入門ajax第三例:使用者名是否已被注冊】學習筆記,與課程緊密聯系,讓使用者快速學習知識。

課程位址:

https://developer.aliyun.com/learning/course/31/detail/671

ajax第三例:使用者名是否已被注冊

内容介紹:

一.編寫頁面

二.編寫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) {//雙重判斷

ajax第三例:使用者名是否已被注冊| 學習筆記示範用戸名是否被注冊

//擷取伺服器的響應,判斷是否為1

//是:擷取 span, 添加内容:“使用者名已被注冊”

var text = xmlHttp. responseText;

if(text== "1") {

//得到 span 元素

var span = document . getElementById ("errorSpan");span. innerHTML = "使用者名已被注冊! ";

ajax第三例:使用者名是否已被注冊| 學習筆記示範用戸名是否被注冊

此時代碼已經寫完。

六、嘗試:

如果更改使用者名後還顯示,此時需要增加判斷,更改代碼:

span. innerHTML =使用者名已被注冊! ";} else {   span. innerHTML = "" 。此時已成功。

繼續閱讀