没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
从零开始学习 jQuery 之 Ajax 快餐(1)
本系列文章将带您进入 jQuery 的精彩世界, 其中有很多作者具体的使用经验和解决方案,
即使你会使用 jQuery 也能在阅读中发现些许秘籍.
本篇文章讲解如何使用 jQuery 方便快捷的实现 Ajax 功能.统一所有开发人员使用 Ajax 的方式.
Ajax 让用户页面丰富起来, 增强了用户体验. 使用 Ajax 是所有 Web 开发的必修课. 虽然 Ajax 技术并不复
杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery 提供了一系列 Ajax 函数来帮助我们统一
这种差异, 并且让调用 Ajax 更加简单.
51CTO 推荐专题:jQuery 从入门到精通 jQuery 给力插件大阅兵
一. 原始 Ajax 与 jQuery 中的 Ajax
首先通过实例, 来看一下 jQuery 实现 Ajax 有多简单. 下面是一个使用原始 Ajax 的示例:
上面的实例中, data/AjaxGetCityInfo.aspx?resultType=html 地址会返回一段 HTML 代码.
使用原始 Ajax, 我们需要做较多的事情, 比如创建 XmlHttpRequest 对象, 判断请求状态, 编写回调函数
等.
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <html xmlns="http://www.w3.org/1999/xhtml">
4. <head>
5. <title>jQuery Ajax</title>
6. <script type="text/javascript">
7. $(function()
8. {
9. var xhr = new AjaxXmlHttpRequest();
10. $("#btnAjaxOld").click(function(event)
11. {
12. var xhr = new AjaxXmlHttpRequest();
13. xhr.onreadystatechange = function()
14. {
15. if (xhr.readyState == 4)
16. {
17. document.getElementById("divResult").innerHTML
= xhr.responseText;
18. }
19. }
20. xhr.open("GET", "data/AjaxGetCityInfo.aspx?resultType=
html", true);
21. xhr.send(null);
22. });
23. })
24.
25. //跨浏览器获取 XmlHttpRequest 对象
26. function AjaxXmlHttpRequest()
27. {
28. var xmlHttp;
29. try
30. {
31. // Firefox, Opera 8.0+, Safari
32. xmlHttp = new XMLHttpRequest();
33. }
34. catch (e)
35. {
36.
37. // Internet Explorer
38. try
39. {
40. xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
41. }
42. catch (e)
43. {
44.
45. try
46. {
47. xmlHttp = new ActiveXObject("Microsoft.XMLHTTP
");
48. }
49. catch (e)
50. {
51. alert("您的浏览器不支持 AJAX!");
52. return false;
53. }
54. }
55. }
56. return xmlHttp;
57. }
58.
59. </script>
60.
61. </head>
62. <body>
63. <button id="btnAjaxOld">原始 Ajax 调用</button><br />
64. <br />
65. <div id="divResult"></div>
66. </body>
67. </html>
而用 jQuery 的 Load 方法, 只需要一句话:
1. $("#divResult").load("data/AjaxGetCityInfo.aspx", { "resultType": "htm
l" });
曾经我是一个原始 Ajax 的绝对拥护者, 甚至摒弃微软的 Asp.net Ajax, 因为我想要最高的代码灵活度. 使
用原始 Ajax 让我感觉完成自己的工作更加轻松, 即使多写了一些代码. 但是当我去翻看别人的 Ajax 代码
并且尝试修改的时候, 我改变了我的看法--我们的代码到处分布着创建 XmlHttpRequest 方法的函数, 或
者某些 Ajax 程序逻辑性和结构性很差, 很难看懂.
我们可以将通用方法放到一个 js 文件中, 然后告诉大家"嘿伙伴们, 都来用这个 js 中的方法". 但是在某
些时候有些新来的外包人员并不知道有这个 js 文件的存在. 而且其实这个通用的 js 就是一个公共的脚本
类库, 我相信没有人会觉得自己开发一个类库会比 jQuery 更好!
所以我放弃了制造轮子的计划, 大家都使用 jQuery 编写 Ajax 相关的方法就可以解决各种差异性问题, 并
且让工作更有效率.
现在只是用 jQuery 的 Ajax 函数, 我的页面变得简洁了:
二. jQuery Ajax 详解
jQuery 提供了几个用于发送 Ajax 请求的函数. 其中最核心也是最复杂的是 jQuery.ajax( options ),所有
的其他 Ajax 函数都是它的一个简化调用. 当我们想要完全控制 Ajax 时可以使用此结果, 否则还是使用简
化方法如 get, post, load 等更加方便. 所以 jQuery.ajax( options ) 方法放到最后一个介绍. 先来介
绍最简单的 load 方法:
1. load( url, [data], [callback] )
Returns: jQuery 包装集
说明:
load 方法能够载入远程 HTML 文件代码并插入至 DOM 中。
默认使用 GET 方式, 如果传递了 data 参数则使用 Post 方式.
- 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,
DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector", 默认的选择器是"body>*".
讲解:
load 是最简单的 Ajax 函数, 但是使用具有局限性:
1. 它主要用于直接返回 HTML 的 Ajax 接口
2. load 是一个 jQuery 包装集方法,需要在 jQuery 包装集上调用,并且会将返回的 HTML 加载到对象中, 即
使设置了回调函数也还是会加载.
不过不可否认 load 接口设计巧妙并且使用简单.下面通过示例来演示 Load 接口的使用:
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <html xmlns="http://www.w3.org/1999/xhtml">
4. <head>
5. <title>jQuery Ajax - Load</title>
6.
7. <script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2
.js"></script>
8.
9. <script type="text/javascript">
10. $(function()
11. {
12. $("#btnAjaxGet").click(function(event)
13. {
14. //发送 Get 请求
15. $("#divResult").load
16. ("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click" + "×tamp=" +
(new Date()).getTime());
17. });
18.
19. $("#btnAjaxPost").click(function(event)
20. {
21. //发送 Post 请求
剩余17页未读,继续阅读
资源评论
zceolrj
- 粉丝: 8
- 资源: 234
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功