[转载]Ajax的错误处理机制探讨
当前web技术中最热门的词语是什么?是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; // 方法 |
接下来,我们定义了一个方法,它会把Error对象序列化为XML。在默认情况下,Error对象只有两种属性,分别是name和message,但是我们还是使用了第三个属性(location),它有时候是有用的。
// 把错误映射到XML文档中 function errorToXML(err) { var xml = ’<?xml version="1.0"?> ’ + ’<error> ’ + ’<name>’ + err.name + ’</name> ’ + ’<message>’ + err.message + ’</message> ’; 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."); } // 请求的状态发生改变的时候调用 |
前面的所有代码都被包装到一个.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() { |
现在你已经知道如何把日志记录器集成到HTML页面中了,剩余的工作就是定义一种接收和转换消息的方法了。我选择使用最底层的通用命名方法,在Perl 中建立了一个CGI脚本,这个脚本使用了我喜欢的一些模块,它使用XML::Simple来分析post数据,使用CGI::Carp把结果直接导入到 httpd错误日志,这样可以节约系统管理员的时间,因为他不需要查看另外一个日志了。这个脚本还包含了很多良好的示例,它们适当地记录了不同的成功和失 败条件。
use CGI; use CGI::Carp qw(set_progname); use XML::Simple; my $request = CGI->new(); my $method = $request->request_method(); |
已经完成了!现在,当某些难以理解的JavaScript进入系统的时候,你就可以期待着自己的日志监视器开始闪红灯,你的客户端开发人员在深夜接到电话了。
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/374079/viewspace-131085/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/374079/viewspace-131085/
[转载]Ajax的错误处理机制探讨相关推荐
- 转载:Ajax及 GET、POST 区别
转载:Ajax及 GET.POST 区别 收获: xhr.setRequestHeader(), xhr.getResponseHeader() 可以设置和获取请求头/响应头信息; new FormD ...
- 【转载】Java异常控制机制和异常处理原则
转载自Java异常控制机制和异常处理原则 Java异常控制机制又被称为"违例控制机制". 捕获程序错误最理想的时机是在编译阶段,这样可以彻底避免错误的代码运行.但并非所有的错误都能 ...
- Vue.js@2.6.10更新内置错误处机制,Fundebug同步支持相应错误监控
2019独角兽企业重金招聘Python工程师标准>>> 摘要: Fundebug 的 JavaScript 错误监控插件同步支持 Vue.js 异步错误监控. Vue.js 从诞生至 ...
- .net错误处理机制
.net错误处理机制 让我们想想,ASP.NET为我们提供了几种错误处理机制?如果同时使用他们是不是有一定的优先级?.NET提供了四种错误处理机制,它们有一定的优先级顺序:Page_Error事件&g ...
- ASP.NET的错误处理机制
通常情况下,我们在写ASP.NET程序的时候,会经常遇到如何处理错误处理机制的问题.可以说一个良好的错误处理机制是衡量Web应用程序好坏的一个重要标准. 下面将介绍四中错误处理机制: 1.使用Web. ...
- QTP3种错误处理机制
QTP 拥有3种不同的错误处理机制: 1.场景恢复机制 2.VBS的Error 对象 3.缺省的错误处理[Settings 里的runonError选项所指定的设置] 它们的优先级分别是: 1.场景恢 ...
- ASP.NET的错误处理机制之一(概念)
对Web应用程序来说,发生不可预知的错误和异常在所难免,我们必须为Web程序提供错误处理机制.当错误发生时,我们必须做好两件事情:一是将错误信息记录日志,发邮件通知网站维护人员,方便技术人员对错误进行 ...
- 标准错误处理机制——error
在 Golang 中,错误处理机制一般是函数返回时使用的,是对外的接口,而异常处理机制 panic-recover 一般用在函数内部. error 类型介绍 error 类型实际上是抽象了 Error ...
- PHP异常与错误处理机制
先区别一下php中错误 与 异常的概念吧 PHP错误:是属于php程序自身的问题,一般是由非法的语法,环境问题导致的,使得编译器无法通过检查,甚至无法运行的情况.平时遇到的warming.notice ...
最新文章
- windows下使用aspell开启emacs的单词拼写检查功能
- Winsock—I/O模型之选择模型(一)
- Android中堆unlink利用学习
- 2016012086+杨岚青+散列函数应用及安全性
- python分布式日志收集系统_Go实现海量日志收集系统(一)
- 学习deercao的正则笔记
- PLSQL developer 连接64位oracle 11.2G
- 前端学习(1395):多人管理项目15建立请求
- C++——拷贝构造函数和赋值函数的注意点
- 2018焦作网络赛 - Poor God Water 一道水题的教训
- git 远程删除分支之后 本地分支更新后还在
- Super Odometry: IMU-centric LiDAR-Visual-Inertial Estimator for Challenging Environments 翻译
- oracle 输出精确到秒,Oracle时间精确到时、分、秒处理方法
- ITK-图像主轴分析
- 什么是前端渲染和后端渲染和SPA页面
- 【论文笔记_知识蒸馏_2022】Knowledge Distillation with the Reused Teacher Classifier
- Servlet的一些操作
- 清爽的空气中流动着一种微熏的温情
- 中国历史可以用几句话总结
- Vue--v-show和v-if