• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [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使用有了基本的认识,而且也学会了基本的调试技巧。

在后面的章节,将会介绍更多jQuery AJAX在ASP.NET中的使用方法。






鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
在ASP.NET中执行URL重写发布时间:2022-07-10
下一篇:
ASP.NETMVC快速入门(一)发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap