jQuery get(),post(),ajaxStart(),ajaxStop()
用jQuery进行Ajax处理，get(),post()这两个函数使用率是相当高的。只是因为其简单高效，易理解，所以基本上大家都很看好它们。相信各位也一定看过gmail的效果，在内容成功加载之前，显示一个loading按钮，内容正确加载后，按钮消失。这是咋做的呢？稍候为大家介绍的ajaxStart()和ajaxStop()函数将为您揭晓谜底。
get()：jQuery.get(url,[data],[callback],[type])
与之前介绍的getJSON()或是getScript()比，多了个参数type。这个参数的作用是“Ajax请求服务器端返回的内容格式，xml, html, script, json, text, _default”
通常get()函数只是简单地取得由URL指定的文件，然后将纯文本格式(指定格式)的数据提供给回调函数。但是如果在根据服务器提供的MIME类型知道响应的是XML的情况下，提供给回调函数的将是XML DOM树。
post():jQuery.post(url,[data],[callback],[type])
与get()的请求参数完全相同，二者的唯一区别就是，在向服务器端发送ajax请求时，给url传递的参数data是以get方式传送还是以post方式传送，一般我比较喜欢用post()函数。
ajaxStart():ajaxStart(callback),ajaxStop():ajaxStop(callback)
一个是当AJAX 请求开始时执行函数。绑定一个对象后，由该对象触发。另一个是当AJAX 请求结束时执行函数。一般与ajaxStart()成对出现，以提供某种效果。
下面我们用这四个函数来继续模拟“字典操作”，首先我们用get()函数来去请求XML文件。
<h3>D</h3>
<div class="button">Load</div>
</div>
<!-- 用css文件定义id为loading的div的样式为display:none -->
<div id="loading">
Loading...
</div>
<div id="dictionary">
</div>
定义xml文件，稍候用get()方法，将xml的内容拼装在id为dictionary的div中
<entries>
<entry term="DANCE" part="v.i.">
<definition>
To leap about to the sound of tittering music, preferably with arms about your neighbor's wife or daughter. There are many kinds of dances, but all those requiring the participation of the two sexes have two characteristics in common: they are conspicuously innocent, and warmly loved by the vicious.
</definition>
</entry>
<entry term="DAY" part="n.">
<definition>
A period of twenty-four hours, mostly misspent. This period is divided into two parts, the day proper and the night, or day improper <![CDATA[—]]> the former devoted to sins of business, the latter consecrated to the other sort. These two kinds of social activity overlap.
</definition>
</entry>
</entries>
// 字母D下面的按钮被点击时触发发函数
$('#letter-d .button').click(function() {
// 用get()方法加载d.xml，返回数据为data
$.get('d.xml', function(data) {
// 将id为dictionary的div里内容清空
$('#dictionary').empty();
// 循环处理每个entry标签里面的quote标签，并且这个quote标签得有author属性
$(data).find('entry:has(quote[author])').each(function() {
// 定义临时变量，可以entry为当前被循环的entry
var $entry = $(this);
// 拼装html
var html = '<div class="entry">';
html += '<h3 class="term">' + $entry.attr('term') + '</h3>';
html += '<div class="part">' + $entry.attr('part') + '</div>';
html += '<div class="definition">'
// 在entry条目里面获取definition标签里的内容
html += $entry.find('definition').text();
// quote为quote标签里的内容
var $quote = $entry.find('quote');
// 如果quote不为空
if ($quote.length) {
html += '<div class="quote">';
// 循环处理quote标签里的line标签的内容
$quote.find('line').each(function() {
html += '<div class="quote-line">' + $(this).text() + '</div>';
});
// 如果quote标签里面author属性的值不为空
if ($quote.attr('author')) {
html += '<div class="quote-author">' + $quote.attr('author') + '</div>';
}
html += '</div>';
}
html += '</div>';
html += '</div>';
// 将id为dictionary里面的加上html的内容
$('#dictionary').append($(html));
});
});
});
});
下面我们再来用post()方法来进行ajax加载，这次我们使用服务器端语言php，将数据通过url，用post()方法将其发送至服务器端，最后获取请求
<?php
$entries = array(
'EDIBLE' => array(
'part' => 'adj.',
'definition' => 'Good to eat, and wholesome to digest, as
a worm to a toad, a toad to a snake, a snake to a pig,
a pig to a man, and a man to a worm.',
),
'EDUCATION' => array(
'part' => 'n.',
'definition' => 'That which discloses to the wise and
disguises from the foolish their lack of
understanding.',
)
);
if (isset($entries[strtoupper($_REQUEST['term'])])) {
$entry = $entries[strtoupper($_REQUEST['term'])];
$html = '同样是拼div里面要显示的真正内容，这里就不给出代码了';
print($html);
?>
同样是拼要显示的代码，只不过这次是用php来完成的，再来看一下页面代码
<h3>E</h3>
<ul>
<li><a href="e.php?term=Eavesdrop">Eavesdrop</a></li>
<li><a href="e.php?term=Edible">Edible</a></li>
</ul>
</div>
<!-- 用css文件定义id为loading的div的样式为display:none -->
<div id="loading">
Loading...
</div>
// 点击字母E下面的超链接时触发函数
$('#letter-e a').click(function() {
// 用post方法向e.php传递参数term，参数的值为超链接显示的text
$.post('e.php', {'term': $(this).text()}, function(data) {
// 将返回的数据直接放入id为dictionary的div中
$('#dictionary').html(data);
});
// 禁止超链接默认的链接操作
return false;
});
});
另外，大家也都看到了，我这个代码里面是有loading的，在点击按钮的时候就会显示loading，有数据返回的时候就会消失这用的就是ajaxStart()和ajaxStop()方法。
// 将id为loading内容为Loading...的这段内容放置在id为dictionary的内容之前
// 在有ajax发生前，将其显示出来
// 在ajax结束后，将其隐藏掉
$('<div id="loading">Loading...</div>')
.insertBefore('#dictionary')
.ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
});
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2009/07/04/1075/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
@alswl
那个是CNZZ网站统计的一个附加功能。呵呵。
[回复]
@simaopig
OK，谢谢
[回复]
@alswl
呵呵，客气啥。 。^_^
[回复]