標籤：

Ajax簡單實例

08-02

Ajax簡單實例

[ 2006-01-22 19:50:35 | Author: bohemia ] Font Size: Large | Medium | Small 一直期待著《Ajax基礎教程》 的上市，走了「上海書城」、瀋陽的「大松科技書店」，看來是還沒有出來呢。在網上轉轉，看到這篇Ajax教程 ，是翻譯自一篇國外教程 ，拿下來實踐了一下，這裡簡潔的記錄一下，作為學習的開端。這個是用於顯示主體的ajax.html<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html lang="en" dir="ltr"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>AJAX網頁開發實例</title><script type="text/javascript"><!--function ajaxRead(file){var xmlObj = null;if(window.XMLHttpRequest){xmlObj = new XMLHttpRequest();} else if(window.ActiveXObject){xmlObj = new ActiveXObject("Microsoft.XMLHTTP");} else {return;}xmlObj.onreadystatechange = function(){if(xmlObj.readyState == 4){updateObj(『xmlObj『, xmlObj.responseXML.getElementsByTagName(『data『)[0].firstChild.data);}}xmlObj.open (『GET『, file, true);xmlObj.send (『『);}function updateObj(obj, data){document.getElementById(obj).firstChild.data = data;}//--></script></head><body><h1>AJAX網頁開發實例</h1><p>看看下面的例子，你也許就會懂得數據是怎麼樣完成無刷新的了。</p><p id="xmlObj" style="border:1px dashed #ccc;padding:10px;">這是一些簡單的數據。<a href="data.xml" title="調取XML數據。 " onclick="ajaxRead(『data.xml『); this.style.display=『none『; return false">調取XML數據。 </a></p><p><a href="http://www.b3inside.com">返回Blog</a></p></body></html>下面是包含數據的data.xml<?xml version="1.0" encoding="UTF-8"?><root><data>這裡是XML中的數據。</data></root>注意我們現在連接data.xml並沒有使用javascript,要使用javascript，執行ajaxRead函數，連接是隱藏的，並且此連接並沒有重定向到data.xml文件。函數ajaxRead還沒有定義，所以當你測試時，會得到一個JS錯誤。所以我們在開始的<head>中定義了函數：<script type="text/javascript"><!--function ajaxRead(file){var xmlObj = null;if(window.XMLHttpRequest){xmlObj = new XMLHttpRequest();} else if(window.ActiveXObject){xmlObj = new ActiveXObject("Microsoft.XMLHTTP");} else {return;}xmlObj.onreadystatechange = function(){if(xmlObj.readyState == 4){updateObj(『xmlObj『, xmlObj.responseXML.getElementsByTagName(『data『)[0].firstChild.data);}}xmlObj.open (『GET『, file, true);xmlObj.send (『『);}function updateObj(obj, data){document.getElementById(obj).firstChild.data = data;}//--></script>解釋下，函數ajaxRead將在點擊View XML data連接的時候執行，在函數里，我們定義了一個xmlObj的變數，它就負責客戶端和伺服器端中轉。我們定義一個if/else循環塊：if(window.XMLHttpRequest){xmlObj = new XMLHttpRequest();} else if(window.ActiveXObject){xmlObj = new ActiveXObject("Microsoft.XMLHTTP");} else {return;}這只是測試不同對象的可用性——不同的瀏覽器執行XMLHttpRequest對象的時候不同，所以我們定義「xmlObj」作為XMLHttpRequest對象的時候，我們必須區別對待。如果沒有XMLHttpRequest可用，函數以return結束來取消錯誤報告。大部分時候，XMLHttpRequest都是可用的，不過排除一些太老的瀏覽器。下面的部分：xmlObj.onreadystatechange = function(){if(xmlObj.readyState == 4){updateObj(『xmlObj『, xmlObj.responseXML.getElementsByTagName(『data『)[0].firstChild.data);}}每當XMLHttpRequest狀態改變時，onreadystatechange事件就觸發，此事件共有5個狀態，從0到4。[0]uninitialized未初始化(在XMLHttpRequest開始前)[1]loading(一旦初始化)[2]loaded(一旦XMLHttpRequest從伺服器端獲得響應)[3]interactive(當對象連接到伺服器)[4]complete(完成)狀態5[編號是4]是用來確認數據是否可用的，正好用來給xmlObj.readyState用，如果「是」，我們執行updateObj函數，此函數有2個參數：ID以及填充的數據，它的方法以後說明。觀看這個例子的Demo
推薦閱讀：

※AJAX速覽
※ajax跨域，這應該是最全的解決方案了
※Web 前端工程師需要 AJAX?感覺請求提交都是後端的事情。
※如何解决 Ajax 跨域请求不到的问题？
※Ajax選項卡、隔行換色、彈出層

TAG:簡單 | Ajax |