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 = "" 。此时已成功。

相关文章
|
前端开发 数据安全/隐私保护 开发者
ajax第三例:用户名是否已被注册| 学习笔记
快速学习 ajax第三例:用户名是否已被注册。
186 0
ajax第三例:用户名是否已被注册| 学习笔记
|
前端开发 数据安全/隐私保护 开发者
ajax第三例:用户名是否已被注册|学习笔记
快速学习ajax第三例:用户名是否已被注册
ajax第三例:用户名是否已被注册|学习笔记
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
152 0
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
427 0
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
前端开发 JavaScript
jQuery中的Ajax请求----ajax请求篇(二)
在jQuery中的Ajax请求其实是在底层对原生js请求方式的封装,那么jQuery中的Ajax请求是怎样的呢?
146 0
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
127 0
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
134 0
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
208 0