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

原创 2007年09月12日 15:23:00
        关于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)方法.

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

AJAX实例的级联菜单

Ajax小实例--级联菜单

         当菜单选项包含很多子选项项时,我们不可能把所有的菜单选项放到网页变量中,那么在网页加载时必须要加载全部数据才可以完成,浪费时间影响性能,特别是在子菜单的下一级菜单又存在相当多是...

Ajax收缩级联菜单(实例)

首先添加js文件和css文件 <mce:script type="text/javascript"

Ajax 实例教程

一、什么是Ajax? Ajax = Javascript 和 xml。 Ajax 是一种创建快速动态网页的技术。 通过在后台与服务器进行少量的数据交换,Ajax可以使网页进行异步刷新,这意味着可以在不...

分针网—每日分享: jquery ajax实例教程和一些高级用法

jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个ajax请求都会用到这几个参数,本文将介绍更多jquery...

struts+hibernate+ajax级联菜单

  • 2008-09-03 08:53
  • 165KB
  • 下载

级联菜单 ajax

jquery ajax实例教程和一些高级用法

jquery ajax实例教程和一些高级用法 jquery ajax的调用方式:jquery.ajax(url,[settings]),jquery ajax常用参数:红色标记参数几乎每个aja...

ajax实现级联菜单

  • 2012-10-08 10:50
  • 73KB
  • 下载

java Ajax 级联菜单

  • 2011-05-05 10:27
  • 23KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)