AJAX 的 XMLHttpRequest 初體驗

事情是這樣的:
相信很多人都看過許多的論壇網站都有一種功能:
就是當你再申請新的帳號的時候, 當你打完你的名字的時候,
它會很貼心的告訴你這個名字有沒有人申請過??!!
我們先暫且撇開駭客會不會利用它來"測試帳號是否存在" 這類的問題,
倒是這樣的功能, 可使使得很多時候使用者介面清爽很多, 至少不用多次往返填寫表單( 那的確是件煩人的工作!! )
 
搜尋了 Google 後發現, sun 有個不錯的教學, 講的很清楚, 甚至有實際的例子,
其實很簡單, 他利用的就是 AJAX 技術, 去呼叫 JavaScript 裡面的 XMLHttpRequest  , 幫你連結 Server,
然後更新網頁頁面, 就是這麼簡單,
看個 SUN 所提供的圖吧!!應該會更清楚!!
 
如何?! 還不清楚?! 那直接把 code 抄回去吧!!….
 
以下是申請帳號的 JSP
<%@ page language="java" contentType="text/html; charset=BIG5"
    pageEncoding="BIG5"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<script type="text/javascript">//<![CDATA[
    var req;
    function validate(url) {
       var idField = document.getElementById("id");
       // var url = "validate?id=" + encodeURIComponent(idField.value);
       url = url + "?id=" + encodeURIComponent(idField.value);
       // var url = "validate";
       if (typeof XMLHttpRequest != "undefined") {
           req = new XMLHttpRequest();
       } else if (window.ActiveXObject) {
           req = new ActiveXObject("Microsoft.XMLHTTP");
       }
       req.onreadystatechange = callback;
   
       // GET Method  
       req.open("GET", url, true);
       req.send(null);
      
       // POST method
       // req.open("POST", url, true);
       // req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
       // req.send("id=" + encodeURIComponent(idTextField.value));
    }
   
    function callback() {
        // 0 = uninitialized
        // 1 = loading
        // 2 = loaded
        // 3 = interactive
        // 4 = complete
        if (req.readyState == 4) {
            if (req.status == 200) {
                // update the HTML DOM based on whether or not message is valid
                parseMessage();
            }
        }
    }
   
    function parseMessage() {
        // responseBody : return int
        // responseStream : return Stream
        // responseText : return TEXT
        // responseXML : return XML
        var message = req.responseXML.getElementsByTagName("message")[0];
        setMessage(message.childNodes[0].nodeValue);
    }
   
    function setMessage(message) {
        var mdiv = document.getElementById("userIdMessage");
        if (message == "invalid") {
           mdiv.innerHTML = "<div style=\"color:red\">Invalid User Id</ div>";
        } else {
           mdiv.innerHTML = "<div style=\"color:green\">Valid User Id</ div>";
        }
    }
//]]></script>
<title>AJAX Test</title>
</head>
<body>
<form method="POST" action="">
 <p><input type="text" size="20" id="id" name="id" onBlur="validate(‘${pageContext.request.contextPath}/validate.do’);"><div id="userIdMessage"></div></p>
 <p><input type="submit" value="submit" name="submit"><input type="reset" value="reset" name="reset"></p>
</form>
</body>
</html>
配合以下的 Servlet
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;
public class ValidateServlet extends HttpServlet {
   
    // private ServletContext context;
    private HashMap<String,String> users = new HashMap<String,String>();
 
    public void init(ServletConfig config) throws ServletException {
        super.init(config);
        // this.context = config.getServletContext();
        users.put("greg","account data");
        users.put("duke","account data");
    }
    public void doGet(HttpServletRequest request, HttpServletResponse  response)
        throws IOException, ServletException {
        String targetId = request.getParameter("id");
        if ((targetId != null) && !users.containsKey(targetId.trim())) {
            response.setContentType("text/xml");
            response.setHeader("Cache-Control", "no-cache");
            response.getWriter().write("<message>valid</message>");
        } else {
            response.setContentType("text/xml");
            response.setHeader("Cache-Control", "no-cache");
            response.getWriter().write("<message>invalid</message>");
        }
    }
}
然後…. 你也可以試試看這功能了!!
稍息後開始動作!!………..
 
 
 
 
 
 
廣告

About fenjj

Perfect !!??...
本篇發表於 Uncategorized。將永久鏈結加入書籤。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s