像其他人一樣，當(dāng)我看到一下RIA應(yīng)用，例如Google Maps和Google Suggest的時(shí)候我都非常驚訝。我希望知道是如何實(shí)現(xiàn)的?，F(xiàn)在，謎底揭開了，那就是AJAX。這是在我花了一段時(shí)間研究AJAX之后才知曉的。這里有一個(gè)很好的例子讓我們知道AJAX是如何很好的應(yīng)用在 JavaRSS.com 里面的。
什么是AJAX: AJAX 是一個(gè)架構(gòu)（architecture）并不是一種技術(shù)。AJAX代表異步的JavaScript和XML。
妙語（Punch Line）: 延遲加載
問題: 當(dāng)JavaRSS.com首頁加載時(shí)，他同時(shí)加載了所有條目的介紹（如果你在設(shè)置中激活了）。這些介紹只有當(dāng)你鼠標(biāo)移動(dòng)到該條目的上面的時(shí)候才顯示。
現(xiàn)在的問題是用戶不可能是鼠標(biāo)移過所有的條目，所以預(yù)先加載所有的介紹不是個(gè)好主意。
解決方案: 使用AJAX，當(dāng)鼠標(biāo)移過的時(shí)候從服務(wù)器動(dòng)態(tài)加載條目的介紹。
這么做可以使初始頁的加載大小減小一半甚至更多，這樣一來頁面加載就更快，就內(nèi)能得到一個(gè)更好的用戶體驗(yàn)。
時(shí)序圖:
我們首先會(huì)在onmouseover事件中調(diào)用JavaScript函數(shù)getDescription。下面是html代碼:
<a href="/" onmouseover="getDescription(3,1)">Java & J2EE News<a>下面是 getDescription 函數(shù)的代碼:
var url = ‘http://localhost:8080/getDescription.jsp?channelId=‘ + channelId + ‘&itemId=‘ + itemId;if (window.XMLHttpRequest) {req = new XMLHttpRequest();} else if (window.ActiveXObject) {req = new ActiveXObject("Microsoft.XMLHTTP");}req.onreadystatechange = processRequest;req.open("GET", url, true);req.send(null);XMLHttpRequest 對象將用來進(jìn)行http連接并取回xml文檔。我們需要檢測一下是否是IE并且創(chuàng)建 XMLHttpRequest 對象。
if (window.XMLHttpRequest) {req = new XMLHttpRequest();} else if (window.ActiveXObject) {req = new ActiveXObject("Microsoft.XMLHTTP");}設(shè)置回調(diào)函數(shù)，并且發(fā)送"GET"請求至服務(wù)器接收xml文檔:
req.onreadystatechange = processRequest;req.open("GET", url, true);req.send(null);JSP將根據(jù)適當(dāng)?shù)臈l目編號創(chuàng)建具有相應(yīng)介紹的xml文檔。
<%String channelId = request.getParameter("channelId");String itemId = request.getParameter("itemId");//String description = new Channel(channelId).getItemDescription(itemId);String description = "This is the description for the channelId: " + channelId + "and itemId: " + itemId;if (description != null) {response.setContentType("text/xml");response.setHeader("Cache-Control", "no-cache");response.getWriter().write("" + description.toString() + " ");} else {//nothing to showresponse.setStatus(HttpServletResponse.SC_NO_CONTENT);}%>檢測HTTP請求返回狀態(tài)碼，狀態(tài)為200，即OK。
function processRequest() {if (req.readyState == 4) {if (req.status == 200) {parseMessages();} else {alert ( "Not able to retrieve description" );}}}readyState = 4 的情況下文檔被加載。
readyState Status Codes:0 = uninitialized1 = loading2 = loaded3 = interactive4 = complete
最后，我們解析XML文檔并顯示介紹。
問題: 唯一的問題就是我遭遇到的 "&" 字符。 "&" 在XML文檔里面不是一個(gè)有效字符。所以我需要將他轉(zhuǎn)換成 "&"。
function parseMessages() {response = req.responseXML.documentElement;itemDescription = response.getElementsByTagName(‘description‘)[0].firstChild.data;alert(itemDescription);}下面是所有的代碼:
HTML Code:<a href="/" onmouseover="getDescription(3,1)">Java & J2EE News<a>JavaScript Code:function getDescription(channelId,itemId) {var url = ‘http://localhost:8080/getDescription.jsp?channelId=‘ + channelId + ‘&itemId=‘ + itemId;if (window.XMLHttpRequest) {req = new XMLHttpRequest();} else if (window.ActiveXObject) {req = new ActiveXObject("Microsoft.XMLHTTP");}req.onreadystatechange = processRequest;req.open("GET", url, true);req.send(null);}function processRequest() {if (req.readyState == 4) {if (req.status == 200) {parseMessages();} else {alert ( "Not able to retrieve description" );}}}function parseMessages() {response = req.responseXML.documentElement;itemDescription = response.getElementsByTagName(‘description‘)[0].firstChild.data;alert ( itemDescription );}JSP Code:<%String channelId = request.getParameter("channelId");String itemId = request.getParameter("itemId");description = "This is the description for the channelId: " + channelId + "and itemId: " + itemId;if (description != null) {response.setContentType("text/xml");response.setHeader("Cache-Control", "no-cache");response.getWriter().write("" + description.toString() + " ");} else {//nothing to showresponse.setStatus(HttpServletResponse.SC_NO_CONTENT);}%>資源:
AJAX Java BluePrints Solutions Catalog
AJAX in Wikipedia
W3C HTTP Status Codes
使用AJAX的Google站點(diǎn):
Gmail
Google Suggest
Google Maps
關(guān)于作者: Jay 具有10年以上的IT工作經(jīng)驗(yàn)，并且自從Java & J2EE誕生那天起就開始接觸他們了。
