註冊頁面中使用AJAX即時提醒使用者能否註冊成功

來源:互聯網
上載者:User
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下引入死活就說找不到。


 



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.