jQuery load()函数帮你实现简单的Ajax
我之所以喜欢jQuery，是因为其几乎不用考虑浏览器的不兼容问题，jQuery会帮你做的很好。除了强大的动画效果之外，其强大的ajax函数也是让我爱不释手的重要原因之一。
今天，我来把书中这个“字典”的例子逐步讲解一下，让你我都能用jQuery提供给我们丰富的Ajax函数来实现异步HTTP操作。
先来看一下API上面对load()函数的说明：
load(fn)：
如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。
说的很是简单，有些让人头晕晕的，根本没有说明此函数到底如何使用，又会产生何种效果，现在我们来简单的了解一下这个函数。
其实，真正调用load方法的格式是(在API Ajax中有另一种使用方法)：load( url, [data], [callback] ),其中
url为ajax操作请求的url地址，url里加上空格后面就可以跟选择器了，如 demo.html .nav 就可以获取demo.html中类名为nav的元素内容，不过如果这个类不存在的话，则什么也不返回甚至连http请求都不会发生
data可以以参数key，value对的js对象形式给出请求url地址时附带的参数，相当于把url用get方式请求
callback为请求完url后，在得到url返回的结果后进行回调的函数
这里面我先主要说一下这个url和data，因为这两个参数是我们用其进行Ajax操作所必须的，而回调函数则可用可不用，看你心情吧。呵呵。
不过就算这个data是可选的，一般人也不会选择他，至少我这篇日志里面是不会用到的，因为jQuery另外提供了两个函数可以以带参数的等式访问url，get，post皆可，所以这个你也可以先不管。只要知道load()其实也是可以加载动态页面的即可。
ajax请求实战：
书中的例子是一个用不同方式进行ajax请求的一个“字典”程序，我将其一点点的拆开，以迎合每篇博客的需要。这篇当中我们主要使用的就是这个load()函数。
先来看一下代码：
<div class="letter" id="letter-a">
<h3>A</h3>
<div class="button">Load</div>
</div>
</div>
<!-- 用样式控制一下，id为loading的元素是不显示的display:none -->
<div id="loading">
Loading...
</div>
<div id="dictionary">
</div>
我们要进行的操作是，当点击字母A时，向静态页面a.html中发起请求，并获取其内容，将其内容在id为dictionary的div中显示，因为a.html中的内容全都是以字母A开头的单词
a.html代码如下：
<h3 class="term">ABSOLUTE</h3>
<div class="part">adj.</div>
<div class="definition">
Independent, irresponsible. An absolute monarchy is one in which the sovereign does as he pleases so long as he pleases the assassins. Not many absolute monarchies are left, most of them having been replaced by limited monarchies, where the sovereign's power for evil (and for good) is greatly curtailed, and by republics, which are governed by chance.
</div>
</div>
<div class="entry">
<h3 class="term">ACKNOWLEDGE</h3>
<div class="part">v.t.</div>
<div class="definition">
To confess. Acknowledgement of one another's faults is the highest duty imposed by our love of truth.
</div>
</div>
<div class="entry">
<h3 class="term">AFFIANCED</h3>
<div class="part">pp.</div>
<div class="definition">
Fitted with an ankle-ring for the ball-and-chain.
</div>
</div>
这里说明一下，看代码大家也看出来了，a.html并不算是一个真正的html文档，因其没有<html>,<head>或者<body>也没有，只包含其最基本的代码，因为这个文件的唯一目的就是提供插入到其他HTML文档中使用，其样式受外层文档样式控制。
现在一切准备工作已经结束，就差jQuery调用load()方法这个东风了，来东风起：
// 当页面加载完毕后，
// 点击id为letter-a的div里面的按钮调用如下函数
$('#letter-a .button').click(function() {
// 首先将id为dictionary的div内容隐藏
// 然后动态加载a.html内容将其放入dictionary中
// 然后以动态效果显示dictionary的内容显示出来
$('#dictionary').hide().load('a.html', function() {
$(this).fadeIn();
});
});
});
这样这个简单的Ajax请求就通过jQuery的load()函数实现了，你也不用判断浏览器，然后定义不同的XMLHttpRequest对象，因为这些都是由jQuery干活的，让小弟们好好的干吧，咱哥们坐享其成就行了，呵呵。
回调函数：
上述操作用到了回调函数，那到底啥时候应该用回调函数，啥时候没必要用呢？我的理解是：对于必须要延迟到加载完成才能继续的操作，应该使用回调函数，而且貌似只能使用回调函数。当然.success和.ajaxStop不算哈。
PS:box.net网盘处于不可用状态中，大家有感觉好一点的免费网盘可推荐一下，谢谢。有想要源代码的，可以直接给我发邮件。
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2009/07/01/1046/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
嗯，这个要学习一下
[回复]
jQuery确实是个非常不错的东东，不过我记得load似乎并不是它字面上的载入一个URL的意思，而是绑定某个元素载入时的事件。
一般发起ajax请求，在jQuery中用$.get和$.post比较多。
至于
$(‘#dictionary’).hide().load(‘a.html’, function() {
$(this).fadeIn();
});
这样能否获得远程文件还没试过，，嗯，，这就试试看。。
[回复]
呃，，好像是的，，我错了，，主要是我一般用get和post基本不用load
[回复]
@JetKing
呵，以前也没注意这个函数。看完书中《Ajax》一章很久了。
懒，一直没有写出来，昨天写这两篇日志时还翻了很多别人的老日志。感觉应该是没问题的。而且可以看一下我的demo。呵。
我平时用的最多的是$.ajax()操作。呵呵。
[回复]
DEMO地址出错了，学了半天想看看效果
[回复]
@LAONB
我晕啊。我那个站打不开了。。貌似被墙了？
[回复]
@LAONB
换了个演示地址，这回可以看了。真伤心啊。。
[回复]
@simaopig
可以了，我看到了，是个弹出效果吧
[回复]
@LAONB
类似那种效果，就是连接远程文件，加载了一下。呵呵。
[回复]
嗯，这个不多，迟点就用这个代码改点东西
[回复]
@bolo
呵呵，这个代码很少的。
[回复]
:x AJAX 这种load页面都会存在事件绑定的问题吧。并且LOAD进来的页面看不到源文件。
[回复]
@看海
用ajax加载进来的东西都是看不到源文件的吧？我记着是的。呵呵。
[回复]