错误和AJAX

2016-02-19 15:34 11 1 收藏

下面请跟着图老师小编一起来了解下错误和AJAX,精心挑选的内容希望大家喜欢,不要忘记点个赞哦!

【 tulaoshi.com - Web开发 】

  即使你现在还没有听说,AJAX已经成为web技术领域最热门的词。AJAX框架的关键是名为 XMLHttpRequest 的 JavaScript 对象,通过它客户端开发人员可以在不打断用户操作或者在充分使用隐藏表单的情况下通过 HTTP 直接发送和接收XML文档。现在,有些人可能会有这种忧虑,让那些以前只做表单(form)校验和增加图片动画效果的客户端开发人员突然间负责分析 XML 文档结构,以及与 HTTP 协议的 header 部分打交道,这能行吗?但是,没有风险就没有回报。为了减轻这种疑惑,我将展示如何使用 XMLHttpRequest 实现以前无法实现功能,同时如何减少程序错误和如何提高程序质量。

  XMLHttpRequest 和 XML DOM 的 JavaScript 基础

  首先,我们需要声明一些规则。现在常用的浏览器(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 sword
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 {
// fall on our sword
}
}

  这个强大的工具应用前景非常广泛,而且对其潜在应用方面的探索才刚刚开始。但是在任何准备在网上建立XML园地的人失控前,我建议我们先架起一个安全网以防止任何抱负极高的人摔断他们的脖子。

  JavaScript错误处理基础

  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。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

// 将一个错误映射到XML文档
function errorToXML(err) {
var xml = '?xml version="1.0"?n' +
'errorn' +
'name' + err.name + '/namen' +
'message'  + err.message + '/messagen';
if (err.location) xml += 'location' + err.location + '/locatio

_progname);
use XML::Simple;
my $request = CGI-new();

my $method = $request-request_method();
# method must be POST
if ($method eq 'POST') {
   eval {
      my $content_type = $request-content_type();
      if ($content_type eq 'text/xml') {
         print $request-header(-status =
             '415 Unsupported Media Type', -type = 'text/xml');
         croak "Invalid content type: $content_typen";
      }
      # when method is POST and the content type is neither
      # URI encoded nor multipart form, the entire post
      # is stuffed into one param: POSTDATA
      my $error_xml = $request-param('POSTDATA');
      my $ref = XML::Simple::XMLin($error_xml);
      my ($name, $msg, $location) =
         ($ref-{'name'}, $ref-{'message'}, '');
      $location = $ref-{'location'} if (defined($ref-{'location'}));
      # this will change the name of the carper in the log
      set_progname('Client-side error');
      my $remote_host = $request-remote_host();
      carp "name: [$name], msg: [$msg], location: [$location]";
   };
   if ($@) {
      print $request-header(-status = '500 Internal server error',
         -type = 'text/xml');
      croak "Error while logging: $@";
   } else {
      # this response code indicates that the operation was a
      # success, but the client should not expect any content
      print $request-header(-status = '204 No content',
         -type = 'text/xml');
   }
} else {
   print $request-header(-status = '405 Method not supported',
      -type = 'text/xml');
   croak "Unsupported method: $method";
}

  以上就是全部的代码了。现在,当下次有一些有问题的JavaScript代码溜进系统时,你可以想象你的日志监控人员开始闪动红色的灯,而你的客户端开发人员在半夜接到电话的情景。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1609911.html

延伸阅读
  看了Dflying Chen 介绍的一篇Ajax的文章就像练练英语自己翻译一下,由于自己的水平有限,请大家批评指正 本文的作者是知名.NET Ajax框架Ajax.NET Professional(AjaxPro)的作者Michael Schwarz 上个月我发现许多Web2.0网站大量运用了ajax,但是其中有些很奇怪,因为他们的速度比起前慢了,并且有时候不起作...
标签: Web开发
观点一:Ajax和服务器端技术毫不相关 严格的说,与传统web开发相比,Ajax是完完全全的客户端技术。由于很多控件封装了客户端和服务器端的通信过程,因此很多问题也因通信而起。事实上,不论何种Ajax技术,服务器端都是返回的一个纯文本流,再由客户端来处理这个文本。这段文本可以是xml格式,也可以是一个Html片段,也可以是一段Java...
标签: Web开发
被AJAX中DOM的操作郁闷了好几天,今天总算搞明白了,自学就是苦啊,苦的一把鼻涕一把泪的,  把教训些出来,给后来者提个醒,老鸟就不要看了。 1.DOM中的对XML的操作不要和浏览器中的弄混掉了,比如getElementByName是浏览器中内置document对象的DOM操作,你用来操作   responseXML就是错误的.在浏览器中,你可以使用documen...
标签: Web开发
多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML 页面。常常是点击一个按钮,等待服务器响应,再点击另一个按钮,然后再等待,这样一个反复的过程。有了 Ajax 和 XMLHttpRequest 对象,就可以使用不必让用户等待服务器响应的请求/响应模型了。本文中,Brett McLaughlin 介绍了如何创建能够适应不同浏览器的 XMLHttpRequest 实...
  一、 引言 在XMLHttpRequest对象和AJAX给用户和开发者带给巨大好处的同时,也许还有一些问题你没有考虑到-但是的确到了值得引起每个人注意的时候了。 甚至非常讨厌的人也都喜欢XMLHttpRequest,因为它提供给程序员真正梦想的功能。也正是因为有了这样的新技术,Web应用软件开始变得具有象桌面应用软件相似的行为。如...

经验教程

877

收藏

87
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部