menu.html
< head >
< META http-equiv =Content-Type content ="text/html; charset=gb2312" >
< LINK href ="images/css.css" type =text/css rel =stylesheet >
< script language ="javascript" >
var XMLHttpReq;
var currentSort;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息
updateMenu();
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
//更新菜单函数
function updateMenu() {
var res=XMLHttpReq.responseXML.getElementsByTagName("res");
var subMenu = "";
for(var i = 0; i < res.length; i++) {
subMenu = subMenu + " " + res[i].lastChild.data;
}
currentSort.innerHTML = subMenu;
}
// 创建级联菜单函数
function showSubMenu(obj) {
currentSort = document.getElementById(obj);
currentSort.parentNode.style.display = "";
sendRequest("menu.jsp?sort=" + obj);
}
</ script >
</ head >
< body >
< table style ="BORDER-COLLAPSE: collapse" borderColor =#111111
cellSpacing =0 cellPadding =0 width =200 bgColor =#f5efe7 border =0 >
< TR >
< TD align =middle bgColor =#dbc2b0 height =19 >< B > 指标操作 </ B > </ TD >
</ TR >
< tr >
< td height ="20" > < a onClick ="showSubMenu('A')" > 一级指标A </ a > </ td >
</ tr >
< tr style ="display:none" >
< td height ="20" id ="A" > </ td >
</ tr >
< tr >
< td height ="20" > < a onClick ="showSubMenu('B')" > 一级指标B </ a > </ td >
</ tr >
< tr style ="display:none " >
< td height ="20" id ="B" > </ td >
</ tr >
</ table >
</ body >
</ html >
menu.jsp
<%
// 接收浏览器端提交的信息
String sort = request.getParameter( " sort " );
String contents1 = "" ;
String contents2 = "" ;
if (sort.equals( " A " )) {
contents1="一级指标AA";
contents2="一级指标AB";
} else if (sort.equals( " B " )) {
contents1="二级指标BA";
contents2="二级指标BB";
}
// 传回响应数据
response.setContentType( " text/xml; charset=UTF-8 " );
response.setHeader( " Cache-Control " , " no-cache " );
out.println( " <response> " );
out.println( " <res> " + contents1 + " </res> " );
out.println( " <res> " + contents2 + " </res> " );
out.println( " </response> " );
out.close();
%>
OK , 代码就这么多,十分简单.
下面简单介绍一下上面的ajax操作:
1. ajax技术主要由四部分组成
javascript
css
dom
XMLHttpRequest
2. ajax的核心对象
XMLHttpRequest
3. XMLHttpRequest对象的方法
void open(String method, String url, boolean async)
void send(String body)
void setHeader(String header, String value)
String getResponseHeader(String header)
String getAllResponseHeaders()
void abort()
4. XMLHttpRequest对象的属性
返回值类型 | 属性名 |
Number | readyState |
Function | Onreadystatechange |
String | responseText |
XmlDocument | responseXML |
Number | status |
String | statusText |
5. ajax 操作的主要步骤
⑴ 声明一个XMLHttpRequest对象.
⑵ 调用window.open(method, url , boolean),执行后台操作
⑶ 对返回值进行操作, 一般用XMLHttpRequest对象的onreadystatechange属性.
⑷ 执行send(body)方法.