我們已經介紹了Ajax技術，也知道了如何使用XMLHttpRequest對象，現在要把它們結合起來，該怎麼做呢？哪些情況下需要應用Ajax技術？當然，Ajax的潛力幾乎是無窮盡的，關於Ajax的使用，靈感可能源源不斷。本章將展示一些例子，在這些情況下，使用Ajax技術可以讓應用突飛猛進。有些情況是一目瞭然的，有些則不是。不過無論怎樣，對Ajax應用積累的經驗越多，你就越會找到自己的方法來改善應用。在這些例子中，大多數都使用Java servlet作為伺服器端組件，其實每個例子也都能很容易地使用.NET、Ruby、Perl、PHP或任何其他伺服器端技術來編寫。
4.1 完成驗證
關於可用性有一句金玉良言，即防患於未然，根本杜絕錯誤的發生。但是如果真的出現了錯誤，你就要第一時間通知使用者。在Ajax之前，基於Web的應用必須提交整個頁面才能驗證資料，或者要依賴複雜的JavaScript來檢查表單。儘管有些檢查確實很簡單，可以使用JavaScript編寫，但另外一些檢查則不然，完全靠JavaScript編寫是辦不到的。當然，在用戶端編寫的每一個驗證常式都必須在伺服器上以某種方式重寫，因為使用者有可能禁用JavaScript。
利用Ajax，你不用再受這個限制，不再只是編寫簡單的用戶端驗證和重複的邏輯。現在，如果你想為使用者提供更能體現互動性的體驗，可以簡單地調用為伺服器編寫的驗證常式。在大多數情況下，這個邏輯編寫起來更簡單，測試也更容易，而且完全可以藉助於現有的架構。
有人問，在應用中應該從哪裡開始使用Ajax，我們一般會建議從驗證開始。你很可能要去掉一些JavaScript，而且可以很容易地加入一些現有的伺服器端邏輯。本節將介紹一個例子，這是最常見的驗證之一：日期驗證。
這個例子的HTML很簡單（見代碼清單4-1）。其中有一個標準的輸入框，相應的onchange()事件（當然，可以使用你認為合適的任何事件）會觸發驗證方法。可以看到，要調用標準的createXMLHttpRequest()方法，然後把輸入值發送到ValidationServlet servlet。callback()函數從伺服器得到結果，然後委託給setMessage()方法，這個方法會檢查值以確定用什麼顏色顯示訊息。
代碼清單4-1 validation.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>Using Ajax for validation</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function validate() {
createXMLHttpRequest();
var date = document.getElementById("birthDate");
var url = "ValidationServlet?birthDate=" + escape(date.value);
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
function callback() {
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("dateMessage");
var fontColor = "red";
if (isValid == "true") {
fontColor = "green";
}
messageArea.innerHTML = "<font color=" + fontColor + ">"
+ message + " </font>";
}
</script>
</head>
<body>
<h1>Ajax Validation Example</h1>
Birth date: <input type="text" size="10" id="birthDate" onchange="validate();"/>
<div id="dateMessage"></div>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
