即使你現在還沒有聽說,AJAX已經成為web技術領域最熱門的詞(就象Adaptive Path上的一篇文章提到的一樣)。AJAX框架的關鍵是名為XMLHttpRequest的JavaScript對象,通過它客戶端開發人員可以在不打斷用戶操作或者在充分使用隱藏表單的情況下通過HTTP直接發送和接收XML文檔。現在,有些人可能會有這種憂慮,讓那些以前只做表單(form)校驗和增加圖片動畫效果的客戶端開發人員突然間負責分析XML文檔結構,以及與HTTP協議的header部分打交道,這能行嗎?但是,沒有風險就沒有回報。為了減輕這種疑惑,我將展示如何使用XMLHttpRequest實現以前無法實現功能,同時如何減少程序錯誤和如何提高程序質量。
XMLHttpRequest和XML DOM的JavaScript基礎 首先,我們需要聲明一些規則。現在常用的浏覽器(IE, Mozilla, Safari, Opera)都特別提供了對XMLHttpRequest對象的支持,同時也廣泛支持XML DOM,雖然和往常一樣:微軟(Microsoft)使用了一種稍微有些不同的實現並有一些需要特殊注意的地方。和我們那些更進取的朋友直接實現XMLHttpRequest不同,IE需要你創建一個具有相同屬性的ActiveXObject對象的實例。Apple Developer Connection網站上有一篇非常好的文章總覽了XMLHttpRequest,並列舉了它的全部特性。
下面是個基礎的例子:
var req;function postXML(xmlDoc) {if (window.XMLHttpRequest) req = new XMLHttpRequest();
else if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP");
else return;
// fall on our swordreq.open(method, serverURI);
req.setRequestHeader('content-type', 'text/xml');
req.onreadystatechange = xmlPosted;req.send(xmlDoc);
}function xmlPosted() {if (req.readyState != 4) return;
if (req.status == 200) {var result = req.responseXML;
} else {// fall on our sword}}
這個強大的工具應用前景非常廣泛,而且對其潛在應用方面的探索才剛剛開始。但是在任何准備在網上建立XML園地的人失控前,我建議我們先架起一個安全網以防止任何抱負極高的人摔斷他們的脖子。
JavaScript錯誤處理基礎 JavaScript在其早期版本就支持簡單的錯誤處理,但是非常簡陋,只有少數的特性,並且實現的很差。新近的浏覽器不僅支持了類似於C++和Java用於錯誤處理的關鍵字try/catch/finally,而且實現了onerror事件提供捕捉在運行期產生的任何錯誤。其使用方法非常簡單而且直接:
function riskyBusiness() {try {riskyOperation1();
riskyOperation2();
} catch (e) {// e是錯誤類型對象// 至少有兩個屬性:name及message} finally {// 清理工作}}window.onerror = handleError;
// 架起捕獲錯誤的安全網function handleError(message, URI, line) {// 提示用戶,該頁可能不能正確回應return true;
// 這將終止默認信息}
一個實例:將客戶端的錯誤傳遞個服務器
現在我們已經了解了XMLHttpRequest和JavaScript錯誤處理的基礎,讓我們通過一個簡單的例子來看一下如何將這兩個聯系在一起使用。你也許會認為JavaScript錯誤應該很容易通過狀態欄的黃色三角認出,但是我仍然在幾個可靠組織的面向公眾的網站上發現他們躲過了質量評估部門。
因此,在這我將提供一種捕捉錯誤並將他們在服務器上記錄,希望能夠提醒某個人去修改這些錯誤。首先,我們考慮客戶端。客戶端需要提供一個產生日志記錄的類,這個類在使用時必須只實例化一次,並能夠透明地處理那些復雜的細節。
我們首先創建構造器:
// 一個類構造方法function Logger() {// 域this.req;
// 方法this.errorToXML = errorToXML;
this.log = log;}
其次,我們定義一個將Error對象轉成XML的方法。默認情況下,Error對象只有兩個屬性:name和message,但我們需要核對第三個可能很有用屬性location。
// 將一個錯誤映射到XML文檔function errorToXML(err) {var xml = '<?xml version="1.0"?>\n' +'<error>\n' +'<name>' + err.name + '</name>\n' +'<message>' + err.message + '</message>\n';if (err.location) xml += '<location>' + err.location + '</location>';xml += '</error>';return xml;}
接著是log方法。這是這段腳本將上述兩個原則(XMLHttpRequest和XML DOM)結合在一起的最基礎部分。注意我們使用了POST方法。在這我本質上是創建了一個只寫的定制的web服務,在每一次成功的請求時它會建立一些新紀錄。因此,使用POST是唯一可行的方法。
// Logger類的日記方法function log(err) {// 嗅探環境if (window.XMLHttpRequest) this.req = new XMLHttpRequest();else if (window.ActiveXObject) this.req =new ActiveXObject("Microsoft.XMLHTTP");
else retu