AJAX实例的级联菜单

包括四个文件
relationMeun_ajax.js
relationMeun.js
relationMeun.html
relationMeun.php

ajax文件 relationMeun_ajax.js
/**
* 创建XMLHttpRequest对象
*
*/
var xmlHttp = false;
function sendRequest(url)
{
if(window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){}
}
}
else if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
if(xmlHttp.overridMimeType)
{
xmlHttp.overridMimeType("txt/html");
}
}

if(!xmlHttp)
{
window.alert('创建XMLHttpRequest对象失败');
return false;
}
//指定处理函数
xmlHttp.onreadystatechange = processRequest;
//指定处理页面
xmlHttp.open('GET',url,true);
//发送请求
xmlHttp.send(null);
}

/**
* 处理服务器返回信息的函数
*
*/
function processRequest()
{
//判断XMLHttpRequest对象的目前状态
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
//信息已经返回，可以进行处理
document.getElementById(currentPos).innerHTML = xmlHttp.responseText;
}
}

客户端js文件 relationMeun.js

function nextMenu(pos)
{
document.getElementById(pos).parentNode.style.display="";
document.getElementById(pos).innerHTML = "正在读取数据……";
currentPos = pos;
sendRequest('relationMenu.php?pos=' + pos);
}

客户端页面 relationMeun.html

<script language="javascript" src="relationMenu_ajax.js"></script>
<script language="javascript" src="relationMenu.js"></script>
<table width="200" border="1" align="center">
<tr>
<td><a href="javascript:void(0)" οnclick="nextMenu('pos_1')">Mobile</a></td>
</tr>
<tr style="display:none">
<td id="pos_1">&nbsp;</td>
</tr>
<tr>
<td><a href="javascript:void(0)" οnclick="nextMenu('pos_2')">Car</a></td>
</tr>
<tr style="display:none">
<td id="pos_2">&nbsp;</td>
</tr>
</table>

 

服务器端页面 relationMeun.php

<?php
if($pos == "pos_1")
{
echo "&nbsp;&nbsp;MOTO<br>";
echo "&nbsp;&nbsp;NOKIA<br>";
echo "&nbsp;&nbsp;ANYCALL<br>";
}
else if($pos == "pos_2")
{
echo "&nbsp;&nbsp;BMW<br>";
echo "&nbsp;&nbsp;KIA<br>";
echo "&nbsp;&nbsp;JETTE<br>";
}
?>