ajax|頁面
暈呼呼的看了2天AJAX初級教程,為將要做的論壇的註冊頁面加寫技術進去...
AJAX實際上是在JAVASCRIPT向背景SERVLET發送訊息,然後從SERVLET的響應中擷取訊息。這裡提供
一個簡單的註冊頁面提醒使用者註冊名是否存在。
yemian.html:
<html>.....<script type="text/javascript">
var xmlHttp; //定義一個XMLHttpRequest對象,用來發送,提取訊息(如想SERVLET背景程式發送)
function createXMLHttpRequest(){ //初始化
if(window.ActiveXObject){ //IE瀏覽器
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest){ //Mozilla 瀏覽器
xmlHttp = new XMLHttpRequest();
}
}
function checkInfo(){ //HTML響應函數,一般HTML中輸入什麼東西發生變化調用次函數
createXMLHttpRequest(); //產生XMLHttpRequest對象
var date = document.getElementById("userName");
var url = "zhuceyemian?userName=" + escape(date.value);
//第一個參數為方法,第二個參數為伺服器路徑名/還有其他的參數,第3個為是否非同步,一般來說AJAX是非同步
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = handleStateChange; //徽調函數
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) { //判斷對象
if(xmlHttp.status == 200) { //資訊返回,處理資訊。這裡就可以即時驗證輸入是否為正確了
var mes = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
var val = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
setMessage(mes, val);
}
}
}
function setMessage(message, isValid){
var messageArea = document.getElementById("nameMessage");
var fontColor = "red";
if(isValid == "true"){
fontColor = "green";
}
messageArea.innerHTML = "<font color=" +fontColor + ">" + message + "</font>";
}
</script></head>
<!-- 將chenckInfo()賦予onchange就是說當文本域裡面發生變化時,就會調用上面那些函數,向SERVLET發
送訊息,在後台SERVLET接受到訊息後會查詢資料庫,已驗證當前輸入使用者名稱是否已被註冊,在<div>地區裡
AJAX會填加提示資訊->
使用者名稱:<input id="userName" type="text" maxlength="10" />
<div id="nameMessage"></div>
.... </html>
在SERVLET裡面的代碼如下:zhuceyemian.java
import java.io.*;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import javax.servlet.*;
import javax.servlet.http.*;
import java.sql.*;
/* zhuceyemian.java
* 後台servlet程式,用來檢測註冊使用者名稱字是否已被註冊,提醒使用者
*/
public class zhuceyemian extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
boolean passed = validateName(request.getParameter("userName"));
response.setContentType("text/xml");
response.setCharacterEncoding("gb2312");
response.setHeader("Cache-Control", "no-cache");
String message = "this name is unavilable.";
if (passed) {
message = "this name is avilable.";
}
out.println("<response>");
out.println("<passed>" + Boolean.toString(passed) + "</passed>");
out.println("<message>" + message + "</message>");
out.println("</response>");
out.close();
}
/**
* 從資料庫中尋找是否使用者名稱已被註冊
*/
private boolean validateName(String name) {
boolean isValid = true;
try {
String driver = "com.mysql.jdbc.Driver";
Class.forName( driver ); //裝載驅動
String url = "jdbc:mysql://localhost/test";
Connection conn = DriverManager.getConnection( url, "", "" ); //串連資料庫
Statement stmt = conn.createStatement();
stmt.executeQuery("use test");
ResultSet rs = stmt.executeQuery("SELECT name FROM useinfo where name=\"" + name + "\"");
if(rs.next())
{
isValid = false;
}
rs.close();
stmt.close();
conn.close();
}
catch( Exception x ) {
x.printStackTrace();
}
return isValid;
}
}
在AJAX向SERVLET發送請求的第2個參數url在這裡是 zhuceyemian?userName=....這裡zhuceyemian是伺服器
名字,在XML裡面要降伺服器名和CLASS所在路徑要影射
<servlet>
<servlet-name>zhuceyemian</servlet-name>
<servlet-class>zhuceyemian</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>zhuceyemian</servlet-name>
<url-pattern>/zhuceyemian</url-pattern>
</servlet-mapping>
最後...也是最噁心的地方,讓我鬱悶了2天,就是在SERVLET裡面串連資料庫的時候開始他說找不到驅動....鬱悶
了,我用APPLICATION都能串連資料庫,最後終於發現在SERVLET下必須把一個mysql-connector-java-3.1.10-bin.jar的包打在WEB-INF/LIB下面,直接從BUILD下引入死活就說找不到。