今天完成了一个在进行耗时长久的操作时，为了不让用户感到无聊而显示一个“载入中，请稍安勿躁”之类提示的小例子。

演示地址：此处。

==============

为了使这个“耗时长久”的操作显得真实一些，我决定让我的jQuery通过ajax去调用一个PHP文件，并从PHP文件那里返回一些东西。当然，这只是一个demo，PHP文件不用太复杂：

$t=rand(3,6);
sleep($t);
$arr=array("t"=>$t, "foo"=>"bar");
$jarr=json_encode($arr);
echo $jarr;

值得注意的有两点：

第一，在返回到jQuery之前，我先用PHP函数json_encode将要返回的东西进行JSON编码。JSON是很通用的编码规范，jQuery、PHP都支持；

第二，返回需要用到的不是return，而是echo。这个很特别。我开始用的是return，然后在jQuery中死活得不到返回的数据流。

核心的jQuery代码是：

	var time_elapsed;
	var action;
$(document).ready(
 
	function()
	{
		$("a").filter("#long").click(
			function(event)
			{
				event.preventDefault();
				$.getJSON("ajaxcall.php", function(json)
					{
						time_elapsed=json.t;
						action=json.foo;
					}
				);
			}
		);
 
		$("div").filter("#div01").ajaxStart(
			function()
			{
				$(this).slideDown("slow");
			}
		).ajaxComplete(
			function()
			{
				alert("本次"+action+"的操作耗时"+time_elapsed+"秒。");
				$(this).fadeOut("slow");
			}
		);
	}
);

这里需要注意三点：

第一，变量的说明要在所有函数体之外，类似全局变量。虽然使用全局变量不好，但是在这样小规模的代码段中，也是可以接受的；

第二，请注意获得json数据流中变量的方法。由于在PHP中我是用JSON编码我的返回值，所以我必须用getJSON去调用PHP文件，从而获得数据。同时，可以注意到，经由getJSON得到的数据已经变成了一个对象数组，我可以用json.t，json.foo这样很直观的方法来获取返回值。

第三，请注意ajax调用和针对ajax调用时状态处理函数的声明。ajax的调用必须用$.getJSON的方式；而ajax调用状态中最重要的就是ajaxStart和ajaxComplete。

So far, so good.