从这章开始，我们将开始讲解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使用有了基本的认识，而且也学会了基本的调试技巧。
在后面的章节，将会介绍更多jQuery AJAX在ASP.NET中的使用方法。
