ASP.NET jQuery 食谱22 (jQuery AJAX 基本方法使用和调试技巧)

从这章开始，我们将开始讲解jQuery的AJAX相关的内容，首先需要大家自己先百度google了解下AJAX的原理，然后再来看这里的内容，就轻松很多了。

基本方法使用

jQuery 提供了很多AJAX方法，这里主要用到以下两个方法：
1.$.ajax(settings)：它是一个底层方法，可以帮助我们创建各种类型的AJAX请求。该方法可以自定义设置多种参数类型以供AJAX调用，如可以设置HTTP请求(GET/POST)，访问的URL，请求类型(html,json等)，成功或失败的回调函数等。
2.$.ajaxSetup(options)：该方法帮助我们设置页面请求AJAX的默认参数值，只要设置一次，其他请求AJAX都可以使用这个默认参数值,相当于设置全局变量。

通过下面的例子可以基本掌握以上两个方法的使用，该例子通过jQuery AJAX方法请求Content.hml页面，返回该页面的内容，并显示在当前请求页面上，具体实现细节如下：

首先创建一个Content.htm页面文件，代码如下：

<!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>
    <title>软件书籍目录清单</title>
    <style type="text/css">
        #tbooks
        {
            color: White;
            font-weight: bold;
            font-size: 12pt;
            font-family: Arial, Sans-Serif;
        }
        
        #tbooks tr
        {
            background-color: Gray;
        }
    </style>
</head>
<body>
    <table border="0" cellpadding="3" cellspacing="3" id="tbooks">
        <tr>
            <td>
                你就是极客！
            </td>
            <td>
                软件开发人员生存指南
            </td>
        </tr>
        <tr>
            <td>
                人件集
            </td>
            <td>
                人性化的软件开发
            </td>
        </tr>
    </table>
</body>
</html>

再创建请求页面Recipe22.aspx，页面结构代码如下：

<body>
    <form id="form1" runat="server">
    <div align="center">
        <fieldset style="width: 400px; height: 100px;">
            <div id="contentArea">
                <asp:Button ID="btnLoadContent" runat="server" Text="加载软件书籍目录" />
            </div>
        </fieldset>
    </div>
    </form>
</body>

请求AJAX之前页面显示效果：

实现AJAX请求的脚本代码如下：

 <script type="text/javascript">
        $(function () {
            // 通过ajaxSetup设置默认值
            $.ajaxSetup({
                cache: false, // 关闭缓存确保浏览器不会缓存当前页面内容
                dataType: "html", // 设置请求服务的返回数据类型，这里我们加载一个html文件
// 请求失败时调用此函数,该函数自带三个参数，XMLHttpRequest对象，错误状态和错误对象
                error: function (xhr, status, error) {
                    alert("当前错误：" + error);
                },
                timeout: 30000, // 设置请求超时时间（毫秒）
                type: "GET", // 请求方式 ("POST" 或 "GET")
                beforeSend: function () { // 发送请求前可修改XMLHttpRequest对象的函数
                    console.log("AJAX请求前触发beforeSend事件");
                },
                complete: function () { // 请求完成后回调函数 (请求成功或失败之后均调用)
                    console.log("AJAX请求完成后触发complete事件");
                }
            });

            $("#btnLoadContent").click(function (e) {
                e.preventDefault();
                // 通过AJAX调用Content.htm页面内容
                $.ajax({
                    url: "Content.htm", // 发送请求的地址
// 定义一个返回成功的函数，data参数表示从服务器返回的数据
                    success: function (data) {
                        // 这里返回了Content.htm页面的元素内容，
// 如果不太清楚data到底传的是什么内容，待会儿讲解调试的时候，会看到data的真实值
                        $("#contentArea").html("").html(data); 
                    }
                });
            });
        });
    </script>

请求AJAX之后页面显示效果：

调试技巧

接下来，我们再来看下如何调试上面的例子。现在很多浏览器都有自己的调试工具，来调试html,css,javascript代码。例如现在IE8以上的版本，可以通过F12调出开发者工具来调试，Chrome浏览器也同样可以通过Control+Shift+I调出开发者工具，然后这里我将介绍一个我经常用到的调试工具，就是FireFox浏览器的Firebug调试工具插件。

首先下载并安装该插件，访问地址：http://getfirebug.com.

然后通过FireFox浏览器运行Recipe22.aspx，并通过F12调出Firebug，如下图：

现在我们就可以通过Firebug一步一步来跟踪AJAX的请求/返回。

1.点击加载软件书籍目录按钮，结果会加载显示访问页面的内容。

2.点击Firebug窗口的控制台分页，这个窗口会显示AJAX事件beforeSend和complete定义的函数里面控制台执行log方法的代码，而且还会显示请求访问的url.如下图所示：

Firebug的控制台支持以下的调用方法：

♦ console.log

♦ console.debug

♦ console.error

♦ console.info

♦ console.warning

3.更改$.ajaxSetup里面的complete事件定义的函数如下：

                complete: function () { // 请求完成后回调函数 (请求成功或失败之后均调用)
                    console.log("AJAX请求完成后触发complete事件--log消息");
                    console.debug("AJAX请求完成后触发complete事件--debug消息");
                    console.error("AJAX请求完成后触发complete事件--error消息");
                    console.info("AJAX请求完成后触发complete事件--info消息");
                    console.warning("AJAX请求完成后触发complete事件--warning消息");
                }

再次跟踪查看控制台如下：