一、实验目的：
使用 HTML 超文本标记语言制作简单页面，要求通过实验能够掌握 HTML 文件的基本结构和文档的创建、编辑及保存。 验证并掌握 HTML 超文本标记语言的文本、图像、超链接、表格、表单等 标记的使用。 通过实验掌握层叠样式表 CSS 的创建及应用，掌握在网页中插入层叠样式 表 CSS 的常用方法，掌握层叠样式表 CSS 的主要基本属性的使用。 通过实验了解 JavaScript 的编程规范及基本语法，能够分析 JavaScript 程序 的功能，可以在网页制作中使用 JavaScript 程序。 通过实验了解 Ajax 的编程方法，掌握 Ajax 编程技巧。
二、实验环境：
MyEclipse10+Tomcat 7.0+Java EE 6.0
三、实验内容：
1）开发一个用户注册界面，要求： 用户名基于 Ajax 检测是否重复，年龄需用 JavaScript 检查格式是否正确。
1.首先New Web Project
2.新建register.html文件，HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/ajax.js"></script>
<script>
function check() {
var username=document.getElementById("username");
var userpwd=document.getElementById("userpwd");
var reuserpwd=document.getElementById("reuserpwd");
var age=document.getElementById("age");
if(username.value=="")
{
alert("用户名不能为空，请输入用户名！");
username.focus();
return false;
}
if(userpwd.value=="")
{
alert("密码不能为空，请输入密码！");
userpwd.focus();
return false;
}
if(reuserpwd.value=="")
{
alert("确认密码不能为空，请确认密码！");
reuserpwd.focus();
return false;
}
if(userpwd.value!=reuserpwd.value)
{
alert("两次输入的密码不同，请重新输入！");
reuserpwd.focus();
return false;
}
if(age.value!="" && (age.value<=0 || age.value>100))
{
alert("年龄格式错误，请重新输入！");
age.focus();
return false;
}
}
function usernamecheck() {
var url="formcheck";
var params="userid="+document.getElementById("username").value+"&userpwd="+document.getElementById("userpwd").value;
sendRequest(url,params,'POST',showresult);
}
function showresult() {
if (httpRequest.readyState == 4)
{
if (httpRequest.status == 200)
{
var info=httpRequest.responseText;
document.getElementById("result").innerHTML=info;
}
}
}
</script>
</head>
<body>
<p>用户名：<input type="text" name="username" id="username" placeholder="请输入用户名" onblur="usernamecheck()"></p>
<p>密码：<input type="password" name="userpwd" id="userpwd" placeholder="请输入密码"></p>
<p>确认密码：<input type="password" name="reuserpwd" id="reuserpwd" placeholder="请确认密码"></p>
<p>年龄：<input type="text" name="age" id="age" placeholder="请输入年龄"></p>
<input type="button" name="register" value="注册" onclick="check();usernamecheck()">
<div id="result"></div>
</body>
</html>3.在WebRoot目录下新建文件夹，文件夹命名为js；在js文件夹下新建ajax.js文件，ajax.js文件代码如下：
var httpRequest=null;
function createXHR(){
if(window.XMLHttpRequest){ //Mozilla,Safari,Opera,IE7等
httpRequest = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); //IE较新版本
}catch(e){
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");//IE较老版本
}catch(e){
httpRequest = null;
}
}
}
if(!httpRequest){
alert("fail to create httpRequest");
}
}
function sendRequest(url,params,method,handler){
createXHR();
if(!httpRequest) return false;
httpRequest.onreadystatechange = handler;
if(method == "GET"){
httpRequest.open(method,url+ '?' + params,true);
httpRequest.send(null);
}
if(method == "POST"){
httpRequest.open(method,url,true);
httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
httpRequest.send(params);
}
}4.在src文件目录下新建Servlet,命名为FormCheck （或者新建FormChek.java文件），注意打包，包名为servlets。FormChek.java文件代码如下：
package servlets;
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 FormCheck extends HttpServlet {
public FormCheck() {
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 {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
request.setCharacterEncoding("UTF-8");
String userid=request.getParameter("userid");
if("李四".equals(userid)){
out.print("很抱歉，该用户名已存在！");
}
else{
String userpwd=request.getParameter("userpwd");
if(!"".equals(userpwd)){
out.print("恭喜您，用户"+userid+"注册成功！");
}
}
}
public void init() throws ServletException {
// Put your code here
}
}5.在MyEclipse10中部署并运行Tomcat服务器，在浏览器地址栏中输入http://localhost:8080/ch2/register.html 其中ch2为Web工程的名字。
6.运行结果：
测试：
