实验报告班级软件工程16-1班学号姓名同组实验者实验名称Web 客户端编程日期2018年10 月20 日一、实验目的：使用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 Project2.新建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";varparams="userid="+document.getElementById("username").value+"&userpwd="+document.getElementB yId("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工程的名字。