ajax第三例:用户名是否已被注册|学习笔记

简介: 快速学习ajax第三例:用户名是否已被注册

开发者学堂课程【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) {//双重判断

image.png

//获取服务器的响应,判断是否为1

//是:获取span,添加内容:“用户名已被注册”

var text = xmlHttp. responseText;

if(text== "1") {

//得到span元素

var span = document . getElementById ("errorSpan");span. innerHTML = "用户名已被注册! ";

image.png

此时代码已经写完。

六、尝试:

如果更改用户名后还显示,此时需要增加判断,更改代码:

span. innerHTML =用户名已被注册! ";} else { span. innerHTML = "" 。此时已成功。

相关文章
|
3月前
|
JSON 前端开发 JavaScript
AJAX 课程学习笔记三
AJAX 课程学习笔记三
|
3月前
|
JSON 缓存 前端开发
AJAX 课程学习笔记二
AJAX 课程学习笔记二
|
3月前
|
XML 前端开发 JavaScript
AJAX 课程学习笔记一
AJAX 课程学习笔记一
|
9月前
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤3
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤3
50 0
|
9月前
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤1
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤1
42 0
|
9月前
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤4
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤4
40 0
|
9月前
|
前端开发
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤2
前端学习笔记202306学习笔记第四十三天-ajax的经典四大步骤2
38 0
|
11月前
|
JSON 前端开发 Java
ajax+json校验用户名是否存在
ajax+json校验用户名是否存在
|
11月前
|
XML JSON 前端开发
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
【Spring MVC学习笔记 六】SpringMVC框架整合AJAX完成局部刷新
65 0
|
12月前
|
JSON 前端开发 JavaScript
Ajax学习笔记
Ajax学习笔记