AJax实例2--级联菜单

最新推荐文章于 2021-02-12 17:35:35 发布

java619

最新推荐文章于 2021-02-12 17:35:35 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： PHP学习 AJAX研究文章标签： ajax xmlhttprequest javascript encoding function mozilla

本文链接：https://blog.youkuaiyun.com/Java619/article/details/1365961

AJAX研究同时被 2 个专栏收录

18 篇文章

订阅专栏

PHP学习

2 篇文章

订阅专栏

本文介绍了一种利用AJAX技术优化网页菜单加载的方法，通过按需加载菜单内容，有效减少数据冗余和提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**************************************************
*Author:Java619
*Time:2006-5
**************************************************/

以前,为了避免每次对菜单的操作引起重载页面,不采用每次调用后台的方式,而是一次性将纺联菜单的数据全部读取出来并写入数组然后根据用户的操作用JavaScript来控制它的子集项目的呈现,这样虽然解决了操作响应速度,不重载页面以及避免向服务器频繁发送请求的问题,但是如果用户不对菜单进行操作或只对菜单中的一部分进行操作的话,那读取的数据中的一部分会成为冗余数据而浪费用户的资源,特别是在菜单结构复杂,数据量大的情况下(比如菜单有很多级、每一级菜单又有上百个项目),这种弊端就更为突出。现在应用AJAX，在初始化页面时我们只读出它的第一级所有数据并显示，在用户操作一级菜单其中一项时，会通过AJAX向后台请求当前一级所属的二级子菜单的所有数据，如果再继续请求已经呈现的二级菜单中的一项时，再向后面请求所操作二级菜单项对应的所有三纺菜单的所有数据，以此类推。这样，用什么就取什么、用多少就取多少，就不会有数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用重载全部内容，只更新需要更新的那部分即可，相对于后台处理并重载的方式缩短了用户等待时间，也把对资源的浪费降到最低。具体请看下面的实例:

实例代码

1.用户界面:sample2_1.html

<html>

<head>

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>

<tr>

</tr>

</tr>

<tr>

</tr>

</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");