`
water84222
  • 浏览: 375427 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

ajax实现的动态展开

阅读更多
  • test.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
	<title></title>
	<script type="text/javascript" src="js/ajax.js"></script>

</head>

<body>
	<div id="title">
			<img src="img2/plus.gif" onclick="doOpen(this)"/>
			<span>title</span>
			<input type="hidden" id="flag" value="0"/>
	</div>
	<div id="content">
	</div>
</body>

</html>

  • ajax.js

function GetXmlHttpObject()
{
  var xmlHttp=null;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    }
  return xmlHttp;
}
	
function doOpen(img){
  if(document.getElementById("flag").value=="0"){
		var xmlHttp=GetXmlHttpObject();
		if (xmlHttp==null)
		{
			alert ("AJAX初期化失敗!");
			return;
		}
		
		var url="response.html";//+"&random="+Math.random();
		
		xmlHttp.onreadystatechange=function()
		      {
		      if(xmlHttp.readyState==4)
		        {
		         	var temp = xmlHttp.responseText;
		         	document.getElementById("content").innerHTML = temp;
		         	img.src="/Tree/img2/minus.gif";//工程中目录
		         	document.getElementById("flag").innerText = 1;
			         
		        }
		      }
		xmlHttp.open("GET",url,true);
		xmlHttp.send(null);
	}
	else{
		document.getElementById("content").innerHTML = "";
		img.src="/Tree/img2/plus.gif";
		document.getElementById("flag").innerText = 0;
	}
}

  • response.html

随便写点什么content
分享到:
评论

相关推荐

    ajax实现的动态树菜单

    "Ajax实现的动态树菜单"则是利用Ajax(Asynchronous JavaScript and XML)技术来实现实时、无需页面刷新的数据加载和交互。 Ajax的核心在于异步通信,它允许网页部分更新,而不是整个页面刷新。通过在后台与服务器...

    ajax实现的动态导航条

    总的来说,"ajax实现的动态导航条"是一个结合了HTML、CSS和JavaScript(特别是AJAX)技术的实用案例,它展示了如何利用前端技术实现动态交互和高效的数据加载,为用户提供更加顺畅的浏览体验。在实际开发中,这样的...

    Ajax技术实现动态获取数据的树状菜单

    在本示例中,"Ajax技术实现动态获取数据的树状菜单"是一个具体的实践应用,主要目标是创建一个动态加载数据的树状菜单,用户可以在不刷新页面的情况下查看和操作数据。 首先,我们来了解树状菜单的基本概念。树状...

    jsp+ajax实现动态树结构

    下面将详细阐述如何使用JSP和Ajax实现动态树结构以及涉及的相关知识点。 首先,JSP是Java的一种视图技术,它允许开发者在HTML页面中嵌入Java代码,从而实现服务器端的数据处理和动态内容生成。在动态树结构的实现中...

    AjaxTree实现动态加载

    在IT领域,AjaxTree是一种利用Ajax技术实现的动态加载树形结构数据的解决方案。Ajax(Asynchronous JavaScript and XML)的核心在于无需刷新整个页面就能与服务器交换数据并更新部分网页内容,提高了用户体验。在这...

    利用Ajax实现动态加载树

    在实际应用中我们经常会用到树,无论是用javascript实现还是用TreeView等控件,都能很好的...为了解决这个问题,我曾经在项目里利用Ajax来动态加载节点,即开始只显示必要的节点,当用户展开树的时候再加载对应的节点......

    Ajax+jsp+MySQL实现动态树形菜单

    总结起来,"Ajax+jsp+MySQL实现动态树形菜单"是一个典型的前后端交互实例,它结合了前端的动态加载和后端的数据处理,通过数据库存储数据,利用Ajax实现无刷新加载,使用JSP处理服务器逻辑,最终为用户提供一个高效...

    Ajax+jsp+oracle实现动态树形菜单

    总结,这个项目展示了如何整合前端的Ajax技术和后端的JSP处理,结合Oracle数据库,实现动态树形菜单的功能。它涉及到Web开发中的数据交互、服务器端逻辑处理、数据库操作等多个重要环节,对于提升Web应用的交互性和...

    AJax Jquery实现的动态树实例

    本实例重点讲解如何利用Ajax和Jquery技术来创建动态树,提供不同风格、样式和功能的实现方法。下面将详细阐述相关知识点。 一、Ajax(异步JavaScript和XML) Ajax的核心是通过JavaScript实现页面的局部刷新,无需...

    用AJAX实现目录树(asp)

    在IT行业中,Ajax(Asynchronous JavaScript and XML)技术被广泛应用于构建动态、...通过学习和理解这些代码,你可以更好地掌握如何在ASP环境中运用Ajax实现动态目录树。记住,实践中不断调试和优化是提升技能的关键。

    Ajax实现分页查询

    总结起来,Ajax实现分页查询涉及客户端JavaScript的Ajax请求、服务器端JSP的处理以及前端的数据解析和展示。通过这种方式,你可以为用户提供流畅的分页体验,同时避免了页面的全量刷新。在实际项目中,还可以结合...

    ajax,servlet动态加载dtree

    在本项目"ajax,servlet动态加载dtree"中,我们看到的是利用Ajax技术和Servlet实现dtree(一种树形菜单控件)的动态加载。这个项目可能是一个文件管理系统或者目录浏览应用,其中dtree用于展示文件或目录结构,而...

    AJAX动态树形目录

    在本项目中,"AJAX动态树形目录"利用AJAX与XML数据格式,实现了网页上动态显示和交互的树状目录结构。树形目录通常用于文件系统、网站导航或者组织层次结构信息,它通过节点的展开和折叠,使得用户可以方便地浏览和...

    Ajax动态树型菜单

    在本文中,我们将深入探讨Ajax动态树型菜单的原理、实现方法以及相关技术。 首先,我们需要理解Ajax的核心理念。Ajax允许网页部分内容的异步更新,通过后台与服务器交换数据并局部更新页面,而无需用户手动刷新。这...

    动态树的AJAX实现

    下面将详细探讨动态树的AJAX实现及其相关知识点。 1. **动态树结构**: 动态树是一种可展开和折叠的多级列表,每一级都是一个节点,可以包含子节点。用户可以通过点击节点来展开或关闭其子节点,展示或隐藏相关...

    用AJAX实现的级联菜单

    AJAX(Asynchronous JavaScript and XML)技术可以有效地实现级联菜单的动态加载和交互,无需刷新整个页面即可获取并显示数据。 **AJAX** 是一种在不重新加载整个网页的情况下,与服务器交换数据并更新部分网页的...

    树型菜单AJAX实现

    在本主题“树型菜单AJAX实现”中,我们将探讨如何利用AJAX来动态加载和操作树型菜单。 1. **AJAX基础** AJAX的核心是JavaScript的XMLHttpRequest对象,它允许在后台与服务器交换数据并更新部分网页,而无需重新...

    ajax实现级联菜单的类子

    通过以上步骤,我们就可以利用Ajax实现一个从数据库动态获取数据的级联菜单。这种技术在实际项目中非常常见,因为它提供了流畅的用户体验,减少了不必要的页面刷新,提高了网页的交互性和效率。在开发过程中,应注重...

Global site tag (gtag.js) - Google Analytics