Ajax的错误处理机制探讨
来源:yesky 时间:2007-09-07 09:53:00
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();