作者: , 出处:IT专家网社区, 责任编辑: 叶江,
2007-06-21 11:35
本文将演示如何使用XMLHttpRequest来添加一些以前不可能的、行不通的特性，它同时还减少了错误，提高了产品质量……
现在我们知道了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); } |
