ajax实例教程-----级联菜单

     关于ajax的特性,这里不再写了,去网上随便就能找到好多. 现在写一个用ajax和jsp来实现的动态菜单的实例.先感觉一下ajax是如何实现传说中的异步操作!
       menu.html
     

< 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
 

<% @ page contentType = " text/html; charset=GBK "  %>
<%  
// 接收浏览器端提交的信息
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操作:

<!--[if !supportLists]--> 1.       <!--[endif]-->  ajax技术主要由四部分组成

javascript

css

dom

XMLHttpRequest

<!--[if !supportLists]--> 2.       <!--[endif]--> ajax的核心对象

XMLHttpRequest

<!--[if !supportLists]--> 3.       <!--[endif]--> 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()

  

<!--[if !supportLists]--> 4.       <!--[endif]-->XMLHttpRequest对象的属性

返回值类型	属性名
Number	readyState
Function	Onreadystatechange
String	responseText
XmlDocument	responseXML
Number	status
String	statusText

 

<!--[if !supportLists]--> 5.       <!--[endif]-->ajax 操作的主要步骤

⑴ 声明一个XMLHttpRequest对象.

⑵ 调用window.open(method, url , boolean),执行后台操作

⑶ 对返回值进行操作, 一般用XMLHttpRequest对象的onreadystatechange属性.

⑷ 执行send(body)方法.