Ajax 基礎和例子
Ajax -- Asynchronous JavaScript and XML Ajax 使用的是JavaScript + DOM + CSS + XMLHttpRequest的技術,是目前Web2.0更加流行的技術.
與傳統網絡應用相比,Ajax具備更加直觀和方便的用戶交互. 為什么呢? 比如, 我們需要點擊鏈接或按鈕來激發事件,而使用Ajax只要移動鼠標或者在一個輸入框輸入字母已經可以觸發事件. 傳統的網絡應用是基于page-driven的模式, 使用的是'click, wait a refresh the whole page' 模式, 而Ajax是通過data-driven的模式來提供網絡頁面的, 采用的是部分頁面更新的模式, 頁面中只更新有新數據的部分,其它的部分依然不變,所以依然可以操作.
Ajax就象它的名字一樣, 可以異步地在瀏覽器和服務器之間進行交流, 當服務器端處理submit過來的數據的同時, 客戶依然可以正常地處理瀏覽器端同一頁面的其他功能.
那么Ajax和傳統網絡應用相比是怎樣工作的呢?下面這張圖可以讓你了解清楚.
傳統的網絡應用在瀏覽器和服務器之間的交流是直來直去的, 而Ajax的網絡應用在瀏覽器中有一個Ajax引擎,這個引擎實際上就是一個Javascript的對象XMLHttpRequest, 而XMLHttpRequest負責瀏覽器和服務器的異步交流.
XMLHttpRequest既然是Javascript的對象, 當然需要一些Javascript的代碼來生成, 它目前支持大部分的瀏覽器,包括了Mozilla, Firefox等等.
服務器端依然可以使用傳統的技術如servlet, JSP, JSF,Struts等等,但會有一些小的限制,比如客戶端會發更頻繁的請求,而響應這些請求的類型包括text/xml, text/plain, text/json, text/javascript.
整個Ajax的操作過程分為七步:
1.A client event occurs
2.An XMLHttpRequest object is created
3.The XMLHttpRequest object is configured
4.The XMLHttpRequest object makes an async. request
5.The ValidateServlet returns an XML document containing the result
6.The XMLHttpRequest object calls the callback() function and processes the result
7.The HTML DOM is updated
我們分別來看看這七個步驟是怎么做的: 1. A client event occurs,
<input type="text"
size="20"
id="userid"
name="id"
onkeyup="validateUserId();">
比如我們手頭上有這樣一段Javascript的代碼: 這是一個ID為userid的文本框,里面包含了一個Javascript的函數,當我們在文本框里打入一個英文字母時,會激發onkeyup的事件,從而激發validateUserId的Javascript的函數.
2.An XMLHttpRequest object is created
var req;
function initRequest() {
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = true;
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function validateUserId() {
initRequest();
req.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
req.open("GET", url, true);
req.send(null);
}
validateUserId的Javascript的函數調用initRequest函數生成XMLHttpRequest對象, 大家注意到在initRequest函數里面有兩種生成XMLHttpRequest的方法,這是針對不同的瀏覽器的做法,對于Mozilla,我們可以直接使用"new XMLHttpRequest()”, 而對于IE,我們需要生成ActiveX對象.
3.The XMLHttpRequest object is configured
rvalidateUserId的Javascript的函數包含一句req.onreadystatechange = processRequest; 這是通過設定XMLHttpRequest對象里面的onreadystatechange特性為回調函數.
4.The XMLHttpRequest object makes an async. request
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
req.open("GET", url, true);
req.send(null);
然后XMLHttpRequest調用open方法和服務器交流, open方法有三個參數, HTTP方法是Get還是Post, 服務器端的URL, 方式采取異步還是同步.
5.The ValidateServlet returns an XML document containing the result
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("<valid>true</valid>");
} else {
response.setContentType("text/xml ");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valid>false</valid>");
}
}
然后是服務器端ValidateServlet的響應,首先Content type設為text/xml, Cache-Control設為no-cache, 最后會返回true或者false的xml格式響應.
6.The XMLHttpRequest object calls the callback() function and processes the result
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
現在控制交回給客戶端, 由于我們設定了回調函數為processRequest, 那么當響應從服務器端回到客戶端瀏覽器,就激發了processRequest函數, 我們在processRequest函數中檢查XMLHttpRequest對象的readyState狀態是否為4和status狀態是否為200,如果兩者同時成立,就代表服務器端的數據已經成功返回給客戶端,那么就可以執行下面的處理.
7.The HTML DOM is updated.
接收完服務器端傳回來的數據后,瀏覽器開始著手顯示接收回的數據.
我們通過頁面里面的<div>元素來唯一的表示一個對象給DOM的API使用. 比如確定html頁面某一處的需要顯示的信息文本對象,我們可以使用userIdMessage唯一的標簽來做引用給DOM的API使用. 如下面這段代碼:
23.<body>
24. <div id="userIdMessage"></div>
25.</body>
一但你有了唯一確定的引用,你就可以使用DOM的API對其進行隨心所欲的操作,如屬性的修改等等,比如下面這段代碼:
1. <script type="text/javascript">
2. function setMessageUsingDOM(message) {
3. var userMessageElement = document.getElementById("userIdMessage");
4. var messageText;
5. if (message == "false") {
6. userMessageElement.style.color = "red";
7. messageText = "Invalid User Id";
8. } else {
9. userMessageElement.style.color = "green";
10. messageText = "Valid User Id";
11. }
12. var messageBody = document.createTextNode(messageText);
13. // if the messageBody element has been created simple replace it otherwise
14. // append the new element
15. if (userMessageElement.childNodes[0]) {
16. userMessageElement.replaceChild(messageBody,
17. userMessageElement.childNodes[0]);
18. } else {
19. userMessageElement.appendChild(messageBody);
20. }
21.}
22.</script>
23.<body>
24. <div id="userIdMessage"></div>
25.</body>
在這里javascript通過了getElementById方法得到了userIdMessage對象,然后對服務器端返回的數據進行對比,如果值是true,在userIdMessage里添加文本"Valid User Id", 如果值是false,則在userIdMessage里添加文本"Invalid User Id".
大概就是這樣的一個狀況,那么在Ajax里面的XMLHttpRequest還有很多方法和屬性, 包括:
方法:
• open(“HTTP method”, “URL”, syn/asyn)
> Assigns HTTP method, destination URL, mode
• send(content)
> Sends request including string or DOM object data
• abort()
> Terminates current request
• getAllResponseHeaders()
> Returns headers (labels + values) as a string
• getResponseHeader(“header”)
> Returns value of a given header
• setRequestHeader(“label”,”value”)
> Sets Request Headers before sending
屬性:
• onreadystatechange
> Set with an JavaScript event handler that fires at each
change
• readyState – current status of request
> 0 = uninitialized
> 1 = loading
> 2 = loaded
> 3 = interactive (some data has been returned)
> 4 = complete
• status
> HTTP Status returned from server: 200 = OK
• responseText
> String version of data returned from the server
• responseXML
> XML document of data returned from the server
• statusText
> Status text returned from server
Posted at 05:22PM Jul 10, 2007 by Benny Luo