| [转贴]AJAX深度歷險 | ||
上一篇:[转贴]bandari班得瑞典藏全集(10CD)320k --全正版压缩 |
||
| 添加日期：2006/4/19 11:47:47 | 快速返回 返回列表 | 阅读4641次 |
AJAX 為「Asynchronous JavaScript and XML」的簡稱，（非同步JavaScript和XML），是一種互動式網頁應用的網頁開發技術。 AJAX包含哪些東西呢? AJAX不是指一種單一的技術，而是包含了以下一系列相關的技術。 1.XHTML/HTML+CSS 2.Document Object Model (DOM) 3.XMLHttpRequest 4.JavaScript AJAX的一些特性: 更新資料，網頁無須重整(F5)。 與SERVER端通訊可以透過XML資料溝通。 步驟一: 當使用JavaScript與server溝通時，你可以使用一些元件 在 Internet Explorer ActiveX 物件，稱為 XMLHTTP 類別。 在 Mozilla Safari或其他瀏覽器，稱為 XMLHttpRequest 類別 所以在使用AJAX技術時，若是要做到跨瀏覽器時，可以撰寫以下JS程式碼作判別: if (window.XMLHttpRequest) { //Mozilla,Safari, 其他... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE http_request = new ActiveXObject("Microsoft.XMLHTTP"); } 在某一些Mozilla瀏覽器當從在server回應XML資料時，有時候會無作用。 原因是server無回傳XML mime-type header，要解決該問題可以撰寫額外程式碼來避免這一問題發生: http_request = new XMLHttpRequest(); http_request.overrideMimeType('text/xml'); 當資料由server端回傳後，你需要處裡該 HTTP request 物件回傳時可以使用http_request.onreadystatechange = 處理函式名稱; 或是撰寫另一種方式 http_request.onreadystatechange = function(){ // 處理回應事件 }; 若是由Clinet去向server傳送request訊息，可以使用 open()和send()的方法 http_request.open('GET', 'http://www.example.org/some.file', true); http_request.send(null); open()方法有三個參數 1.第一個參數為HTTP request method(可以設為 POST、GET、HEAD或其他http提供的方法) 2.第二個參數是傳送網址的網頁名稱 3.第三個參數若設為TRUE表示若是server端若是還沒回應，client將ㄧ直傳送需求直到server端回覆為止 註:請使用正確的domain名稱 不然將會產生 'permission denied'錯誤 send()方法表示你可以傳參數給server端 格式如下 name=value&anothername=othervalue&so=on 註: 當在使用open()方法參數為POST時，必須改變 MIME type要不然的話 server端將拋棄該項請求 設定如下 http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 步驟二: 在步驟一中有提到 http_request.onreadystatechange = 處理函式名稱; 或是 http_request.onreadystatechange = function(){ // 處理回應事件 }; 我們可以在該處理函式中先行判斷回應狀態為何，在做該項處理項目 當http_request.readyState = 4 時，表示client端已從server端接受資料成功 if (http_request.readyState == 4) { // 收到server端回應資料OK } else { // 還未收到 } 以下有5個回應狀態可供判斷 0 (未初始化) 對象已建立，但是尚未初始化（尚未使用open方法） 1 (初始化) 對象已建立，尚使用send方法 2 (送出資料) send方法已使用，但是當前的狀態及http回應未知 3 (資料傳送中) 已接收部分資料，因為回應及http回應不全，這時通過responseBody和responseText截取部分資料會出現錯誤， 4 (完成) 資料接收完畢,此時可以通過通過responseBody和responseText截取完整的回應資料 接下來可以判斷server端HTTP回應碼是否正確 200 為 OK if (http_request.status == 200) { // 正確! } else { // for example the response may be a 404 (Not Found) // or 500 (Internal Server Error) response codes } 當資料由server端回應到client端，可以使用兩種格式來接收回應資料。 1. http_request.responseText – 將回應為文字格式資料 2. http_request.responseXML – 將回應為XML格式資料可以使用 XMLDocument 物件來做資料解析的動作。 以上就是使用HttpRequest server端與client端的資料處理方式， 相信對於AJAX的處理能有更深的了解，後面的章節我將會示範使用http_request.responseText和http_request.responseXML資料的方法 ----------------------------------------------------------------- 這一篇文章為AJAX範例，若是你還對AJAX不清楚的話你可以參考"AJAX深度歷險1(Getting Started) "該篇說明: 步驟一: 開啟文字編輯器編輯以下程式碼，並且存檔為httprequest.htm放在WEB SERVER 根目錄中 httprequest.html 程式碼如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" language="javascript"> var http_request = false; function makeRequest(url) { http_request = false; if (window.XMLHttpRequest) { // Mozilla, Safari,其他瀏覽器... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) { // FOR IE try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){} } } if (!http_request) { alert('放棄:( 不能產生 XMLHTTP 物件'); return false; } http_request.onreadystatechange = alertContents; http_request.open('GET', url, true); http_request.send(null); } function alertContents() { if (http_request.readyState == 4) { if (http_request.status == 200) { alert(http_request.responseText); } else { alert('請求時產生錯誤'); } } } </script> </head> <body> <span style="cursor: pointer; text-decoration: underline" onclick="makeRequest('test.htm')">產生請求</span> </body> </html> 步驟二:開啟文字編輯器編輯以下程式碼，並且存檔為test.htm 放在WEB SERVER 根目錄中 test.html程式碼如下所示:Hi JAMES 你的第一個AJAX範例。 執行結果 IE & FIERFOX  ------------------------------------------------------------ 步驟一: 開啟文字編輯器編輯以下程式碼，並且存檔為httprequestxml.htm 放在WEB SERVER 根目錄中 httprequestxml.htm 程式碼如下所示(請存成utf-8格式):  步驟二: 開啟文字編輯器編輯以下程式碼，並且存檔為test.xml 放在WEB SERVER 根目錄中 test.xml程式碼如下所示(請存成utf-8格式):  執行結果 IE & FIERFOX  ------------------------------------------------------------------ 說明: 在AJAX中，JAVASCRIPT是ㄧ個重要的元素。在本章中，將使用DOM的概念。若是您對JAVASCRIPT不熟，對英文無恐懼可以參考"這裡"或翻閱相關書籍。 若是你對HTML標籤自訂屬性有興趣，可以參考"三月份MMUG網聚，學到在html標籤自定屬性的小技倆 "該篇教學。 對於DOM(Document Object Model )不熟的人，可以參考"關於文件物件模型(DOM)"該篇說明，對英文無恐懼且不想買書的可以參考"這裡" 有了DOM(Document Object Model )概念後，就可以使用Javascript提供的document.creatElement()方法來新增一個HTML元素，例如document.creatElement('a')就建立一個標籤a的HTML元素。 註:若是你的網頁是以XHTML開發的話就不能使用document.creatElement()方法來新增一個HTML元素，必須改用document.creatElementNS()方法來建立。 在這一個範例中，我將使用document.creatElement()方法動態再網頁中使用Javascript動態加入HTML標籤，將產生一個清單/選單。 先看一下執行結果:  程式碼如下  透過該項方式，就可以讓JS+DOM更加強大，再來若是加入CSS更能產生更多的效果。 ---------------------------------------------------------- now ,I will show you the AJAX basic flow map. Whether the XMLHttpRequest object create ↓ open method (the POST and the GET, the URL, same period or the asynchronism which is requested and so on appointment) ↓ send method (data transmission) ↓ < Server side > ↓ the onreadystatechange event (other than the ie the call-back also the onload can use (sending and receiving state changes, the event which is started) ↓ the readyState property (the value which displays sending and receiving state, with 4 completion of reception. If onload unnecessary. ↓ responseText or responsecXml property (reception data) |
||
| 评论 COMMENTS | |
| 没有评论 No Comments. |
