错误分析和AJAX(XMLHttpRequest)
下面是个简单易学的错误分析和AJAX(XMLHttpRequest)教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!
即使你现在还没有听说,AJAX已经成为web技术领域最热门的词(就象Adaptive Path上的一篇文章提到的一样)。AJAX框架的关键是名为XMLHttpRequest的JavaScript对象,通过它客户端开发人员可以在不打断用户操作或者在充分使用隐藏表单的情况下通过HTTP直接发送和接收XML文档。现在,有些人可能会有这种忧虑,让那些以前只做表单(form)校验和增加图片动画效果的客户端开发人员突然间负责分析XML文档结构,以及与HTTP协议的header部分打交道,这能行吗?但是,没有风险就没有回报。为了减轻这种疑惑,我将展示如何使用XMLHttpRequest实现以前无法实现功能,同时如何减少程序错误和如何提高程序质量。
首先,我们需要声明一些规则。现在常用的浏览器(IE, Mozilla, Safari, Opera)都特别提供了对XMLHttpRequest对象的支持,同时也广泛支持XML DOM,虽然和往常一样:微软(Microsoft)使用了一种稍微有些不同的实现并有一些需要特殊注意的地方。和我们那些更进取的朋友直接实现XMLHttpRequest不同,IE需要你创建一个具有相同属性的ActiveXObject对象的实例。Apple Developer Connection网站上有一篇非常好的文章总览了XMLHttpRequest,并列举了它的全部特性。
下面是个基础的例子:
var req;function postXML(xmlDoc) {if (window.XMLHttpRequest) req = new XMLHttpRequest();
else if (window.ActiveXObject) req = new ActiveXObject("Microsoft.XMLHTTP");
else return;
// fall on our swordreq.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 {// fall on our sword}}
这个强大的工具应用前景非常广泛,而且对其潜在应用方面的探索才刚刚开始。但是在任何准备在网上建立XML园地的人失控前,我建议我们先架起一个安全网以防止任何抱负极高的人摔断他们的脖子。
JavaScript在其早期版本就支持简单的错误处理,但是非常简陋,只有少数的特性,并且实现的很差。新近的浏览器不仅支持了类似于C++和Java用于错误处理的关键字try/catch/finally,而且实现了onerror事件提供捕捉在运行期产生的任何错误。其使用方法非常简单而且直接:
function riskyBusiness() {try {riskyOperation1();
riskyOperation2();
} catch (e) {// e是错误类型对象// 至少有两个属性:name及message} finally {// 清理工作}}window.onerror = handleError;
// 架起捕获错误的安全网function handleError(message, URI, line) {// 提示用户,该页可能不能正确回应return true;
// 这将终止默认信息}
一个实例:将客户端的错误传递个服务器
现在我们已经了解了XMLHttpRequest和JavaScript错误处理的基础,让我们通过一个简单的例子来看一下如何将这两个联系在一起使用。你也许会认为JavaScript错误应该很容易通过状态栏的黄色三角认出,但是我仍然在几个可靠组织的面向公众的网站上发现他们躲过了质量评估部门。
因此,在这我将提供一种捕捉错误并将他们在服务器上记录,希望能够提醒某个人去修改这些错误。首先,我们考虑客户端。客户端需要提供一个产生日志记录的类,这个类在使用时必须只实例化一次,并能够透明地处理那些复杂的细节。
我们首先创建构造器:
// 一个类构造方法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方法。这是这段脚本将上述两个原则(XMLHttpRequest和XML DOM)结合在一起的最基础部分。注意我们使用了POST方法。在这我本质上是创建了一个只写的定制的web服务,在每一次成功的请求时它会建立一些新纪录。因此,使用POST是唯一可行的方法。
// Logger类的日记方法function log(err) {// 嗅探环境if (window.XMLHttpRequest) this.req = new XMLHttpRequest();else if (window.ActiveXObject) this.req =new ActiveXObject("Microsoft.XMLHTTP");
else retu123下一页 remote_host();
carp "name: [$name], msg: [$msg], location: [$location]";
};
if ($@) {
print $request->header(-status => '500 Internal server error',上一页123