该篇文章简单介绍
Ajax 实现验证用户名字是否可以用的功能 ,利用这个原理对 后面项目的登录和注册功能做基础。
servlet 页面
获取用户输入的值
将字符串判断发送到前端页面
package com.powernode.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/checkusername")
public class CheckUserNameServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("ajax请求到达servlet...");
resp.setContentType("text/html;charset=utf-8");
String username = req.getParameter("username"); //获取用户输入的值
if(username.equals("admin")){
resp.getWriter().print("×用户名被占用");
}else{
resp.getWriter().print("√用户名可以使用");
}
}
}
前端页面
接受servlet发送过来的字符串 ,并且对字符串进行判断,添加焦点事件实现,正确,字体颜色显示绿色 , 错误,字体颜色显示红色。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>$Title$</title>
</head>
<body>
<form action="wait">
账号:<input type="text" name="abc"/>
<span id="username_msg"></span>
<br/>
密码:<input type="password" name="pwd"/><br/>
年龄:<input type="text" name="nl"/><br/>
<input type="submit" value="提交"/>
</form>
<script>
//给账号添加焦点失去事件 第一个input 标签节点
document.getElementsByTagName('input')[0].onblur = function (){
//1.创建 XmlHttpRequest 对象。
var xhr = new XMLHttpRequest();
/*
2. 设置请求参数以及访问的方式。
参数:
1.请求方式
2.请求地址 这里用的是servlet
3.请求类型【默认是true】
*/
xhr.open('post','checkusername',true);
/*
3. 设置请求头
http的规定,使用 XMLHttpRequest 对象发送请求
如果请求方式是post,那么必须设置请求头。固定的,无须背。
*/
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
/*
4.绑定回调函数。服务器在响应时会触发该函数。
*/
xhr.onreadystatechange = function (){
/*
readyState:服务器与浏览器之间的通讯状态
4:浏览器已经完全接收服务器返回的所有数据。
status:服务器返回的状态码。
200:服务器响应成功。
*/
if(xhr.readyState == 4 && xhr.status == 200){
/*
responseText:响应文本 String类型 两种,被占用和可以使用
*/
let rest = xhr.responseText;
//根据id找到用户名的提示标签
let span = document.getElementById('username_msg');
//设置提示信息内容 写入span标签
span.innerText = rest;
//判断 给字体添加颜色 ,这里因为是类c 语言 ,如果不加trim() 函数,会判断错误,因为c语言中字符串是\n结束的
if(rest.trim() == "×用户名被占用"){
span.style.color = "red";
}else{
span.style.color = "green";
}
}
}
/*
* 5. 发生到请求到服务器
* */
xhr.send("username="+this.value);
}
</script>
</body>
</html>
无须提交页面 ,在账号栏失去焦点时 ,Ajax 就会提示我们用户名是否可用
实现前后端分离。