本章為你提供了一個清晰的 Ajax 操作的具體步驟。
讓我們一個接一個理解這些步驟。
validateUserId()
被映射為 id 為 "userid"
的表單輸入字段的 onkeyup
事件的事件處理程序。<input type="text" size="20" id="userid" name="id" onkeyup="validateUserId();">
。var AjaxRequest; // 緩存 XMLHttpRequest 對象
function AjaxFunction(){
try{
// Opera 8.0+, Firefox, Safari
AjaxRequest = new XMLHttpRequest();
}catch (e){
// IE 瀏覽器
try{
AjaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
AjaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
// 錯誤處理
alert("Your browser broke!");
return false;
}
}
}
}
在這個步驟中,我們將會編寫一個將由客戶端事件觸發(fā)的函數(shù),然后注冊一個 processRequest() 回調(diào)函數(shù)。
function validateUserId() {
AjaxFunction();
// 這里的 processRequest() 就是回調(diào)函數(shù)
AjaxRequest.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
AjaxRequest.open("GET", url, true);
AjaxRequest.send(null);
}
上面的代碼是有效的。加粗的代碼負責發(fā)起一個到 Web 服務器的請求。這是使用 XMLHttpRequest 對象 AjaxRequest 做到的。
function validateUserId() {
AjaxFunction();
// 這里的 processRequest() 就是回調(diào)函數(shù)
AjaxRequest.onreadystatechange = processRequest;
__if (!target) target = document.getElementById("userid");__
__var url = "validate?id=" + escape(target.value);__
__AjaxRequest.open("GET", url, true);__
__AjaxRequest.send(null);__
}
假設我們在 userid 輸入框中輸入 Zara,那么在上面的請求中,URL 會被設置為 "validate?id=Zara"。
我們可以使用任意語言實現(xiàn)服務端腳本,但是它應該包含如下邏輯。
我們假設你要編寫一個 servlet 程序,下面是這段程序代碼。
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
String targetId = request.getParameter("id");
if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("true");
} else {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("false");
}
}
XMLHttpRequest 對象被配置為當 XMLHttpRequest 對象的 readyState 狀態(tài)發(fā)生變化時調(diào)用 processRequest() 函數(shù)。這個函數(shù)接受從服務端返回的結(jié)果然后做必要的處理。正如下面的示例所示,它基于從 Web 服務器返回的值將消息變量設置為 true 或 false。
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
...
}
這是最后一步,在這一步中我們的 HTML 頁面會被更新。它發(fā)生在以下方式中:
document.getElementById("userIdMessage"),
// 這里 "userIdMessage" 就是 HTML 文檔中某個元素的 ID 屬性
<script type="text/javascript">
<!--
function setMessageUsingDOM(message) {
var userMessageElement = document.getElementById("userIdMessage");
var messageText;
if (message == "false") {
userMessageElement.style.color = "red";
messageText = "Invalid User Id";
}
else
{
userMessageElement.style.color = "green";
messageText = "Valid User Id";
}
var messageBody = document.createTextNode(messageText);
// 如果 messageBody 元素已經(jīng)創(chuàng)建了,則簡單的替換它,否則插入一個新的元素。
if (userMessageElement.childNodes[0]) {
userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
}
else
{
userMessageElement.appendChild(messageBody);
}
}
-->
</script>
<body>
<div id="userIdMessage"><div>
</body>
如果理解了上述 7 步,差不多就完成 Ajax 了。下一章中,我們會看到更詳細的 XMLHttpRequest 對象。