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

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

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

var text = xmlHttp. responseText;

if(text== "1") {

//得到 span 元素

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

此时代码已经写完。

六、尝试：

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

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