在本章中，我们将介绍以下主题：
- 使用 Firebug 和 FireHP 进行调试
- 使用 IE 开发者工具栏进行调试
- 避免框架冲突
- 使用 JavaScript 的匿名函数
- 修复 JavaScript 中的内存泄漏
- 修复内存泄漏
- 对 Ajax 请求排序
如果您在使用 Ajax 时不知道如何有效地进行调试和故障排除，那么调试和故障排除对您来说可能是一个大麻烦。在本章中，我们将学习一些调试和排除 Ajax 应用程序故障的工具和技术。
首先，我们将看到为 Mozilla Firefox 浏览器 Firebug 和 FireHP 构建的强大工具。这两个工具可能是调试 Ajax 请求和响应最常用的工具。在下一节中，我们将研究另一个重要但不太复杂的 Internet Explorer 工具 IE 开发者工具栏。
之后，我们将研究一种技术，以避免 jQuery 和 Mootools 等框架在单个网页中同时使用时出现共同的美元（$冲突。
我们还将研究如何为需要定期更新数据的 Ajax 应用程序排序 Ajax 请求。然后，稍后，我们将研究美化 JavaScript 的工具，这些 JavaScript 是使用 Douglas Crockford 的 JSMin 或 Dean Edward 的打包工具等工具压缩的。最后，在本章中，我们将介绍 Ajax 跨浏览器实现的技巧。
安装 Firebug 和 FireHP 后，Mozilla Firefox 占用的内存比正常情况多一点；因此，如果您的计算机内存不足，可能会导致系统不稳定。在这种情况下，建议在不同的 Firefox 配置文件中安装 Firebug 和 FireHP，您可以在 web 开发期间专门使用这些配置文件。
当 Ajax 技术广泛应用于复杂的 web 应用程序时，如果开发人员没有合适的工具，那么调试此类应用程序将成为他们的一大难题。这是 Firebug 和 FireHP 变得方便的地方。Firebug是一款优雅、简单、功能强大的 Mozilla Firefox 插件，用于调试基于 Ajax 的应用程序。它允许您清楚地了解通过 POST 或 get 方法发送到服务器的 Ajax 请求、响应和数据。此外，您甚至可以在浏览器中编辑 HTML 和 CSS 代码并实时预览更改。除此之外，Firebug 还显示了网页发出的整个 HTTP 请求。它还允许您分析 JavaScript 代码。FireHP是 Firebug 的扩展，通过在 Firebug 控制台上登录信息或消息来扩展 Firebug 的功能。
请注意，在 Firebug 中编辑的 CSS 或 HTML 代码是临时的，不会影响实际代码。当 Mozilla Firefox 刷新时，这些更改就会消失。
Firebug可能是 Mozilla Firefox 浏览器在 web 开发人员中最受欢迎的附加组件之一。它允许调试、监视和编辑 CSS、HTML 和 JavaScript 以及 DOM。它有很多特性，但其中我们将更多地讨论如何使用 JavaScript 控制台记录值或错误。
因此，让我们首先安装 Firebug，开始用 Firebug 调试 Ajax/PHP 应用程序。
Firebug 可从下载 http://getfirebug.com/ 。单击安装 Firebug按钮并按照网站上的步骤操作后，您将看到以下弹出窗口以开始安装。单击立即安装按钮后，Firebug 将安装到 Firefox 中。安装后，您可能需要重新启动 Mozilla Firefox 浏览器以完成 Firebug 的安装。
安装 Firebug 后，您可以通过点击F12或点击 Firefox 窗口右下角的 Firebug 图标来启用它。以下屏幕截图显示 Firebug 启用时的外观：
正如您在前面的屏幕截图中所看到的，Firebug 中有六个不同的面板。让我们简要地讨论每个面板：
- 控制台：这是 Firebug 最有用的面板，用于调试 Ajax 丰富的应用程序。您可以在此选项卡中记录来自 JavaScript 和 PHP（使用 FireHP）的不同消息、信息或警告。在这里，您有一个名为Profile的选项，允许用户在指定的时间段内记录 JavaScript 活动。此外，您还可以在此面板上执行自己的代码。
- HTML:正常情况下，网页浏览器的查看源选项无法查看添加或附加到网页中的任何 HTML 元素。但是，HTML窗格显示了可能由执行的 JavaScript 代码添加的网页的实时 HTML 元素。此面板还可用于在浏览器中动态编辑 HTML/CSS 代码并实时查看输出。
- CSS:在此面板中，您可以看到用于网页的CSS脚本列表。此外，您可以从该面板虚拟编辑 CSS 脚本，并直接在浏览器中查看更改属性的输出。
- **脚本：使用此面板，您可以找到当前网页正在使用的脚本。此面板还允许您在调试时设置断点并查看表达式或变量，从而调试 JavaScript 代码。断点后始终可以使用F8继续执行脚本，也可以使用F10键逐步执行脚本。这是 Firebug 中的一个重要特性，它通常出现在许多编程语言IDE（集成开发环境）**中。
- DOM:使用此面板，您可以浏览网页的文档对象模型（DOM）。DOM 是可以由 JavaScript 调用或处理的对象和函数的层次结构。此面板允许您轻松地浏览和修改 DOM 对象。
- 网络：此面板称为网页的网络活动监控面板。启用后，此面板将显示页面发出的每个 HTTP 请求以及加载对象（如 CSS 文件、图像或 JavaScript 文件）所需的时间。除此之外，还可以检查每个 HTTP 请求和响应的 HTTP 头。除此之外，
XMLHttpRequest的详细信息也可以在此面板和控制台面板中找到，以及其他信息，如 Ajax 请求、响应、HTTP 方法以及通过 GET 或 POST 方法提供的数据。
Firebug API 提供了一个非常强大的对象，名为控制台，直接将数据记录到控制台面板。它可以将任何类型的 JavaScript 数据和对象记录到控制台。您可以使用流行的 console.log()函数轻松地将数据写入控制台，这些函数类似于 console.log('testing')；。您可以向该函数传递任意数量的参数，如下所示：
console.log(2,5,10,'testing');当您使用 console.log(document.location)在 Firebug 控制台中记录对象时；，您可以在控制台面板中看到对象列表，其中包含指向其属性和方法的链接。您可以单击对象以查看属性和方法的详细信息。除了 console.log()之外，Firebug 控制台中还有其他显示消息的功能，具有不同的视觉效果。其中一些是 console.debug(), console.info(), console.warn()和 console.error()。
让我们通过一个简单的示例来了解此信息记录的工作原理：
$(document).ready(function()
{
console.log('log message');
console.debug('debug message');
console.info('info message');
console.warn('warning message');
console.error('Error message');
console.log(document.location);
});前面的代码片段是一个使用 JavaScript 的 jQuery 框架的简单示例。
您可以在本书的第 2 章、基本工具中找到关于 jQuery 的更多信息。有关 jQuery 的更多信息，请访问http://www.jquery.com 。
控制台的所有不同功能都被执行，并显示在Firebug的控制台面板中，如以下截图所示：
您可以看到，执行前面的代码会在控制台中生成具有不同颜色的不同类型的消息。您也可能会注意到 console.log(document.location)；生成了此对象不同属性的超链接。
如果您在 JavaScript 代码的开发环境中使用 console.log()或任何其他控制台函数，那么请确保 Firebug 已激活；否则，JavaScript 代码的执行可能会暂停，导致在代码中遇到这些函数时出现意外结果。同样的事情也可能发生在 InternetExplorer7 或更早的版本中。请确保在将网站移动到生产环境时删除了所有控制台功能。
现在，让我们看看 Firebug 如何帮助您调试 XMLHttpRequest，使用另一个 PHP 脚本的 Ajax 响应不可预测的示例。
以下 JavaScript 代码发出 Ajax 请求：
$(document).ready(function()
{
$.ajax({
type: "POST",
url: "test.php",
data: "start=1&end=200",
success: function(msg) {
console.log('number is '+msg); msg = parseInt(msg);
if(msg%2==0)
console.info('This is even number');
else
console.info('This is odd number');
}
});
});前面的代码是 jQuery JavaScript 代码。我们正在使用 POST 数据 start和 end向 test.php发出 Ajax 请求（POST 方法），其值分别为 1和 200。现在，让我们看看 PHP 中的服务器端脚本：
<?php
echo rand($_POST['start'],$_POST['end']);
?>服务器端代码只是在 start和 end参数之间选择一个随机数，这些参数在 PHP 中可用作 POST 数据。
现在，让我们回头看看前面 JavaScript 代码中 Ajax 的 success函数。它首先将服务器端脚本返回的数字记录到 Firebug 控制台。然后，使用 parseInt()函数将该数字严格转换为整数类型。Ajax 返回的数字基本上是 String数据类型，不能进行数学运算；所以，它首先被转换成一个整数。
之后，使用模运算符检查该数字，查看它是奇数还是偶数，并在Firebug控制台中相应显示信息。让我们看看 Firebug 控制台中的结果：
日志和消息将相应显示，如屏幕截图所示。这些都很简单，但是您可以在控制台的第一行中看到一些新的内容，您可以很容易地猜到这是 Ajax 请求，它在左侧有一个**+**符号。
让我们通过点击**+**符号来探索 Ajax 请求和响应的细节。结果如下：
正如您在前面的屏幕截图中所看到的，第一个选项卡是标题；它还显示了请求和响应的 HTTP 头。
Post部分显示通过 Post 方法向服务器发布的数据。
响应选项卡显示 Ajax 请求的响应。
此外，如果响应为 HTML 格式，则最后一个选项卡以 HTML 格式显示数据。最后一个选项卡可以是 XML、JSON 或 HTML，具体取决于来自服务器端脚本的数据响应。
Firebug 允许您将调试消息从 JavaScript 记录到控制台。但是，在 Ajax 应用程序上的非常复杂的服务器端脚本中，如果我们使用 console.log()函数将所有消息记录为单个字符串，那么调试应用程序可能会非常困难。当我们需要调试包含非常复杂 PHP 脚本的 Ajax 丰富应用程序时，FireHP 非常方便。FireHP 是 Firebug 的扩展，Firebug 本身就是 Mozilla Firefox 浏览器的一个流行插件。FireHP 允许您在 FireHP 库的帮助下将调试消息和信息记录到 Firebug 控制台。
您可能想知道，如果您将一些消息记录到控制台中，是否会将 PHP 代码中的 JSON 或 XML 数据作为 Ajax 响应传递，并使用 JavaScript 对其进行解析，然后 FireHP 可能会破坏您的应用程序。不会的；FireHP 通过特殊的 HTTP 响应头向浏览器发送调试消息，以便记录到 FireHP 的消息不会破坏应用程序。
要安装 FireHP，您需要在 Mozilla Firefox 浏览器中安装 FireBug。您可以从 FireHP 的官方网站安装 FireHPhttp://www.firephp.org/ 。您需要点击获取 FireHP按钮并按照步骤安装 FireHP。安装 FireHP 后，需要下载 PHP 库以与 FireHP 一起使用。您可以从下载 PHP 库 http://www.firephp.org/HQ/Install.htm 。
现在，FireHP 已经安装并启用，您还下载了 FireHP 的 PHP 库。让我们看看如何使用它：
要开始使用 FireHP，首先需要在 PHP 代码中包含核心 FireHP 类，如下所示：
require_once('FirePHPCore/FirePHP.class.php');包含库后，需要启动输出缓冲，因为登录的消息将作为 HTTP 响应头发送：
ob_start();如果在php.ini指令中打开了输出缓冲，则不需要显式调用 ob_start()函数。有关输出缓冲配置的更多信息，请参见http://us.php.net/manual/en/outcontrol.configuration.php#ini.output-缓冲。
接下来，让我们创建 FireHP 对象的实例：
$fp = FirePHP::getInstance(true);之后，让我们使用 FireHP 将一些消息记录到 FireBug 控制台：
$var = array('id'=>10, 'name'=>'Megan Fox','country'=>'US');
$fp->log($var, 'customer');
正如您在前面的屏幕截图中所看到的，阵列在 Firebug 控制台中以详细的格式显示。现在，让我们以一种奇特的方式记录更多的变量。
当鼠标光标移动到控制台中已登录的变量上时，将显示 FireHP 的变量查看器（请参阅前面的屏幕截图）。
此外，让我们尝试使用不同的函数将不同类型的调试消息记录到 FireBug 控制台，如下所示：
$fp->info($var,'Info Message');
$fp->warn($var,'Warn Message');
$fp->error($var,'Error Message');前面的函数与 Firebug 的控制台函数非常相似。在 Firebug 控制台中，这些函数的输出如下所示：
正如您在前面的屏幕截图中所看到的，FireHP 库的 info(), warn()或 error()函数有助于以不同的样式记录消息，以调试 PHP 代码。
请确保在生产模式下使用网站时禁用 FireHP 日志记录，否则任何拥有 FireHP 和 Firebug 的人都可以轻松查看网站中的敏感信息。您可以通过调用函数 $fp->setEnabled(false)来禁用 FireHP 日志记录；在创建 FireHP 对象的实例后立即。
FireHP 还有程序 API。要使用 FireHP 的过程 API，您需要在代码中包含 fb.php（随 FireHP PHP 库提供），如下所示：
require_once('FirePHPCore/fb.php');然后，您可以使用 fb()函数简单地将消息调用到 Firebug 控制台。例如，您可以使用以下代码将消息记录到控制台：
fb('logged message');
fb($var, 'customer');当您将 fb.php包含在代码中时，您可以直接使用 fb类调用 info(), warn(), error()或 log()函数。例如，您可以使用 FB::info($var,'Info Message')；向控制台显示 info信息。
和 Firebug 一样，InternetExplorer 也包含一个开发者工具栏，用于调试和编辑网页的 HTML、CSS 和 JavaScript 代码。IE 开发者工具栏内置 Internet Explorer 8。在以前的版本中，它可以用作 Internet Explorer 的附加组件。如果您使用的是 Internet Explorer 7 或更低版本，可以使用 URL从 Microsoft 网站下载 IE 开发者工具栏 http://www.microsoft.com/downloads/en/details.aspx?familyid=95E06CBE-4940-4218-B75D-B8856FCED535&显示 lang=en。但是，在本主题中，我们将讨论 Internet Explorer 8 中提供的 IE 开发者工具栏。
除 Firefox 外，您始终可以在任何浏览器中使用 Firebug Lite。以下是有关如何在任何浏览器中使用 Firebug Lite 的说明：http://getfirebug.com/firebuglite 。
Internet Explorer开发工具主要由四个不同的面板组成，用于调试和编辑 HTML、CSS 和 JavaScript。
详情如下:
- HTML面板：此面板用于查看网站的 HTML 代码。使用此面板，您可以在浏览器中查看单个 HTML 元素的大纲，更改其属性和 CSS 属性，并实时预览输出。
- CSS面板：与 Firebug 的 CSS 面板非常相似。在这里，您可以查看和编辑与网页关联的不同样式表下的 CSS 属性。您还可以实时预览 CSS 属性中的更改。
- 脚本面板：该面板允许您调试网页的 JavaScript 代码。此外，您还可以在 JavaScript 代码上设置断点，单步执行代码并查看变量。
- 探查器面板：IE 开发者工具栏的探查器面板允许您分析网页中使用的 JavaScript 函数的性能。它记录执行这些函数所花费的时间以及调用它们的次数；因此，如果其中一些函数的编码很差，那么调试这些函数就变得很容易了。
开发者工具栏的脚本面板允许通过放置断点、单步执行代码以及观察变量来调试脚本。此外，与 Firebug 一样，您还可以使用控制台功能将消息记录到控制台。
例如，以下 JavaScript 控制台函数将分别向 IE developer 工具的控制台发送日志、信息、警告和错误消息：
console.log('log message');
console.info('info message');
console.warn('warning message');
console.error('Error message');在 IE Developer 工具的控制台中，代码的输出类似于以下屏幕截图：
您可以在控制台中看到消息的显示方式与 Firebug 中的显示方式非常相似。但不幸的是，到目前为止，还没有像 FireHP 这样的 Internet Explorer 附加组件。
$在许多 JavaScript 框架中作为函数名或变量名非常常用。当两个不同的 JavaScript 库一起使用时，$symbol 的使用很可能会发生冲突，因为它们可能会出于不同的目的使用它。假设一个页面中使用了两个框架，它们是 jQuery 和 prototype.js:
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>当两个框架一起使用并且两个框架都使用了 $符号时，结果可能是不可预测的，并且可能会中断，因为 jQuery 将 $视为 jQuery 对象，而在 prototype.js中，它是一个 DOM 访问函数。代码 $('mydiv').hide()；可能无法在包含前面 JavaScript 框架用法的网页中正常工作。这是因为，jQuery 包含在最后一行，但代码为 $('mydiv').hide()；是来自 prototype.js框架的代码，导致意外结果。
如果您将 jQuery 与其他框架一起使用，则没有问题。JQuery 有一个神奇的 noConflict()函数，允许您将 JQuery 与其他框架一起使用。
现在，让我们使用 jQuery 的 noConflict()函数尝试使用前面的代码：
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" ></script
var $jq = jQuery.noConflict();
$jq(document).ready(function(){
$jq("p.red").hide();
});
$('mydiv').hide();
</script>正如您在前面的代码中所看到的，我们创建了另一个别名 $jq而不是 $，以引用 jQuery 对象。现在在剩下的代码中， $jq可以用来引用 jQuery 对象。 $可以由 prototype.js库使用，为此，在代码的其余部分中使用。
JavaScript 的匿名函数对于避免 JavaScript 库中的冲突非常有用。
让我们首先通过一个示例来了解匿名函数：
(function(msg)
{ alert(msg); })
('Hello world');当我们在浏览器中执行上述代码时，它将显示警报 Hello world。现在，这很有趣！定义并执行一个函数！让我们简化相同的代码片段，看看它是如何工作的：
Var t = function(msg){
alert(msg);
};
t('Hello world');如果您看到了等效的代码，那么就很简单了。唯一的区别是，此简化代码具有与函数关联的变量名 t，而在其他代码中，函数名是匿名的。匿名函数在声明后立即执行。
匿名函数在创建 JavaScript 框架插件时非常有用，因为您不必担心与其他与其函数同名的插件发生冲突。请记住，对两个函数使用类似的名称总是会导致 JavaScript 错误，并可能导致应用程序崩溃。
现在，让我们看看如何在 jQuery 中使用匿名函数来避免 $冲突：
(function($) {
$(function() {
$('#mydiv').hide();
});
})(jQuery);在前面的函数中，jQuery 对象作为 $参数传递给函数。现在， $在匿名函数中有一个局部作用域，因此， $可以在匿名函数中自由使用，以避免冲突。这种技术通常用于创建 jQuery 插件和在插件代码中使用 $符号。
现在，让我们在 Mootools 框架中使用类似的匿名函数来避免 $冲突。Mootools 框架中的 $符号指的是 document.id对象。
(function($){
$('mydiv').setStyle('width', '300px');
})(document.id);现在，在前面的函数中， $可以在引用 Mootools 框架的 document.id对象的地方本地使用。
考虑到内存使用情况，如果 JavaScript 代码编写不正确，内存泄漏可能是 JavaScript 中令人厌烦的问题之一。这样的代码可能会使浏览器因内存过载而不稳定。
当 JavaScript 分配的内存消耗物理内存但无法释放内存时，会发生内存泄漏。JavaScript 是一种进行垃圾收集的语言。创建对象时会将内存分配给该对象，之后，一旦该对象不再具有引用，就会返回内存。
内存泄漏背后可能有很多原因，但让我们探讨两种主要的可能性：
- 您正在创建大量元素或 JavaScript 对象，而没有清理未使用的元素或 JavaScript 对象。
- 您正在 JavaScript 代码中使用循环引用。当 DOM 对象和 JavaScript 对象循环引用对方时，就会发生循环引用。
首先，让我们了解如何确定脚本是否生成了不需要的元素；我们可以使用 Firebug 控制台来完成。您可以将以下代码放入 Firebug 的控制台，如下面的截图所示：
console.log( document.getElementsByTagName('*').length )
前面的代码将记录 DOM 中元素的所有计数。因此，如果您在页面的后续使用中看到计数呈指数级增长，那么代码就有问题，您应该始终尝试删除或删除不再使用的元素。
找到答案后，我们如何调试脚本创建的不需要的元素？
让我们假设有一个 JavaScript 函数被反复调用，创建了一个巨大的堆栈。让我们尝试使用 console.trace()函数调试此类代码
<html >
<head>
<script type="text/javascript">
var i=0
function LeakMemory(){
i++;
console.trace();
if(i==50)
return;
LeakMemory();
}
</script>
</head>
<body>
<input type="button"
value="Memory Leaking Test" onclick="LeakMemory()" />
</body>
</html>当您点击该按钮时，它将调用函数 LeakMemory()。该函数调用自身 50 次。我们还使用 console.trace()函数来跟踪函数调用。您可以在 Firebug 控制台中看到以下输出：
您可以清楚地看到， console.trace()函数跟踪每个函数调用。它允许您调试和跟踪正在创建不需要的函数调用堆栈的 JavaScript 应用程序。
接下来，让我们以一个例子来讨论 JavaScript 中的循环引用内存泄漏模式：
<html>
<body>
<script type="text/javascript">
document. Write("Circular references between JavaScript and DOM!");
var obj;
window.onload = function(){
obj=document.getElementById("DivElement");
document.getElementById("DivElement").expandoProperty=obj;
obj.bigString=new Array(1000).join(new Array(2000).join("XXXXX"));
};
</script>
<div id="DivElement">Div Element</div>
</body>
</html>前面的例子取自 IBM 网站上关于内存泄漏的一篇文章：http://www.ibm.com/developerworks/web/library/wa-memleak/ 。
正如您在前面的示例中所看到的，JavaScript 对象 obj引用的是 ID 为 DivElement. DivElement的 DOM 对象，它引用的是 JavaScript 对象 obj，它在两个元素之间创建了一个循环引用，并且由于这个循环引用，两个元素都没有被销毁。
当您运行前面的代码时，让我们看看 Windows 任务管理器中的内存消耗是如何增加的：
正如您所看到的，当我同时运行包含前面代码 4-5 次的网页时，内存使用曲线在中间。
修复循环引用的内存泄漏非常容易。在执行代码之后，只需将对象分配给 null元素。让我们看看如何在前面的示例中修复它：
var obj;
window.onload = function(){
obj=document.getElementById("DivElement");
document.getElementById("DivElement").expandoProperty=obj;
obj.bigString=new Array(1000).join(new Array(2000).join("XXXXX"));
};
obj = null.现在，在查看任务管理器的同时，在网页中执行前面的代码。您不会看到内存使用的任何显著波动。
顾名思义，Ajax 是异步的，因此可能不会遵循代码序列，因为大多数逻辑活动都是在 HTTP 请求完成时完成的。
让我们用一个例子来理解 Ajax 请求：
$(document).ready(function()
{
$.ajax({
type: "POST",
url: "test.php",
data:'json',
data: "bar=foo",
success: function(msg){
console.log('first log');
}
});
console.log('second log')
});一旦执行，前面的代码在 Firebug 控制台中显示如下：
虽然先调用了 $.ajax函数，但由于代码的异步性，所以先打印第二个日志（因为这行代码紧跟在 $.ajax函数之后）。然后在 HTTP 请求完成时执行 success: function，然后将第一个日志打印到控制台。
对 Ajax 请求排序是一种广泛应用于实时应用程序的技术。在下面的示例中，让我们使用一个简单的函数，使用 jQuery 对 Ajax 请求进行排序，以在浏览器中显示服务器时间。首先，让我们看看将发送 Ajax 请求序列的 JavaScript 函数：
function get_time()
{
//make another request
$.ajax({
cache: false,
type: "GET",
url: "ajax.php",
error: function () {
setTimeout(get_time, 5000);
},
success: function (response)
{
$('#timer_div').html(response);
//make another request instantly
get_time();
}
});
}函数很简单。在每次成功的 Ajax 请求中，它都会再次调用相同的函数。请注意，我们一次只向服务器发送一个请求。完成后，将发送另一个请求。
如果出现错误，或者说 Ajax 请求未完成，我们将在发送另一个 Ajax 请求之前等待 5 秒后重试。通过这种方式，如果服务器在完成请求时遇到问题，我们将最小化对服务器的请求数量。
现在，让我们看看 ajax.php:中的 PHP 代码
<?php
sleep(1);
echo date('Y-m-d H:i:s');
?>正如您在前面的 PHP 代码中所看到的，服务器在打印服务器上的当前时间之前会等待一秒钟。这通常是服务器端脚本在实时 web 应用程序中的工作方式。例如，实时聊天应用程序等待新的聊天信息进入数据库。新消息进入数据库后，应用程序将向浏览器发送最新的聊天消息以显示它。
-
我们都知道 Ajax 技术的核心是 JavaScript 中可用的
XMLHttpRequest对象。但此对象不一定在浏览器中可用，特别是在 Internet Explorer 中，具体取决于浏览器和平台。 -
它可以在浏览器（如 Mozilla Firefox、Google Chrome、Safari，甚至 IE7 或更高版本）中本机实例化，这些浏览器支持本机
XMLHttpRequest对象，如下所示：var xmlHttpObj = new XMLHttpRequest();
-
现在，在 InternetExplorer6 或 5 中，要使用
XMLHttpRequest对象，它已被创建为 JavaScript 中的 ActiveX 对象：var xmlHttpObj = new ActiveXObject("MSXML2.XMLHTTP.3.0");
-
但是，即使 ActiveX 对象类在不同的 Windows 平台之间也可能不同，因此我们可能还必须使用以下代码：
var xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP");
-
现在，让我们创建一个 Ajax 函数，该函数将在跨浏览器平台中返回
XMLHttpRequest对象：function getAjaxObj() { var xmlHttpObj = null; // use the ActiveX control for IE5 and IE6 try { xmlHttpObj = new ActiveXObject("MSXML2.XMLHTTP.3.0"); } catch (e) { try { xmlHttpObj = new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { // for IE7, Mozilla, Safari xmlHttpObj = new XMLHttpRequest(); } } return xmlHttpObj; }
-
由于除 Internet Explorer 外，没有浏览器支持 ActiveX 对象，
XMLHTTPRequest对象的实例是使用try和catch块语句创建的，因此没有 JavaScript 错误，因此代码可以跨浏览器使用。
如果您的网页已经使用了 jQuery 或 Mootools 等 JavaScript 框架，那么您可以使用它们的核心 Ajax 功能。这些库大部分都发布了支持多种浏览器和平台的函数，并且随着时间的推移而更新，因此强烈建议使用这样的 JavaScript 库。
在上一章中，我们已经看到了如何使用 JSMin 缩小 JavaScript 代码。现在，让我们尝试对缩小的 JavaScript 代码进行反向工程，并对其进行美化。我们可以使用工具JsBeautifier来解压缩和美化 JavaScript 代码。可直接从 URL使用 http://jsbeautifier.org/ ，或者您可以使用 URL从 Github 下载代码 http://github.com/einars/js-beautify/zipball/master 。首先让我们看一下使用 JSMin:压缩时， get_time()函数中的代码的外观
function get_time(){$.ajax({cache:false,type:"GET",url:"ajax.php",error:function(){setTimeout(get_time,5000);},success:function(response){$('#timer_div').html(response);get_time();}});}当 JavaScript 代码被压缩时，文件占用更少的空间并且在网页中加载更快，但是当我们需要向该文件添加新功能时，编辑代码变得非常困难。在这种情况下，我们需要美化 JavaScript 代码并对其进行编辑。现在，让我们使用返回美化的 JavaScript 代码 http://jsbeautifier.org/:
function get_time() {
$.ajax({
cache: false,
type: "GET",
url: "ajax.php",
error: function () {
setTimeout(get_time, 5000);
},
success: function (response) {
$('#timer_div').html(response);
get_time();
}
});
}始终建议我们在生产服务器中使用压缩的 JavaScript 代码，因为它比美化的代码格式占用更少的空间，加载速度更快。但是，在开发服务器中，总是建议对代码进行美化，以便以后可以对其进行更改或编辑。