Go homepage(回首页)
Upload pictures (上传图片)
Write articles (发文字帖)

The author:(作者)归海一刀
published in(发表于) 2014/3/16 2:51:56
Ajax实例教程-----级联菜单_[AJAX教程]

Ajax实例教程-----级联菜单_[AJAX教程]

















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









cellSpacing=0 cellPadding=0 width=200 bgColor=#f5efe7 border=0>





指标操作


onClick="showSubMenu('A')">一级指标A





onClick="showSubMenu('B')">一级指标B









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("");
out.println("" + contents1 + "");
out.println("" + contents2 + "");
out.println("
");
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)方法.




来源:CSDN

























If you have any requirements, please contact webmaster。(如果有什么要求,请联系站长)





QQ:154298438
QQ:417480759