英文原址：http://www.xml.com/pub/a/2005/05/11/ajax-error.html
當(dāng)前web技術(shù)中最熱門的詞語是什么？是AJAX。AJAX框架組件的核心是XMLHttpRequest JavaScript對象，它允許客戶端開發(fā)人員在不中斷用戶操作、不利用隱藏頁面的情況下，通過HTTP發(fā)送和接收XML文檔?，F(xiàn)在，有些人可能會(huì)感到恐懼，因?yàn)樗蝗辉试S那些可能過多地使用了驗(yàn)證窗體和動(dòng)畫圖像的客戶端開發(fā)人員負(fù)責(zé)傳遞XML文檔和處理HTTP頭信息，但是，沒有風(fēng)險(xiǎn)就沒有收益。我們不用害怕，我將演示如何使用XMLHttpRequest來添加一些以前不可能的、行不通的特性，它同時(shí)還減少了錯(cuò)誤，提高了產(chǎn)品質(zhì)量。
JavaScript中的XMLHttpRequest和XML DOM
首先，我們需要建立一些規(guī)則。特殊的XMLHttpRequest對象和一般的XML DOM都受到了最新的瀏覽器（IE、Mozilla、Safari、Opera）的廣泛支持，盡管在一般情況下，微軟對于自己的實(shí)現(xiàn)會(huì)稍微增加一些東西，需要某些特殊的處理。盡管我們更多的朋友直接實(shí)現(xiàn)了XMLHttpRequest，但是IE還是要求你用相同的屬性實(shí)例化一個(gè)ActiveXObject。在Apple開發(fā)者關(guān)系站點(diǎn)上可以找到相關(guān)的概述和所有特性列表。
下面是一個(gè)基本的例子：
| 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 { // 失敗了 } } |
| function riskyBusiness() { try { riskyOperation1(); riskyOperation2(); } catch (e) { // e是一個(gè)Error類型的對象，至少有兩個(gè)屬性：name和message } finally { // 清除消息 } } window.onerror = handleError; // 捕捉所有錯(cuò)誤的安全網(wǎng) function handleError(message, URI, line) { // 提示用戶這個(gè)頁面可能無法正常響應(yīng) return true; // 停止默認(rèn)的消息 } |
| // 類的構(gòu)造函數(shù) function Logger() { // 字段 this.req; // 方法 this.errorToXML = errorToXML; this.log = log; } |
| // 把錯(cuò)誤映射到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方法 function log(err) { // 查看特性 if (window.XMLHttpRequest) this.req = new XMLHttpRequest(); else if (window.ActiveXObject) this.req =new ActiveXObject("Microsoft.XMLHTTP"); else return; // 失敗了 // 設(shè)置方法和URI this.req.open("POST", "/cgi-bin/AjaxLogger.cgi"); // 設(shè)置請求頭信息。REFERER 是頂層URI，如果它發(fā)生在一個(gè)包含的.js文件中 // 那么它的位置與錯(cuò)誤的位置可能不同 this.req.setRequestHeader(’REFERER’, location.href); this.req.setRequestHeader(’content-type’, ’text/xml’); // 請求完成的時(shí)候調(diào)用的函數(shù) this.req.onreadystatechange = errorLogged; this.req.send(this.errorToXML(err)); // 如果請求在10秒鐘內(nèi)沒有完成，就出現(xiàn)一些錯(cuò)誤消息 this.timeout = window.setTimeout("abortLog();", 10000); } |
| // 只有一個(gè)日志記錄器實(shí)例 var logger = new Logger(); |
| // 我們試過了，但是連接錯(cuò)誤，沒有希望了 function abortLog() { logger.req.abort(); alert("Attempt to log the error timed out."); } // 請求的狀態(tài)發(fā)生改變的時(shí)候調(diào)用 function errorLogged() { if (logger.req.readyState != 4) return; window.clearTimeout(logger.timeout); // 請求完成了 if (logger.req.status ＞= 400) alert(’Attempt to log the error failed.’); } |
| ＜script type="text/javascript" src="Logger.js"＞＜/script＞ ＜script type="text/javascript"＞ function trapError(msg, URI, ln) { // 在對象中包裝我們未知的錯(cuò)誤 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＞ |
| 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，內(nèi)容既不是URL編碼也不是多部分形式， #那么整個(gè)post會(huì)被填充到一個(gè)參數(shù)中：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’})); # 改變?nèi)罩局械拿?br> 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 { # 這部分響應(yīng)代碼表明操作成功了，但是客戶端不應(yīng)該期待任何內(nèi)容 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"; } |
聯(lián)系客服
