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＞