ASP.NETjQuery食谱22(jQueryAJAX基本方法使用和调试技巧)

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

从这章开始，我们将开始讲解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消息");
                }

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

4.现在我们再来看下Firebug窗口的网络分页，这个页面可以跟踪查看网络资源，如HTML,CSS,JS,XHR(XmlHttpRequest),图片,Flash和媒体。现在我们点击XHR子分页栏，我们会看到URL,状态,域,请求数据大小,远程IP和请求时间。

同时打开URL，还可以看到对应的子项目内容:

参数：访问URL的键值参数（注意：_ 1329150564101是$.ajax方法默认添加的参数，用来控制浏览器缓存。每一次请求，$.ajax方法都会生成一个新的默认键值，保证每次用户都是新的请求而且不需要缓存返回的内容。）

头信息：显示请求/返回的头信息。

响应：显示AJAX请求返回的内容，包括JSON，HTML，XML，TEXT和SCRIPT。

缓存：显示缓存的一些细节。

HTML: 通过HTML显示返回的内容。

单击响应子分页栏，将会显示AJAX访问Content.htm页面返回的HTML内容：

（注意：这里就是调用$.ajax方法success事件定义函数的data参数返回的内容)

再来看下点击HTML子分页栏，将会通过HTML显示AJAX请求返回的内容：

好了，通过以上内容的讲解，相信你已经对jQuery的AJAX使用有了基本的认识，而且也学会了基本的调试技巧。