开发者学堂课程【Ajax:ajax第三例:用户名是否已被注册】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/31
ajax第三例:用户名是否已被注册
一.编写页面
二.编写servlet
三.演示用户名是否被注册
四.继续编写servlet
五.给用户名注册监听器
六、尝试
一.编写页面
ajax3.jsp
给出注册表单页面
给用户名文本框添加onblur事件的监听
获取文本框的内容,通过ajax4步发送给服务器,得到响应结果*如果为1:在文本框后显示"用户名已被注册”
如果为0:什么都不做!
二.编写servlet:
ValidateUsernameServlet
获取客户端传递的用户名参数>判断是否为itcast
是:返回1
否:返回0
三.演示用户名是否被注册:
写一个页面:ajax3.jsp。
演示用戸名是否被注册
用户名:br/>
密 码:
此时表单已经没有问题了。
四.继续编写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 = "" 。此时已成功。