PHP服务器文件管理器开发小结（三）：使用jQuery提交AJAX请求
本节将讨论使用jQuery提交AJAX请求的基本方法，并完成显示首文件夹的基本方法。
同时，本节也将讨论使用图片链接提交请求的基本方法。
jQuery是一套强大的JS库，将复杂的JS操作封装成简洁的语句，并提供对AJAX的支持。通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。
――w3school
下面这段html用于显示文件夹列表上方的菜单项
<ul id="navi"> <li><a href="#" title="home" onClick="onHome()"><img src="images/home48.png" class="topmenu" alt=""/></a></li> <li><a href="#" title="up" onClick="onUp()"><img src="images/upfolder48.png" class="topmenu" alt=""/></a></li> <li><a href="#" title="refresh" onClick="onRefresh()"><img src="images/listrefresh48.png" class="topmenu" alt=""/></a></li> <li><a href="#" title="upload" onClick="onUploadFile()"><img src="images/upload48.png" class="topmenu" alt=""/></a></li> <li><a href="#" title="new file" onClick="onNewFile()"><img src="images/newfile48.png" class="topmenu" alt=""/></a></li> <li><a href="#" title="new folder" onClick="onNewFolder()"><img src="images/newfolder48.png" class="topmenu" alt=""/></a></li> </ul><br/>
注意该ul应用到的css
ul li{
list-style: none;
float: left;
}
#navi a{
display: block;
width: 48px;
height: 48px;
margin-left: 0.5em;
}
其中，li的样式使得其取消了前置的符号，并转化为向左浮动的内联元素，而不是默认的纵向排列的块状元素。a的样式固定了显示的状态、大小和左边距。
显示效果如下：
具体到最左侧的Home，其采用了图片链接的方式，通过点击链接向服务器发送请求。
<a href="#" title="home" onClick="onHome()"><img src="images/home48.png" class="topmenu" alt=""/></a>
注意该链接的目的地址为"#"，这样就不会跳转，而是为点击事件onClick响应了onHome()函数。
.topmenu{
width: 48px;
height: 48px;
}
这个样式固定了图片的显示大小。
onHome()函数需要完成以下流程：
使用AJAX向服务器发送获取首文件夹内容的请求;
接收服务器返回的内容，并显示到预定的位置。
使用jQuery发送AJAX请求的基本语法是：
$.get(URL,callback); $.post(URL,data,callback);
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
由于本管理器可能会对一个文件夹的内容反复刷新，因此更适合使用POST获取内容。
以下是onHome()的代码内容：
function onHome()
{
var strDirName = "home";
var strEncodedName = escape(strDirName);
$.post("query.php", {act:strEncodedName}, function (data) {
$('#spanDirTable').html(data);
});
}
其中，spanDirTable是网页上的一个div，用来显示文件夹的内容。
使用$.post函数，将home字符串放在act表单中并post给query.php，query.php处理该请求并返回文件夹内容data，之后将该data置换到spanDirTable的内容中。
以下是query.php中节选的处理该请求的语句段。
$strActName = urldecode($_POST["act"]);
switch ($strActName)
{
case "home":
$isDirContentView = true;
$strDirName = "/home";
break;
}
if ($isDirContentView)
{
echo createDirContentTable($strDirName);
}
PHP中通过$_POST预留字来获取POST的值，因此使用$_POST["act"]可以获取act表单中的值。
本管理器将HOME默认置为了"/home"，以避免对系统的损害。事实上，也可以定义成其他更加不会损害系统的位置。
createDirContentTable($strDirName)函数将返回创建的文件夹内容列表，并通过echo显示到POST请求的返回流中。
function createDirContentTable($strDirName)
{
$isSuceed = true;
if (!($hDir = opendir($strDirName)))
{
echo "Directory '$strDirName' unavailable!";
$isSuceed = false;
}
if ($isSuceed)
{
printf("<p class=\"page-title\">%s</p>", $strDirName);
echo <<<NAVI
<ul id="navi">
<li><a href="#" title="home" onClick="onHome()"><img src="images/home48.png" class="topmenu" alt=""/></a></li>
<li><a href="#" title="up" onClick="onUp()"><img src="images/upfolder48.png" class="topmenu" alt=""/></a></li>
<li><a href="#" title="refresh" onClick="onRefresh()"><img src="images/listrefresh48.png" class="topmenu" alt=""/></a></li>
<li><a href="#" title="upload" onClick="onUploadFile()"><img src="images/upload48.png" class="topmenu" alt=""/></a></li>
<li><a href="#" title="new file" onClick="onNewFile()"><img src="images/newfile48.png" class="topmenu" alt=""/></a></li>
<li><a href="#" title="new folder" onClick="onNewFolder()"><img src="images/newfolder48.png" class="topmenu" alt=""/></a></li>
</ul><br/>
NAVI
;
echo "<table>";
echo "<tr><th>Name</th><th>Type</th><th>Readalbe</th><th>Writable</th><th>Excutable</th><th>Size</th><th>Created</th><th>Modified</th><th>Access</th><th>Operation</th></tr>";
while (($fileName = readdir($hDir))!==false)
{
if ($fileName == "." || $fileName == "..") continue;
if (is_file($strDirName."/".$fileName))
$fileList[] = $fileName;
if (is_dir($strDirName."/".$fileName))
$dirList[] = $fileName;
}
$isDirEmpty = true;
if (isset($dirList))
{
$isDirEmpty = false;
natsort($dirList);
foreach($dirList as $dirName)
{
echo getDirElemInfo($strDirName, $dirName);
}
}
if (isset($fileList))
{
$isDirEmpty = false;
natsort($fileList);
foreach($fileList as $fileName)
{
echo getFileElemInfo($strDirName, $fileName);
}
}
echo "</table>";
if ($isDirEmpty)
{
echo "Directory '$strDirName' is Empty!";
}
else echo "<div class=\"\">Total size: ".sizeToBytes(calcDirSize($strDirName))."</div>";
closedir($hDir);
}
}
浏览文件夹下内容的方法流程比较固定：
使用opendir打开文件夹句柄
使用readdir枚举文件夹内容
使用is_file和is_dir分类内容，并分别处理
使用closedir关闭句柄
其中getDirElemInfo和getFileElemInfo两个函数的具体实现留待后续小结中继续介绍。
显示效果如下图
