先看一下最后实现的效果：
这里服务器端没写与数据库的交互，硬性的规定King是已有账号，其他账号均可注册。
那么我们就开始吧！
首先创建一个web项目，项目名为ajax1，步骤详见：用Intellij idea新建一个java web+Servlet项目
建立好项目以后在各自的目录下创建几个文件：
首先我们来写regist.jsp文件，代码如下：
第一步获得ajax对象，这里用到了一个getXhr函数，我们封装在了js文件夹下的ajax.js文件中。
关于第四步处理服务器返回的数据中的xhr.readyState的用法详见上一期：Ajax概述
<%--
Created by IntelliJ IDEA.
User: 71403
Date: 2018/7/29
Time: 23:59
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/ajax.js"></script>
<script>
function check_adminCode() {
//1.先获得ajax对象
var xhr = getXhr();
//2.发送请求
xhr.open('get','check_admin.do?adminCode=' + $F('adminCode'),true);
xhr.onreadystatechange =
//4.处理服务器返回的数据
function() {
if (xhr.readyState == 4 && xhr.status == 200) {
//获得服务器返回的数据
var txt = xhr.responseText;
//更新页面
$('adminCode_msg').innerHTML = txt;
}
};
xhr.send(null);
}
</script>
</head>
<body>
<form action="" method="post">
账号：<input id="adminCode" name="adminCode" onblur="check_adminCode();">
<span id="adminCode_msg"></span>
<br>
密码：<input type="password" name="pwd"><br>
<input type="submit" value="确定">
</form>
</body>
</html>
那么我们来看ajax.js文件应该怎么写：
//依据id查找节点
function $(id) {
return document.getElementById(id);
}
//依据id查找节点，返回节点的value
function $F(id) {
return $(id).value;
}
//获得ajax对象
function getXhr() {
var xhr = null;
if (window.XMLHttpRequest) {
//非IE
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}下面是ActionServlet文件：
package web;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
public class ActionServlet extends HttpServlet{
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
System.out.println("service()");
//获得请求资源路径
// http://localhost:8080/ajax1/regist.jsp端口号之后的都是。
String uri = req.getRequestURI();
System.out.println("uri:" + uri);
//分析请求资源路径
String action = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
System.out.println("action:" + action);
resp.setContentType("text/html;charset=utf-8");
PrintWriter out = resp.getWriter();
//依据分析的结果，进行不同的处理
if ("/check_admin".equals(action)) {
String adminCode = req.getParameter("adminCode");
System.out.println("adminCode:" + adminCode);
if ("King".equals(adminCode)) {
out.println("账号已经存在");
} else {
out.println("可以使用");
}
}
}
}
最后，写入web.xml文件，对servlet进行配置。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<servlet>
<servlet-name>action</servlet-name>
<servlet-class>web.ActionServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>action</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
</web-app>然后再执行部署tomcat步骤。即可运行~
谢谢你看到这里！写作仓促，有疏漏之处还请评论指正，共同探讨进步！
扫描二维码关注公众号，回复：
2816019 查看本文章
