效果图:很基本的例子,不过刚开始把第三步open()连接中url 写错了,老是访问不到,如果出现相同的问题,可以再js部分第二步中通过alert(“xmlReq.readystate=”+xmlReq+" "+"xmlReq.status="+xmlReq.status);来调试错误地方
jsp代码:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Register</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="./register/Register.js"></script>
</head>
<body>
<form action="" enctype="application/x-www-form-urlencoded">
<table border="1">
<tr>
<td colspan="2" align="center"><Strong>用户注册</Strong>
</td>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" id="username">
<div id="divcheck"></div>
</tr>
<tr>
<td>密 码:</td>
<td><input type="password" id="password"></td>
</tr>
<tr>
<td><input type="button" value="验证" id="checkusername">
</td>
<td align="center"><input type="reset" value="重置">
</td>
</tr>
<!-- <tr>
<td><a href="javascript:;" οnclick="find()" id="1"
value="100">平台简介</a></td>
<td><a>开放业务</a>
</td>
</tr> -->
</table>
</form>
</body>
</html>
js代码
servlet代码://创建XMLHttpRequest 对象的函数 function ajaxFunction() { var xmlHttp; try {// Firefox,Opera,Safari xmlHttp = new XMLHttpRequest(); } catch (e) {// Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp; } window.onload = function() { document.getElementById("checkusername").onclick = function() { var username = document.getElementById("username").value; // 1创建xmlHTTP对象 var xmlReq = ajaxFunction(); /** * 2、处理服务器端的响应 readyState的值为4代表响应完成 status属性:200代表一切正常;304代表源文件没有别修改 * 404代表找不到页面;403禁止访问; 500 内部服务器错误 * */ xmlReq.onreadystatechange = function() { if (xmlReq.readyState == 4) { if (xmlReq.status == 200 || xmlReq.status == 304) { var data = xmlReq.responseText; document.getElementById("divcheck").innerHTML = data; } } }; // 3、打开和服务器端的连接 如果是get方法,则改为get并且删掉第二条语句 var url = "./servlet/registServlet"; xmlReq.open("post", url, true); xmlReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 4、get 方法不会接受到,这里只适合于post方法传递参数 xmlReq.send("username=" + username); }; };
package cn.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class registServlet extends HttpServlet { private static final long serialVersionUID = -2968705132907930725L; public registServlet() { super(); } public void destroy() { super.destroy(); } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String username = request.getParameter("username"); if ("admin".equals(username)) { out.println("用户名已存在~"); } else { out.println("用户名可用~"); } } public void init() throws ServletException { } }