实验内容及步骤
开发一个用户注册界面,要求: 用户名基于 Ajax 检测是否重复,年龄需用 JavaScript 检查格式是否正确
代码如下:
FORM.jsp(jsp页面)
<%@ page language="java" contentType="text/html; charset=gb2312"%>
<html>
<head>
<title>表单验证</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<script type="text/javascript">
//声明XMLHttpRequest对象
var xmlHttpRequest = null;
//创建XMLHttpRequest对象实例的方法
function createXHR(){
try{
xmlHttp_request = new XMLHttpRequest();
alert("创建成功");
}catch(e){
var _msxmlhttp = new Array("Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.5.0",
"Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0",
"Msxml2.XMLHTTP","Microsoft.XMLHTTP");
for(var i = 0; i < _msxmlhttp.length; i++){
try{
xmlHttp_request = new ActiveXObject(_msxmlhttp[i]);
if(xmlHttp_request != null){
break;
}
}catch(e){}
}
}
if(xmlHttp_request == null){
alert("不能创建Ajax对象!");
}
}
//发送客户端的请求,该方法有4个参数,其中method取值为POST或GET
function sendRequest(url,params,method,handler){
createXHR();
if(!xmlHttp_request)
return false;
xmlHttp_request.onreadystatechange = handler; //制定响应函数为handler
if(method == "GET"){
xmlHttp_request.open(method,url+'?'+params,true);
xmlHttp_request.send(null);
}
if(method == "POST"){
xmlHttp_request.open(method,url,true);
xmlHttp_request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp_request.send(params);
}
}
</script>
<script type="text/javascript">
function formcheck(){
var url="formcheck";
var params="userid="+userid.value;
sendRequest(url,params,'POST',showresult);
}
function showresult(){
if(xmlHttp_request.readyState == 4){
if(xmlHttp_request.status == 200){
var info = xmlHttp_request.responseText;
result.innerHTML = info;
}
}
}
function checkold(form){
with(form){
if(old.value == ""){
alert("年龄不能为空");
return false;
}
return true;
}
}
</script>
</head>
<body>
请输入用户名:<input type="text" name="userid"/><input type="button" value="检查用户名" onclick="formcheck()"/>
<form action="" method="post" onsubmit="return checkold(this);">
<p> 请输入年龄 :<input type="text" name="old"/></p>
<input type="submit" value="注册"/>
<div id="result"></div>
</form>
</body>
</html>
Formcheck.java(检测的servlet)
package servlets;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class FormCheck extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=GB18030");
PrintWriter out = response.getWriter();
request.setCharacterEncoding("GB18030");
//String[] userList={"1","2","3","4"};
String userid = request.getParameter("userid");
//Arrays.sort(userList); //对数组排序
//int result=Arrays.binarySearch(userList,userid); //搜索数组
if("2".equals(userid)){
out.println("很抱歉,该用户名已经被注册!"); //输出检测结果
}
else {
out.println("恭喜您,该用户名没有被注册!");
}
}
}
web.xml(配置文件)
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<servlet>
<servlet-name>formcheck</servlet-name>
<servlet-class>servlets.FormCheck</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>formcheck</servlet-name>
<url-pattern>/formcheck</url-pattern>
</servlet-mapping>
</web-app>
如有错误请指出。
经运行无误。