一、实验目的:
使用HTML超文本标记语言制作简单页面,要求通过实验能够掌握HTML文件的基本结构和文档的创建、编辑及保存。
验证并掌握HTML超文本标记语言的文本、图像、超链接、表格、表单等标记的使用。
通过实验掌握层叠样式表CSS的创建及应用,掌握在网页中插入层叠样式表CSS的常用方法,掌握层叠样式表CSS的主要基本属性的使用。
通过实验了解JavaScript的编程规范及基本语法,能够分析JavaScript程序的功能,可以在网页制作中使用JavaScript程序。
通过实验了解Ajax的编程方法,掌握Ajax编程技巧。
二、实验环境:
Eclipse
三、实验内容:
开发一个用户注册界面,要求:
用户名基于Ajax检测是否重复,年龄需用JavaScript检查格式是否正确。
Form.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" >
<title>表单校验</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
function formcheck() {
var url = "FormCheck";
var params = "userid=" + userid.value + "&userpwd=" + "userpwd.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 agecheck(){
var age=document.getElementById("age").value;
var agecheck=document.getElementById("agecheck");
if(/^(?:[1-9]?\d|100)$/.test(age)){
agecheck.innerHTML="年龄格式正确";
}
else{
agecheck.innerHTML="<font color='red'>年龄格式不正确<font>";
}
}
function pwdcheck(){
var pwd1=document.getElementById("pwd1").value;
var pwd2=document.getElementById("pwd2").value;
var pwd2check=document.getElementById("pwd2check");
if(pwd2!=pwd1){
pwd2check.innerHTML="<font color='red'>两次密码不一致<font>";
}
else{
pwd2check.innerHTML="两次密码一致";
}
}
</script>
</head>
<body>
<table align="center" >
<tr>
<td><font style="font-family: '微软雅黑'">请输入用户名:</font></td>
<td><input type="text" name="userid" onblur="formcheck()" /></td>
<td width="150px"><span id="result"></span></td>
</tr>
<tr>
<td><font style="font-family: '微软雅黑'">请输入密码:</font></td>
<td><input type="password" name="userpwd" id="pwd1"/></td>
<td></td>
</tr>
<tr>
<td><font style="font-family: '微软雅黑'">请再输密码:</font></td>
<td><input type="password" id="pwd2" onblur="pwdcheck()"/></td>
<td><span id="pwd2check"></span></td>
</tr>
<tr>
<td><font style="font-family: '微软雅黑'">请输入年龄:</font></td>
<td><input type="text" id="age" onblur="agecheck()"/></td>
<td><span id="agecheck"></span></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="注册" onclick="formcheck()"></td>
</tr>
</table>
</body>
</html>
FormCheck.java
package servlets;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class FormCheck
*/
public class FormCheck extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public FormCheck() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
request.setCharacterEncoding("UTF-8");
String userid=request.getParameter("userid");
if("66".equals(userid)) {
out.print("<font color='red'>用户名已存在<font>");
}
else {
out.print("该用户名可以注册");
}
}
}
Ajax.js
//声明XMLHttpRequest对象
var xmlHttp_request=null;
创建XMLHTTPRequest对象实例的方法
function createXHR(){
try{
xmlHttp_request=new XMLHttpRequest();
}
catch(e1){
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(e2){}
}
}
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);
}
}
Web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<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>