DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> Ajax的錯誤處理機制探討(2)
Ajax的錯誤處理機制探討(2)
編輯:AJAX詳解      日期:2016/12/30 17:51:51
實際的例子:把客戶端錯誤傳遞到服務器上

  現在我們知道了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進入系統的時候,你就可以期待著自己的日志監視器開始閃紅燈,你的客戶端開發人員在深夜接到電話了。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved