2.4  调试Ajax请求

根据定义，Ajax是从浏览器发送到服务器的异步请求。这意味着一旦Ajax请求被初始化，浏览器就会继续执行初始化Ajax请求的脚本中的后续代码。在继续执行之前，脚本不会阻塞并等待服务器的响应。这么做可以避免浏览器的阻塞，允许它在等待服务器响应的同时继续响应用户的输入。这一切的结果就是，应用会运行得更快，并更好地响应用户的操作。

Ajax的异步性的缺点就是它使得调试变得更加困难。考虑如下场景，你正在创建一个接受用户输入的表单，比如名字和电话号码。用户单击一个按钮通过Ajax把表单元素提交到服务器，然后响应会显示在页面的底部。

你建立好了页面，编写了JavaScript以及处理Ajax请求的servlet，并部署了整个应用准备测试。填写表单，单击按钮，然后……什么也没发生。究竟哪里出错了呢？是servlet没有正确地处理请求吗？是JavaScript在哪个地方出错了吗？还是从一开始请求就没有发送出去呢？

作为Java EE开发人员，我们已经习惯了使用强大的工具和IDE。我们可以使用我们中意的IDE把应用启动为调试模式，然后逐步运行servlet，看看是不是哪里出错了。然而，只有在我们确定请求确实被发送了之后，这种方法才会有效。此外，我们如何知道发送的查询参数是否正确？在发现错误的时候，如果能够重现错误场景以便检查该错误是否被修正，那该有多好啊！

使用某些HTTP嗅探器（sniffer）可能是一种方便的做法。它会监控指定端口接收及发出的所有HTTP通信。嗅探器允许我们查看浏览器和服务器之间的通信，并确定是否有错误存在。

2.4.1  NetBeans HTTP Monitor

调试Ajax请求的一个方便的工具是NetBeans HTTP Monitor（监控器）。NetBeans IDE是一款功能完善的Java IDE，可以从www.netbeans.org下载它。NetBeans的每个标准安装都自带了一个叫做HTTP Monitor的HTTP嗅探器。这个HTTP Monitor被集成在NetBeans中以及NetBeans附带的Apache Tomcat servlet容器中。HTTP Monitor可以安装在任何servlet容器（如JBoss或Jetty）中，可以在NetBeans内置的帮助系统中找到具体的说明。

当HTTP Monitor被激活后，它就会自动记录servlet容器处理的所有请求。它会记录诸如请求参数、cookie、会话属性、HTTP首部之类的信息。这些信息会一直保留到被用户显式删除或IDE关闭为止。其中一个很强大的功能是：保存下来的请求可以被打开、修改，并重新提交到servlet容器。图2-9展示了HTTP Monitor的主面板。

图2-9  HTTP Monitor的主面板

如图2-9所示，HTTP Monitor主窗口的左侧显示了已记录的请求。可以右击一个记录并选择Save以永久保存记录，也可以在窗格右侧的各个选项卡中显示所选记录的信息。这些选项卡是自解释的，例如，Request选项卡显示有关请求和任何查询字符串参数的数据；Cookies选项卡显示有关发送部分请求或返回对应响应的cookie的数据。

如同从选项卡上看到的信息一样，你可以意识到在调试Ajax请求时该工具会是多么有用。Request选项卡上的Parameters部分包含了最重要的信息。在这里，你可以检验浏览器是否向服务器发送了正确的参数，而不用调试servlet。

HTTP Monitor最强大并且独一无二的功能是它可以修改一个存储起来的请求并重新向服务器提交。右击想要操作的记录，然后选择Edit and Replay。这会打开Edit and Replay窗口，如图2-10所示。

图2-10  Edit and Replay窗口

Edit and Replay窗口允许修改构成一个存储起来的HTTP请求的信息，并向Web容器重新提交数据。如图2-10所示，可以添加、修改、删除查询参数。还可以添加或删除与请求一起发送的cookie，以及修改作为请求一部分的HTTP首部。然后单击Send HTTP Request按钮，就可以向服务器提交请求。NetBeans将会打开系统默认的浏览器来显示服务器的响应。

NetBeans HTTP Monitor是一款非常强大的工具，它可以帮助我们调试Ajax请求（抑或任何类型的HTTP请求）。它被集成在NetBeans IDE中，并可以安装在任何servlet容器上。有了它，就可以记录发送到容器的请求，查看请求的属性和数据，甚至编辑请求并把请求重新提交到servlet容器。赶快把它加入到你的开发工具箱中吧！

2.4.2  Firefox的FireBug扩展

FireBug是FireFox的一个扩展，其开发者把它描述为JavaScript控制台（console）、DOM查看器（inspector）和命令行式的JavaScript解释器（interpreter）的组合。此外，FireBug还包含一个叫做XMLHttpRequest Spy的功能，它允许查看使用XMLHttpRequest对象处理的请求和响应。在本节中，我们将简单地介绍FireBug最有用的功能。FireBug的主页是https://addons.mozilla.org/ extensions/moreinfo.php?id=1843&application=firefox。

在安装好FireBug并重新启动Firefox后，首先会注意到FireBug在Firefox窗口的底部打开一个窗格。使用F12键可以切换FireBug窗格的可见性。

FireBug窗口的顶部是一个菜单栏，你可以在那里使用FireBug的功能。菜单栏上的第一个按钮是Inspect Element按钮。和Mouseover DOM Inspector一样，FireBug也会显示选中元素的各种DOM信息。如果想要使用这一功能，只需单击Inspect Element按钮，然后在浏览器窗口中单击想要操作的元素即可。一旦选中，就可以查看定义该元素的XML标记、应用于该元素的CSS规则、该元素的CSS模型属性以及应用于该元素的JavaScript属性和方法。图2-11展示了FireBug提供的页面右上角Firefox图标的CSS模型信息。

图2-11  查看元素功能提供了页面中任何元素的大量信息

标准的Firefox错误控制台是一个非常有用的Web开发工具。错误控制台会显示页面中发生的所有JavaScript和CSS错误，而且对大部分JavaScript错误都有详细的描述信息。错误控制台的缺点是会把所有的JavaScript和CSS错误都记录在同一处，这会使控制台窗口变得混乱、难以阅读。

幸运的是，FireBug解决了这个问题。它扩展了标准错误控制台的功能，加入了按类型和发生地点过滤错误的功能。FireBug菜单栏上的第三个按钮是Errors按钮。单击Errors按钮会显示一个下拉列表，从这里可以操作各种过滤器。图2-12展示了可用的过滤器。

图2-12  FireBug允许按类型和发生地点过滤错误

对Ajax开发人员来说，FireBug最有用的功能当属XMLHttpRequest Spy。此功能会查看所有的Ajax请求以及与其相关的服务器响应。默认情况下，XMLHttpRequest是被禁用的，必须通过单击Options按钮并选择Show XMLHttpRequests来激活它。

一旦激活了XMLHttpRequest Spy功能，FireBug就会记录通过XMLHttpRequest发送的每个Ajax请求。可以单击Post按钮来查看作为Ajax请求的一部分的任何POST参数。当你需要确定Ajax请求是否向服务器发送了正确的信息时，这个功能就非常有用了。

单击Response按钮会显示服务器返回的Ajax响应。FireBug会显示响应的文本，无论它是纯文本、XML，或者甚至是JavaScript Object Notation（JSON）。图2-13展示了FireBug捕获服务器响应的例子。

图2-13  FireBug捕获Ajax请求的服务器响应

XMLHttpRequest Spy功能的最后一个选项是JavaScript选项，单击JS按钮就可以使用它。在这里可以看到发送Ajax请求的XMLHttpRequest对象的JavaScript方法和属性值。

FireBug是Web开发工具箱的一个强大支援，它可以帮助你迅速诊断问题并更好地理解网页结构和CSS规则。FireBug最好的功能是它可以捕捉请求、响应，以及与使用XMLHttpRequest对象发送的Ajax请求相关的JavaScript信息。