{S0}简介
AJAX的异步JavaScript和XML,是一个免费的框架,用于快速创建一个跨所有最流行的的浏览器的工作更有效,更具交互性,高度个性化的Web体验的新一代。 AJAX是一个相对较新的现象,是不是很新的技术为基础,创建的方式,为企业在互联网上与客户进行互动,。
在这篇文章中,我们使用目前的Ajax技术(在其最简单的方法)来实现对需求的树视图。由于XML是一个通用的标准,易于实现,我在我的示例应用程序,而不是数据库中使用XML。我发现这里的另一篇文章,以建立一个{A}使用AJAX。历史(跳过,如果你感觉无聊本节)
介绍了这项技术首先由微软(我所知)早在1999年,并已作为quot; DHTML / JavaScript的Web应用程序与远程callsquot;该技术的整体思路是允许一个互联网浏览器向远程页面/服务作异步的HTTP调用和更新当前网页收到的结果,而无需刷新整个页面。在创作者的意见,这应该有改善客户体验,使得HTTP页面外观和感觉非常类似于Windows应用程序。
,由于这项技术的核心实现是基于互联网浏览器的功能,实用性当时是非常有限的。几年后,该技术是脱胎换骨这样的巨头,像Google,Amazon.com,eBay等新的浏览器支持和大规模实施
今天,它被称为AJAX,被视为一个自然的一部分,任何先进的用户体验的动态网页。许多现成的框架,也可像的互联网。为什么Ajax
这个示例应用程序提供了一个从XML文件中的树视图的实现。在真实的情景,我已经注意到,建设完整的树结构(与许多水平儿童)和渲染的浏览器需要相当长的时间处理。我尝试不同的方法,其中之一是建设需求树。但我不喜欢后(我相信你太)。后来我发现AJAX是最好的选择。这一点,我们可以避开浏览器的回发和闪烁;,我们只是改变页面的一部分,从而减少了在服务器上的通信,提高性能。工作
的想法是建立一个树状结构,使用UL和LI标签,并使用样式表和一些JavaScript,一起给予一些实实在在的效果。在页面加载或预渲染事件,将加载根节点,点击的加/减的图像,你可以展开或折叠树。你可以看到,子节点是动态生成的(当然,你可以缓存中的数据源)。由于AJAX是异步的,我显示的图像,以表示请求已经向服务器。实施
代码文件包括:TreeSource.XML:定义的源文件树结构。

<?xml version="1.0" encoding="utf-8" ?>
<Nodes>
  <Node NodeID="0" NodeName="World" ParentID="-1"></Node>
  <Node NodeID="1" NodeName="North America" ParentID="0"></Node>
<Node NodeID="13" NodeName="United States" ParentID="1"></Node>
AJAXroutine.js:JavaScript文件包含所有必需的方法来处理异步调用和标准的AJAX方法。 JavaScript是这项技术的核心组件,你可以看到。它可以处理变化检测,数据请求后,放置在页面上的数据。{C}
异步请求的核心功能是:
//The core function to get the xml http request object
function GetXmlHttpObject(){ 
  var objXMLHttp=null
  if (window.XMLHttpRequest){
        ...

的HTML看起来像下面的标签:
<ul id="treeUL" class="treeUL">
  <li id='10'>
  <span title='World' valign='bottom' 
    onclick="javascript:if (Toggle(this))showContentsEx('divTree0','0','');">

客户端跨度将调用下面的函数来调用服务器的请求:
/***********************************************************
//Builds the query string and invoke a request to the server 
//using javascript async call
/***********************************************************/
function showContentsEx(div, str, lmsg){ ...
WebForm1.aspx的样品。aspx文件。它的根级别的硬编码在此示例。我已经把一些样式,使它看起来不错。你就可以建造飞节。WebForm1.aspx.cs:背后的aspx文件的代码。GetTreeContents.aspx:在设计模式中的空白。GetTreeContents.aspx.cs:所有客户端请求的过程这个代码隐藏在浏览器中呈现。当客户端的HTTP请求,下面的脚本将在服务器上执行,呈现在浏览器上的HTML。
private void Page_Load(object sender, System.EventArgs e)
{           
    if (!IsPostBack)
    {
        //id passed thro' the url query string
        string key = Request.QueryString["q"]; 
        if (key != null)
        {
            //read the xml tree file from the web.config file 
            //add the following key in web.config
            //<appSettings>
            //<add key="XmlTree" value=" /TreeSource.XML" />
            String path = Server.MapPath(ConfigurationSettings.AppSettings["XmlTree"]);
            //I use XmlDocument object here to manipulate Xml- You can use other objects
            //You can cache the XmlDocument.OuterXml string
            XmlDocument xmlTree = new XmlDocument();
            xmlTree.Load(path);
            System.IO.StringReader xmlSR = new System.IO.StringReader(xmlTree.OuterXml);
            //If you want to use database driven tree you skip above codes
            //but the columns should be there in the data table
            DataSet ds = new DataSet();
            ds.ReadXml(xmlSR);
            DataView dv = ds.Tables[0].DefaultView;
            //filter for the parent
            dv.RowFilter = " ParentID = '" + key + "'";
            //render the brower with a <UL> tag and <LI> list
            //I have used some styles
            Response.Write ("<ul class='wTreeStyle'>"); 
            //write all the children here
            for(int i=0; i < dv.Count; i++)
            {     
                //formatted <LI> tag - 
                Response.Write (string.Format("<li id='{0}'><span valign='bottom' " + 
                      "title='{1}' onclick=\"javascript:if (Toggle(this))" + 
                      "showContentsEx('divTree{0}','{0}','');\"><IMG  " + 
                      "align='bottom' SRC='plus.gif'> <span class='treeStyleNode' >" + 
                      "{1}</span></span><span id ='divTree{0}'></span></li>", 
                      dv[i]["NodeID"].ToString(), dv[i]["NodeName"].ToString())); 
            }
            Response.Write ("</ul>"); 
        } ...
图片:Loading.gif,plus.gif,minus.gifWeb.config中的:关键
<add key="XmlTree" value=" /TreeSource.XML" />

为方便起见,我只把需要的代码,因为我想分享的实施;可以自定义此或加强它在您的项目。结论
本文旨在说明在任何ASP.NET应用程序中使用AJAX技术的简单性。它的开发者要使用这样的技术。我只是做了一个实际执行的技术,因为核心代码已经到位。我已经测试在微软的Visual Studio五.7 / MDE的2003和MS的应用。NET框架1.1。和C# - ASP.NET。 积分
与上帝的帮助下,我提交这篇文章在这里。我想感谢Codeproject.com社会和一些其他的信息网站,提供了极大的服务。我还要感谢我的同事和朋友的支持,合作,并审阅了本文。
您可以下载文件,我希望它是一个完全的工作之一。大多数读者(我是其中之一)想开始一个很好的样本。我尝试我最好的事业。我希望你会喜欢这个简单的实现。| AJFK

回答

评论会员:游客 时间:2011/12/07
喜非常不错的教程!非常感谢你!它可以添加一个url属性的XML为了每个国家有联系吗?
LanUx
评论会员:游客 时间:2011/12/07
我做了一些狩猎,我会解释的修复,但在这里它是第一个。切换功能(节点){//展开分支,如果它是不可见的如果(node.nextSibling.style){(node.childNodes.length0){(node.childNodes.item(0)的nodeName=="IMG"){如果(node.childNodes.item。src.indexOf(0)("plus.gif")-1){node.nextSibling.style.display="块";node.childNodes.item(0)SRC="minus.gif";返回true;}否则{node.nextSibling.style.display="无";node.childNodes.item(0)SRC="plus.gif";返回false;}}//如果Firefox,检查不同的childnode否则,如果(node.childNodes.item(1)的nodeName=="IMG"){如果(node.childNodes.item。src.indexOf(1)("plus.gif")-1){node.nextSibling.style.display="块";node.childNodes.item(1)SRC="minus.gif";返回true;}否则{node.nextSibling.style.display="无";node.childNodes.item(1)SRC="plus.gif";返回false;}}}}}Firefox使用不同的COM结构,使node.childNode.item(0)。nodeName的等于"img"的在IE浏览器,但"文本"在Firefox。所以我添加了一个额外的,如果案件和田田。
穆罕默德tavakoli
评论会员:游客 时间:2011/12/07
我用这个代码来解决这个问题:切换功能(节点){//展开分支,如果它是不可见的如果(node.nextSibling.style){(node.childNodes.length0){node.firstChild元素=(element.nodeType元素)的元素==1!element.nextSibling;如果(element.nodeName=="IMG"){如果(element.src.indexOf("plus.gif")-1){node.nextSibling.style.display="块";element.src="minus.gif";返回true;}否则{node.nextSibling.style.display="无";element.src="plus.gif";返回false;}}}}}穆罕默德
achille2k
评论会员:游客 时间:2011/12/07
我不能下载...要或不被
LeleHalfon
评论会员:游客 时间:2011/12/07
不会在Mozilla工作
anmolgupta
评论会员:游客 时间:2011/12/07
喜专家,我需要生成一个XML文件,每的web.sitemap是由微软提供的asp.net],并应跟踪文件夹和文件。我的目标是一个树视图显示在客户端根据服务器的文件夹,而无需使用微软的TreeView控件。追踪我很欣赏你的反馈。的问候,Anmol古普塔
Mikudi
评论会员:游客 时间:2011/12/07
大家好,我有此代码用于建设一棵树,但它不是在Mozilla工作因为Mozilla采取换行符和空格,因为它们是我作如下修改切换功能切换功能(节点){//展开分支,如果它是不可见的如果(node.nextSibling.style){(node.childNodes.length0){VARmychild=新的ArrayJ=0;//节点元素类型(的ElementType=1)(VAR我=0;I-1){mychild[1]style.display="块";mychild[0]SRC="minus.gif";返回true;}否则{mychild[1]style.display="无"。mychild[0]SRC="plus.gif";返回false;}}}}}"任何一个要使用的树只需要修改像上面的切换功能,否则其他代码精"为了获取更多在信息{A3}检查了这一点的问候,阿图尔享受编码....{S1}
阿图尔Bhardwaj
评论会员:游客 时间:2011/12/07
,我认为是不完整的代码有一些mising报表。ü会介意完成。

关于作者

ninja_scroll
中国
我是一名编程爱好者,
谢谢orcode.com为我们提供一个学习和分享的平台。
有什么问题。可以就本内容回复,我看到时。会尽量回复的。
或代码 网站备案号:粤ICP备15020848号-1