AJAX示例应用-2（两级菜单的联动）-方式3（服务器返回XML数据，真正的AJAX应用）

原创于 2008-02-10 15:32:00 发布 · 933 阅读

·

0

·

本内容遵循CC 4.0 BY-SA版权协议

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

收录于

技术文档

本文介绍了一种使用AJAX技术和XML数据格式来实现网页中动态二级下拉菜单的方法。当用户选择一级菜单项时，通过AJAX异步请求获取对应的二级菜单项，并利用JavaScript解析返回的XML数据更新二级菜单选项。

1.先来JavaScript：

<script type="text/javascript">

var req;

function changeCategory() {

var id = document.form2.category1.options[document.form2.category1.selectedIndex];

var url = "getsecondcategories_3.jsp?id=" + escape(id.value);

if(window.XMLHttpRequest) {

req = new XMLHttpRequest();

} else if (window.ActiveXObject) {

req = new ActiveXObject("Microsoft.XMLHTTP");

}

req.open("GET", url, true);

req.onreadystatechange = callback;

req.send(null);

}

function callback() {

if(req.readyState == 4) {

if(req.status == 200) {

parseXML(req.responseXML);

}

}

}

function parseXML(xml) {

var categories = xml.getElementsByTagName("categories")[0];

document.form2.category2.length = categories.childNodes.length + 1;

document.form2.category2.selectedIndex = 0;

document.form2.category2.options[0].value = '-1';

document.form2.category2.options[0].text = '二级子目录';

for(var i=0; i<categories.childNodes.length; i++) {

var category = categories.childNodes(i);

var id = category.childNodes[0].childNodes[0].nodeValue;

var name = category.childNodes[1].childNodes[0].nodeValue;

document.form2.category2.options[i+1].value = id;

document.form2.category2.options[i+1].text = name;

}

}

</script>

2.getsecondcategories_3.jsp：（返回XML数据，再在客户端解析该数据）

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>

<%@ page import="com.ycringfinger.shopping.*" %>

<%

response.setContentType("text/xml");

response.setHeader("Cache-Control", "no-store");

response.setHeader("Pragma", "no-cache");

response.setDateHeader("Expires", 0);

request.setCharacterEncoding("GB18030");

int id = Integer.parseInt(request.getParameter("id"));

Category category = Category.loadById(id);

List<Category> categories = category.getChilds();

StringBuffer buf = new StringBuffer();

buf.append("<categories>");

for(int i=0; i<categories.size(); i++) {

Category c = categories.get(i);

buf.append("<category><id>" + c.getId() + "</id><name>" + c.getName() + "</name></category>");

}

buf.append("</categories>");

buf.insert(0, "<?xml version='1.0' encoding='gb18030'?>");

response.getWriter().write(buf.toString());

%>

标签

#ajax #xml #服务器 #xmlhttprequest #callback

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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