Ajax编程技术 第六章 调试与错误处理
6.1 概述 Ajax应用程序不能按照预期方式工作时，一定是发生错误。最有可能发生错误的地方在于： JavaScript代码：建议使用异常处理try、catch语句 Ajax请求所涉及的问题：检查Ajax请求，判断是否正在创建该请求。 6-2
6.2 JavaScript错误处理 JavaScript被公认为是易错难于调式的语言。目前还没有成熟的集成开发环境(IDE)。从第三版开始，ECMAScript采用了Java中的try语句，可以帮助测试代码并找到错误所在之处。 异常处理 try语句和catch或finally子句配合使用： 格式 try { // execute this block of code } catch (err) { //try中代码出错，则执行此部分代码; } 功能：如果在执行rey语句中的程序出错时，便在出错的地方停止执行，然后执行catch语句中的代码 6-3
6.2 JavaScript错误处理 finally子句可以添加到try语句后，其中的代码无论是否发生异常，都会被执行。例如： IE运行截图 try { var x; x[1] = 3; } catch (err) { document.write('发生一个异常; '+err.message); Finally { document.write('<br>try/catch 测试完毕.'); Firefox运行截图 6-4
6.2 JavaScript错误处理 catch子句捕获try代码创建的JavaScript的error对象。Error对象包含的属性有： name：指定错误类型；此例中x不是数组，所以创建了TypeError。TypeError有6中出错信息： EvalError：Eval()函数中的代码出错； RangeError：超过允许的取值范围； ReferenceError：使用了非法引用； SyntaxError：eval()函数中代码发生解析错误； TypeError：变量类型和预期不同； URIError：错误使用了URI函数( encodeURI()或decodeURI() ) 6-5
6.2 JavaScript错误处理 onerror事件处理程序 当脚本产生错误时，浏览器触发error时间，通过创建onerror事件处理程序，就可以找到错误发生在哪里： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Accessing the error event</title> <script type="text/javascript"> function myHandle (msg, url, line) { alert ('An error occurred:\nmessage: ' + msg + '\nurl: ' + url +'\nline: ' + line); return true; } </script> </head> <body> onerror = myHandle; var x; x[3] = 3; // 这是第17行 </body> </html> 6-6
6.3 DOM检查器 我们知道，HTML DOM是HTML页面的编程接口，它规定我们如何存取或改变HTML文档内容。DOM标准有W3C组织开发。 DOM检查器用来检查DOM的动态模型。DOM检查器遍历浏览器当前的DOM模型，并显示该DOM当前的状态。我们主要介绍微软的IE DOM Inspector。 IE DOM Inspector IE DOM Inspector是开发人员常用的一个IE插件，在微软网站上下载安装后，边在IE的查看菜单上增加了此功能选项。 可以勾选“查看”→“浏览器栏”→“IE DOM Inspector”，打开IE DOM 检查器，这样浏览网页时，在浏览器下方边多开了2个窗口。形状如下页所示： 6-7
6.3 DOM检查器 工具栏 DOM树 HTML DOM 元素的HTML页面 6-8
6.3 DOM检查器 检查DOM：开始检查 6-9
6.3 DOM检查器 6-10
6.3 DOM检查器 6-11
6.3 DOM检查器 6-12
6.3 DOM检查器 现场编辑DOM：修改DOM的属性值 6-13
6.3 DOM检查器 动态修改DOM返回的信息： 6-14
6.3 DOM检查器 修改HTML元素：可在浏览器窗口直接查看并编辑HTML代码： 6-15
6.3 DOM检查器 查看修改效果： 6-16
6.3 DOM检查器 寻找DOM节点：另一种检查DOM的方法是根据id或name查找所需的特殊元素。 6-17
6.3 DOM检查器 6-18
6.3 DOM检查器 通过点击选择元素： 6-19
6.3 DOM检查器 6-20
6.3 DOM检查器 为JavaScript申请DOM全名： 6-21
6.3 DOM检查器 6-22
6.3 DOM检查器 6-23
6.3 DOM检查器 6-24
6.4 Ajax故障诊断 由于浏览器请求和响应都发生在后台，并且有些问题的出现也不会产生错误，所以要诊断一个Ajax应用程序的故障很难。 我们简要介绍一种在IE上的免费软件：ieHTTPHeaders Explore Bar，下载安装后，在IE中可以通过单击“查看”→“浏览器栏”→“ieHTTPHeaders”来打开它。 打开后，在浏览器窗口的底部另开一个窗口，显示当前会话的HTTP头日志，如下页图示： 6-25
6.4 Ajax故障诊断 使用HTTP1.1的GET请求 发送该请求的用户代理字符串 请求的目的服务器 6-26
6.4 Ajax故障诊断 我们可以通过该软件查看HTTP的请求、响应的详细情况，从而判断它们的正确性，帮助我们查找问题所在。 6-27