Ajax使用者註冊頁面
阿新 • • 發佈：2018-12-17
一、實驗目的：
使用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>