Ajax的錯誤處理機制

ajax|錯誤|錯誤處理

AJAX架構組件的核心是XMLHttpRequest JavaScript對象，它允許用戶端開發人員在不中斷使用者操作、不利用隱藏頁面的情況下，通過HTTP發送和接收XML文檔。現在，有些人可能會感到恐懼，因為它突然允許那些可能過多地使用了驗證表單和動畫映像的用戶端開發人員負責傳遞XML文檔和處理HTTP頭資訊，但是，沒有風險就沒有收益。我們不用害怕，我將示範如何使用XMLHttpRequest來添加一些以前不可能的、行不通的特性，它同時還減少了錯誤，提高了產品品質。

JavaScript中的XMLHttpRequest和XML DOM

首先，我們需要建立一些規則。特殊的XMLHttpRequest對象和一般的XML DOM都受到了最新的瀏覽器（IE、Mozilla、Safari、Opera）的廣泛支援，儘管在一般情況下，微軟對於自己的實現會稍微增加一些東西，需要某些特殊的處理。儘管我們更多的朋友直接實現了XMLHttpRequest，但是IE還是要求你用相同的屬性執行個體化一個ActiveXObject。在Apple開發人員關係網站上可以找到相關的概述和所有特性列表。下面是一個基本的例子：

var req;

function postXML(xmlDoc) {

　if (window.XMLHttpRequest) req = new XMLHttpRequest();

　else if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP");

　else return; // 失敗了

　req.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 {

// 失敗了

　}

}

這種強大的功能的潛在使用者是很多的，對於它可能實現的功能的探索才剛剛開始。但是在你試圖在web上的建立XML功能之前，我建議你設定一個"安全網"來保證你的抱負（想法）不會受到打擊。

JavaScript錯誤處理基礎

JavaScript已經出現很久了，它的早期版本比較原始，缺少特性，僅僅是實現了而已。最新的瀏覽器不但支援C++和Java中try/catch/finally關鍵字，而且實現了onerror事件，而這個事件可以捕捉運行時出現的任何錯誤。它的使用是非常直接的：

function riskyBusiness() {

　try {

riskyOperation1();

riskyOperation2();

　} catch (e) {

// e是一個Error類型的對象，至少有兩個屬性：name和message

　} finally {

// 清除訊息

　}

}

window.onerror = handleError; // 捕捉所有錯誤的安全網

function handleError(message, URI, line) {

　// 提示使用者這個頁面可能無法正常響應

　return true; // 停止預設的訊息

}
 
實際的例子：把用戶端錯誤傳遞到伺服器上

現在我們知道了XMLHttpRequest和JavaScript錯誤處理的一些基礎知識了，我們來看一個同時使用了兩者的實現例子。你可能認為JavaScript錯誤可以很簡單地在流行的"黃色死亡三角"中顯示出來，但是仍然有一些錯誤傳遞到了幾家籃籌股公司的公用web網站的品質部門了。

因此，我將提供一個用於捕捉錯誤並把錯誤記錄到伺服器上的方法，這樣其他人就可能修補這些問題。首先，我們考慮用戶端。用戶端必須提供一個類，它被用作日誌記錄器（Logger）對象，可以透明地處理各種細節資訊。

下面是我們建立的建構函式：

// 類的建構函式

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方法。這是指令碼最基本的部分，它真正地實現了上述的原理。請注意，我們在調用中使用的是POST方法。從本質上說，我在此處建立的是一個定製的web服務，它是唯讀，並為每個成功的請求建立新記錄。因此，POST是唯一適當的選擇。

// 日誌記錄類的log方法

function log(err) {

　// 查看特性

　if (window.XMLHttpRequest) this.req = new XMLHttpRequest();

　else if (window.ActiveXObject) this.req =new ActiveXObject("Microsoft.XMLHTTP");

　else return; // 失敗了

　// 設定方法和URI

　this.req.open("POST", "/cgi-bin/AjaxLogger.cgi");

　// 佈建要求頭資訊。REFERER 是頂層URI，如果它發生在一個包含的.js檔案中

　// 那麼它的位置與錯誤的位置可能不同

　this.req.setRequestHeader(’REFERER’, location.href);

　this.req.setRequestHeader(’content-type’, ’text/xml’);

　// 請求完成的時候調用的函數

　this.req.onreadystatechange = errorLogged;

　this.req.send(this.errorToXML(err));

　// 如果請求在10秒鐘內沒有完成，就出現一些錯誤訊息

　this.timeout = window.setTimeout("abortLog();", 10000);

} 

類的最後一部分建立了一個Logger類執行個體。這個類應該只有一個執行個體。

// 只有一個日誌記錄器執行個體

var logger = new Logger();

最後的兩個函數只是用於瑣碎交易管理的。如果在記錄錯誤的時候出現了問題，除了幹擾使用者之外，我們幾乎不能做任務事務。但是，這種情況永遠不會出現。這些不是類的方法，因為事件沒有指向我們的對象的指標，但是它會指向我們建立的logger執行個體。

// 我們試過了，但是串連錯誤，沒有希望了

function abortLog() {

　logger.req.abort();

　alert("Attempt to log the error timed out.");

}

// 請求的狀態發生改變的時候調用

function errorLogged() {

　if (logger.req.readyState != 4) return;

　window.clearTimeout(logger.timeout);

　// 請求完成了

　if (logger.req.status ＞= 400)

alert(’Attempt to log the error failed.’);

}

前面的所有代碼都被封裝到一個.js檔案中了，我們可以在網站的任何（或每一個）頁面中包含這個檔案。下面是如何包含這個檔案的例子：

＜script type="text/javascript" src="Logger.js"＞＜/script＞

＜script type="text/javascript"＞

function trapError(msg, URI, ln) {

　// 在對象中封裝我們未知的錯誤

　var error = new Error(msg);

　error.location = URI + ’, line: ’ + ln; // 添加自訂屬性

　logger.log(error);

　warnUser();

　return true; // 停止黃色三角形

}

window.onerror = trapError;

function foo() {

　try {

riskyOperation();

　} catch (err) {

//添加自訂屬性

err.location = location.href + ’, function: foo()’;

logger.log(err);

warnUser();

　}

}

function warnUser() {

　alert("An error has occurred while processing this page."+"Our engineers have been alerted!");

　location.href = ’/path/to/error/page.html’;

}

＜/script＞

現在你已經知道如何把日誌記錄器整合到HTML頁面中了，剩餘的工作就是定義一種接收和轉換訊息的方法了。我選擇使用最底層的通用命名方法，在Perl中建立了一個CGI指令碼，這個指令碼使用了我喜歡的一些模組，它使用XML::Simple來分析post資料，使用CGI::Carp把結果直接匯入到httpd錯誤記錄檔，這樣可以節約系統管理員的時間，因為他不需要查看另外一個日誌了。這個指令碼還包含了很多良好的樣本，它們適當地記錄了不同的成功和失敗條件。

use CGI;

use CGI::Carp qw(set_progname);

use XML::Simple;

my $request = CGI-＞new();

my $method = $request-＞request_method();

# 方法必須是POST

if ($method eq ’POST’) {

　eval {

my $content_type = $request-＞content_type();

if ($content_type eq ’text/xml’) {

　print $request-＞header(-status =＞’415 Unsupported Media Type’, -type =＞ ’text/xml’);

　croak "Invalid content type: $content_type\n";

}

# 如果方法是POST，內容既不是URL編碼也不是多部分形式，

#那麼整個post會被填充到一個參數中：POSTDATA。

my $error_xml = $request-＞param(’POSTDATA’);

my $ref = XML::Simple::XMLin($error_xml);

my ($name, $msg, $location) =($ref-＞{’name’}, $ref-＞{’message’}, ’’);

$location = $ref-＞{’location’} if (defined($ref-＞{’location’}));

# 改變日誌中的名字

set_progname(’Client-side error’);

my $remote_host = $request-＞remote_host();

carp "name: [$name], msg: [$msg], location: [$location]";

　};

　if ($@) {

print $request-＞header(-status =＞ ’500 Internal server error’,-type =＞ ’text/xml’);

croak "Error while logging: $@";

　} else {

# 這部分響應代碼錶明操作成功了，但是用戶端不應該期待任何內容

print $request-＞header(-status =＞ ’204 No content’,-type =＞ ’text/xml’);

　}

　} else {

print $request-＞header(-status =＞ ’405 Method not supported’,-type =＞ ’text/xml’);

croak "Unsupported method: $method";

}

已經完成了！現在，當某些難以理解的JavaScript進入系統的時候，你就可以期待著自己的日誌監視器開始閃紅燈，你的用戶端開發人員在深夜接到電話了。