AJax实例2--级联菜单

/************************************************** 
*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" > &nbsp; </ 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" > &nbsp; </ 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", "&nbsp;&nbsp;总经理<br>&nbsp;&nbsp;副总经理");
 else echo iconv("gb2312", "utf-8", "&nbsp;&nbsp;工程师<br>&nbsp;&nbsp;副工程师"); */
$pos = mb_convert_encoding( urldecode (@ $HTTP_POST_VARS [ " playPos " ]) , " gb2312 " ,   " utf-8 " );
  if ( $pos == " pos_1 " )  echo   mb_convert_encoding( " &nbsp;&nbsp;总经理<br>&nbsp;&nbsp;副总经理 " , " utf-8 " ,   " gb2312 " );
  else   echo  mb_convert_encoding( " &nbsp;&nbsp;工程师<br>&nbsp;&nbsp;副工程师 " , " utf-8 " ,   " gb2312 " );
?>