/**************************************************
*Author:Java619
*Time:2006-5
**************************************************/
以前,爲了避免每次對菜單的操作引起重載頁面,不採用每次調用後臺的方式,而是一次性將紡聯菜單的數據全部讀取出來並寫入數組然後根據用戶的操作 用JavaScript來控制它的子集項目的呈現,這樣雖然解決了操作響應速度,不重載頁面以及避免向服務器頻繁發送請求的問題,但是如果用戶不對菜單進行操作或只對菜單中的一部分進行操作的話,那讀取的數據中的一部分會成爲冗餘數據而浪費用戶的資源,特別是在菜單結構複雜,數據量大的情況下(比如菜單有很多級、每一級菜單又有上百個項目),這種弊端就更爲突出。現在應用AJAX，在初始化頁面時我們只讀出它的第一級所有數據並顯示，在用戶操作一級菜單其中一項時，會通過AJAX向後臺請求當前一級所屬的二級子菜單的所有數據，如果再繼續請求已經呈現的二級菜單中的一項時，再向後面請求所操作二級菜單項對應的所有三紡菜單的所有數據，以此類推。這樣，用什麼就取什麼、用多少就取多少，就不會有數據的冗餘和浪費，減少了數據下載總量，而且更新頁面時不用重載全部內容，只更新需要更新的那部分即可，相對於後臺處理並重載的方式縮短了用戶等待時間，也把對資源的浪費降到最低。具體請看下面的實例:
實例代碼
1.用戶界面:sample2_1.html
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>菜單</title>
<script language="javascript">
var http_request = false; var currentPos = null;
function send_request(url,obj) {//初始化、指定處理函數、發送請求的函數
http_request = false; //開始初始化XMLHttpRequest對象 if(window.XMLHttpRequest) { //Mozilla 瀏覽器 http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) {//設置MiME類別 http_request.overrideMimeType('text/xml');
} } else if (window.ActiveXObject) { // IE瀏覽器 try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { // 異常，創建對象實例失敗 window.alert("不能創建XMLHttpRequest對象實例."); return false; } var queryString = encodeURIComponent("playPos") + "=" + encodeURIComponent(obj); http_request.onreadystatechange = processRequest; var contentType = "application/x-www-form-urlencoded; charset=utf-8"; // 確定發送請求的方式和URL以及是否同步執行下段代碼 http_request.open("post", url, true); http_request.setRequestHeader("Content-Type", contentType); http_request.send(queryString); } // 處理返回信息的函數 function processRequest() { if (http_request.readyState == 4) { // 判斷對象狀態 if (http_request.status == 200) { // 信息已經成功返回，開始處理信息 //alert(http_request.responseText); document.getElementById(currentPos).innerHTML = http_request.responseText; } else { //頁面不正常 alert("您所請求的頁面有異常。"); } } } //顯示部門下的崗位 function showRoles(obj) { document.getElementById(obj).parentNode.style.display = ""; document.getElementById(obj).innerHTML = "正在讀取數據..." currentPos = obj; send_request("sample2_2.php",obj);
}</script></head><body><table width="200" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="20"><a href="javascript:void(0)" onClick="showRoles('pos_1')">經理室</a></td> </tr> <tr style="display:none"> <td height="20" id="pos_1"> </td> </tr> <tr> <td height="20"><a href="javascript:void(0)" onClick="showRoles('pos_2')">開發部</a></td> </tr> <tr style="display:none "> <td id="pos_2" height="20"> </td> </tr></table></body></html>2.後臺處理:sample2_2.php
<?php/*若你的PHP服務器,支持或已經打開字符串處理函數,可以使用iconv函數 $pos=iconv("utf-8", "gb2312", urldecode(@$HTTP_POST_VARS["playPos"])); if($pos=="pos_1") echo iconv("gb2312", "utf-8", " 總經理<br> 副總經理"); else echo iconv("gb2312", "utf-8", " 工程師<br> 副工程師");*/$pos=mb_convert_encoding(urldecode(@$HTTP_POST_VARS["playPos"]),"gb2312", "utf-8"); if($pos=="pos_1") echo mb_convert_encoding(" 總經理<br> 副總經理","utf-8", "gb2312"); else echo mb_convert_encoding(" 工程師<br> 副工程師","utf-8", "gb2312");?>