Web客戶端程式設計
阿新 • • 發佈：2019-01-05
一、實驗目的：
使用 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.執行結果：
測試：
