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" >   < onClick ="showSubMenu('A')" > 一级指标A </ a >   </ td >
</ tr >
< tr  style ="display:none" >
   
< td  height ="20"  id ="A" >   </ td >
</ tr >
< tr >
  
< td  height ="20" >   < 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操作:

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)方法.

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值