做完JavaScript DOM Interfaces的培训,写了一个例子,结合XMLHttpRequest用86行代码实现的树形菜单。原理很简单每个节点就是一个div,每点击一个节点的图片就通过XMLHttpRequest把这个节点的所有子节点从jsp文件里装载到父节点的div里。
具体看代码吧
js 代码
-
- var request = null;
-
- var currentNode = null;
- var url = null;
-
- var states = new Array();
-
- function ready(inUrl){
- try{
- request =new XMLHttpRequest();
- }catch(e){
- request =new ActiveXObject("Microsoft.XMLHTTP");
- }
- request.onreadystatechange=loadNode;
- url=inUrl;
- }
-
- function loadNode(){
- if(request.readyState==4){
- if (request.status == 200||request.status == 0) {
-
- var newContent = request.responseText;
-
- dataHit = document.getElementById("dataHit");
- if(dataHit!=null)
- currentNode.removeChild(dataHit);
-
- content=document.createElement("div");
- content.setAttribute("luck","true");
- content.innerHTML = newContent;
- currentNode.appendChild(content);
- }
- }
- }
-
- function loadTree(url,id){
- ready(url);
- var sel = document.getElementById(id);
-
- currentNode = sel;
- open(id);
- }
-
- function doclick(id){
- var sel = document.getElementById(id);
- currentNode = sel;
- if(states[id]=="opened"){
- close(id);
- states[id]="closed";
- }else{
- open(id);
- states[id]="opened";
- }
- }
-
- function open(id){
-
-
- dataHit=document.createElement("div");
- dataHit.setAttribute("id","dataHit");
-
- text=document.createTextNode("正在装载数据...");
- dataHit.appendChild(text);
- currentNode.appendChild(dataHit);
- try{
- img = document.getElementById("img"+id);
- img.setAttribute('src',"img/folderopen.gif");
- }catch(e){}
-
- ready(url);
-
- request.open('GET',url+"?id="+id+"&randnum=" + Math.random(),true);
- request.send(null);
- }
-
- function close(id){
-
- allnodes=currentNode.getElementsByTagName("div");
- for(var i=0;i
- currentNode.removeChild(allnodes.item(i));
- }
-
- img = document.getElementById("img"+id);
- img.setAttribute('src',"img/folder.gif");
- }
使用的html代码
xml 代码
- >
- <HTML>
- <HEAD>
- <TITLE> 动态树 <!---->TITLE>
- <link rel="StyleSheet" href="tree.css" type="text/css" />
- <script type="text/javascript" src="tree.js"><!---->script>
- <!---->HEAD>
- <BODY>
- <div id="tree">
- <!---->div>
- <SCRIPT LANGUAGE="JavaScript">
- <!---->
- loadTree('treenode.jsp','tree');
- //-->
- <!---->SCRIPT>
- <!---->BODY>
- <!---->HTML>
最后,十分偷懒的jsp代码
贴代码太麻烦
放附件里了
分享到:
相关推荐
JSP XMLHttpRequest动态无刷新及其中文乱码处理.docx
ajax XMLHttpRequest。。。。。。
在使用XMLHttpRequest对象发送请求和处理响应之前,必须先用JavaScript创建一个XMLHttpRequest对象。由于XMLHttpRequest不是一个W3C标准,所以可以采用多种方法使用JavaScript来创建XMLHttpRequest的实例。Internet ...
XmlHttpRequest详解XmlHttpRequest详解XmlHttpRequest详解
需要重点说明的是,XMLHttpRequest并不是一个W3C标准,不过许多功能已经涵盖在一个新提案中:DOM Level 3加载和保存规约(DOM Level 3 Lo Asp.net Ajax UpdatePanel.Triggers 属性 属性值 类型:System.Web.UI..::...
在源网页加载之前,实现一个XMLHttpRequest的代理对象,然后覆盖全局的XMLHttpRequest,这样一但上层调用 new XMLHttpRequest这样的代码时,其实创建的是Ajax-hook的代理对象实例
XMLHttpRequest使用小例子,将值异步传递,纯JS实现
XMLHttpRequest 实例 基于MyEclipse的一个工程 里面有很多短小的实例 一个一个说明XMLHttpRequest 的用法 对初学者很有帮助
学习XMLHttpRequest写的几个实例,希望对新手有点帮助。
填《GWT揭秘》中8.1节中--GWT中的XMLHTTPRequest:请求动态数据的代码,
全面剖析Ajax XMLHttpRequest对象
XMLHTTPREQUEST对象创建,交互,回调底层代码。。。
使用XMLHttpRequest访问Web Services(ASP.NET Web)
在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest 对象,前面的请求还未完成,后面的就会把前面的覆盖掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费。解决的办法就是创建...
详解Ajax的核心对象XmlHttpRequest
XMLHttpRequest中文参考手册
快速理解XMLHttpRequest对象使用,理解ajax的使用原理
xmlHttpRequest对象的status代表当前http请求的状态,是一个长整型数据,现在介绍一下它的含义。 http请求状态及其含义表 1xx - 信息提示 100 - 初始的请求已经接受,客户应当继续发送请求的其余部分。(HTTP 1.1...
全面剖析XMLHttpRequest对象 全面剖析XMLHttpRequest对象