基于Ａｊａｘ技術的網頁更新設計與實現
2008-01-01 00:00:00王福全
現代商貿工業 2008年1期
摘 要：簡要介紹了Ajax技術基本原理與功能，并通過按鈕更新實例，探討了在Java Serverlet技術條件下，利用AJAX模式實現Web頁面數據的動態更新的一般方法。
關鍵詞：AJAX；XMLHttpRequest；XML；動態更新
中圖分類號：TP393.07文獻標識碼：A文章編號：1672-3198（2008）01-0272-02
傳統的web頁面重載機制已經嚴重的制約著網絡應用軟件的開發，因此，關于頁面的載入技術的研究也就成為web應用程序設計的關鍵。然而這種狀況一直沒能徹底改變，直到Ajax 技術的出現。AJAX 采用獨特的遠程腳本調用技術，可以異步的實現頁面數據的更新，徹底解決了傳統頁面的重載問題，開啟了全新的網頁應用程序設計模式。其典型應用有google的GMail、GoogleSuggest等。在國內，Ajax技術已經成功的應用到網易的郵件系統。然而，通過典型的應用我們也不難發現一個問題，ajax成熟的應用主要集中在一些有相當實力的公司。對于大眾化的應用來講，探索一下ajax技術的應用模式特別是頁面的更新模式設計，無疑有助于Ajax技術推廣和發展。
Ajax技術的基本原理：Ajax是一個結合了Java技術、XML、以及JavaScript的web開發模式，可以讓你構建基于Java技術的Web應用。和傳統的web更新技術不同，如圖所示，相當于在客戶端和服務器之間加了一個中間層，即Ajax引擎。這樣，并不是所有的用戶請求都提交給服務器，一些數據的驗證和處理由Ajax自己來做，只有確實需要從服務器讀取新數據時，才由客戶端通過JavaScript調用Ajax引擎向服務器端發出Http請求，但它并不等待請求的響應，用戶可以繼續瀏覽或交互。當服務端的數據以XML形式返回時，Ajax引擎接收數據，并指定JavaScript函數來完成相應的處理或頁面的更新，而不是刷新整個頁面，從而實現用戶操作與服務器響應的異步化。
基于Ajax技術的頁面數據更新的實例。
Ajax技術是組合技術，它只是一個工作模式但并未限定具體的方法。下面我們通過設計一個按鈕更新頁面實例來探討在Java Servlet技術條件下，利用Ajax實現頁面數據動態更新的方法，共需要創建三個文件，代碼如下：
Index.Jsp 文件代碼：
＜html＞＜head＞＜meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\"＞
＜script src=\"/adsense/static/en_US/urchin.js\" type=\"text/javascript\"＞＜/script＞
＜script type=\"text/javascript\"＞
_uacct=\"UA-18006-1\";
_utcp=\"/adsense/\";
_uanchor=1;
_uccn=\"sourceid\";
_ucmd=\"medium\";
_ucsr=\"subid\";
_uctr=\"term\";
_ucct=\"content\";
_ucid=\"u_id\";
_ucno=\"nooverride\";
urchinTracker();
＜/script＞
＜title＞Google AdSense
推介＜/title＞
＜link rel=\"stylesheet\" type=\"text/css\" href=\"/adsense/ui-resources/4281405901-style.css\"＞
＜link rel=\"stylesheet\" type=\"text/css\" href=\"/adsense/ui-resources/596854136-tabnavbar.css\"＞
＜link rel=\"stylesheet\" type=\"text/css\" href=\"/adsense/ui-resources/2269670069-submenu.css\"＞
＜link rel=\"stylesheet\" type=\"text/css\" href=\"/adsense/ui-resources/1064069793-reports.css\"＞
＜link rel=\"stylesheet\" type=\"text/css\" href=\"/adsense/ui-resources/2283875027-pager.css\"＞
＜link rel=\"stylesheet\" type=\"text/css\" href=\"/adsense/ui-resources/206017466-tax.css\"＞
＜linkrel=\"stylesheet\" type=\"text/css\" href=\"/adsense/ui-resources/552546691-overviewreport.css\"＞
＜link rel=\"stylesheet\" type=\"text/css\" href=\"/adsense/ui-resources/3864939285-LTR.css\"＞
＜link rel=\"stylesheet\" type=\"text/css\" href=\"/adsense/ui-resources/3322369100-star.css\"＞
＜script type=\"text/javascript\"＞
function AS_windowOnLoad(handler) {
var prev = window.onload;
if (prev) {
window.onload = fun
}
web.xml 文件代碼
＜?xml version=\"1.0\" encoding=\"UTF-8\"?＞
＜!DOCTYPE web-app PUBLIC \"-//Sun Microsystems， Inc.//DTD Web Application 2.3//EN\" \"http://java.sun.com/dtd/web-app_2_3.dtd\"＞
＜web-app＞
＜servlet＞
＜servlet-name＞AjaxUse＜/servlet-name＞
＜servlet-class＞com.servlet.AjaxUse＜/servlet-class＞
＜/servlet＞
＜servlet-mapping＞
＜servlet-name＞AjaxUse＜/servlet-name＞
＜url-pattern＞/servlet/AjaxUse＜/url-pattern＞
＜/servlet-mapping＞
＜/web-app＞
AjaxUser.java 文件代碼
package com.servlet;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.lang.Exception;
public class AjaxUse extends HttpServlet {
private ServletContext context;
public void init(ServletConfig config) throws ServletException {
this.context = config.getServletContext();
}
public void doGet(HttpServletRequest request， HttpServletResponseresponse)
throws IOException， ServletException {
String targetId = request.getParameter(\"id\");
StringBuffer sb=new StringBuffer(\"＜message＞\");
response.setContentType(\"text/xml\");
response.setHeader(\"Cache-Control\"， \"no-cache\");
sb.append(\"＜data＞Hebei＜/data＞＜data＞Qinhuangdao＜/data＞\");
sb.append(\"＜/message＞\");
System.out.println(sb.toString());
PrintWriter out=response.getWriter();
out.write(sb.toString());
out.close();
}}
Ajax技術的組合創新，帶給我們的不僅僅是頁面的更新方法，更是編程觀念和開發模式的創新。相信，Ajax技術必然會帶給我們更為廣泛的web應用。
注意事項
（1）保障Java 5與Apache Tomcat系統環境的正確配置。
（2）將ajax目錄目錄部署至webapps目錄，如圖:
（3）啟動Tomcat，在IE地址欄軟件的URL應為：http://127.0.0.1:8080/ajax/，如圖：
（4）輸入數字0時，服務器返回值為HeBei，輸入數字1時，服務器返回QinHuangDao
（5）mdiv.innerHTML = \"＜div＞\"+str［document.getElementById('userid').value］+\"＜/div＞\"中紅色部分是我新增加的，它的功能是從ID號為userid的文本框中取出值，函數parseMessage()的作用是將服務器返回的數組值進行顯示與格式化，文本框中的數值代表著從服務端返回的某個數組元素值。
（6）可直接訪問http://127.0.0.1:8080/ajax/servlet/AjaxUse，效果如圖：
參考文獻
［1］游麗貞等.Ajax引擎的原理和應用［Ｊ］.微計算機信息，2006，（22）:2-3.
［2］方俊.Ajax引擎設計和應用［Ｊ］.電腦與信息技術，2006，14(3).
［3］楊國瑞，張思博.基于AJAX的Web應用架構設計［Ｊ］.現代電子技術，2006，(15).
注：本文中所涉及到的圖表、注解、公式等內容請以PDF格式閱讀原文。
