Ajax应用—构造动态载入.ppt

第23章 Ajax应用构造动态载入节点的树,上一章讲述了“Ajax”的基本概念，以及如何用“XMLHTTP”控件实现和服务器的数据交换。通过“Ajax”技术，可以很方便的实现和服务器的通信，从而扩展出无刷新表单提交、动态载入等提高用户体验的效果。本章将进一步延伸“Ajax”的应用，演示如何使用此技术构造一个动态载入节点的树。,23.1 轻量级的数据交换认识“JSON”,正如上一章所说，“Ajax”的本质是非同步的与服务器的通信。因此“Ajax”技术中，传输的数据格式并不仅仅局限于“XML”标准。“JSON”就是一种可以用于替代“XML”的轻量级数据交换格式。,23.1.1 什么是“JSON”,“JSON”的全称是“JavaScript Object Notation”，即JavaScript对象符号，是一种轻量级的数据交换格式，易于阅读和编写，同时也易于机器解析和生成。其基于ECMA262语言规范（1999-12第三版）中JavaScript编程语言的一个子集。JSON采用与编程语言无关的文本格式，但是也使用了类C语言（包括C、C+、C#、Java、JavaScript、Python等）的习惯，这些特性使JSON成为理想的数据交换格式。 JSON建构于两种结构： （1）“名称/值”对的集合。不同的语言中，其被理解为对象（“object”）、纪录（“record”）、结构（“struct”）、字典（“dictionary”）、哈希表（“hash table”）、有键列表（“keyed list”）或者关联数组（“associative array”）。 （2）值的有序列表。在大部分语言中，其被理解为数组（“array”）。 这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。,23.1.2 “JSON”的基本格式,不同类型的变量转换为“JSON”格式的方式稍有不同。 （1）将数值型、布尔型变量和函数对象转换为“JSON”格式非常简单，不需要做任何处理， （2）将字符串型变量转换为“JSON”格式时，需要先处理其中的某些特殊字符。例如双引号、单引号和回车、换行符，将其替换为反斜杠“”转义后的字符，然后用引号将转换后的内容括起来。代码如下： return(“+obj.replace(/(“)/g,“$1“).replace(/r/,“r“).replace(/n/,“n“).replace(/t/,“t“)+“); （3）将日期时间型变量转换为“JSON”格式时，需要将其进行特殊处理，代码如下： return(“(new Date(“+obj.toUTCString()+“)“); （4）将正则表达式转换为“JSON”格式时，通过此对象的“source”获取其内容。不仅仅需要处理“source”中的特殊字符，还需要注意设置其“global”，“ignoreCase”和“multiline”属性，代码如下： return(“(new RegExp(“+String(obj.source).replace(/(W)/g,“$1“)+“, “+(obj.global?“g“:“)+(obj.ignoreCase?“i“:“)+(obj.multiline?“m“:“)+“)“); （5）将数组对象转换为“JSON”格式时，递归调用“toJSONString”函数依次序列化其中的每个元素，然后将获得的各个字符串用逗号连接，在最外围用方括号“”将其括起来，代码如下： var re = new Array(); for(var i=0; iobj.length; i+)re.push(toJSONString(obji); return(“ + re.join(“, “) + “); （6）将“Object”对象转换为“JSON”格式时，做法与数组对象类似，同样需要通过递归调用来依次处理其中的每个组成元素。此外，需要注意的是，其组成元素序列化时，需要构成名值对的形式。 re = new Array(); for(var i in obj)re.push(indent + “t“ + toJSONString(i, “t“ + indent) + “: “ + toJSONString(obji, “t“ + indent); return(“rn“ + re.join(“,rn“) + “rn“ + indent + “);,23.1.3 “JSON”的优缺点,对于“JSON”，首先要明白“JSON”和“XML”一样也是一种简单文本格式。相对于“XML”，其更加易读、更便于肉眼检查。在语法的层面上，“JSON”与其他格式的区别是在于分隔数据的字符，“JSON”中的分隔符主要限于单引号、小括号、中括号、大括号、冒号和逗号。例如下面的“JSON”数据： “name“: “hutia“, “age“: 26, “male“: true, “laugh“: function() alert(“I am laughing.“); , “createDate“: (new Date(“Mon, 2 Jun 2008 15:11:04 UTC“), “isScriptBlock“: (new RegExp(“, “gi“), “lover“: “name“: “axiang“, “male“: false, “age“: 22 ,23.2 JavaScript实现导航树设计与Ajax,导航树是Windows等图形界面操作系统中常见的概念，其可以很方便的实现大量信息的分类显示。例如Windows操作系统中，资源管理器在显示文件夹的时候就是使用导航树作为交互的界面。在Web设计的时候，导航树因其对数据分类显示的能力，同样得到了广泛的应用。例如MSDN的知识库就是使用树状结构作为导航的。,23.2.1 树的数据结构,要构造导航树，首先应该理解数据结构中树的概念。 树是n（n大于或等于0）个结点的有限集。在任意一棵非空树中： （1）有且仅有一个特定的称为根的结点。 （2）当n1时，其余结点可分为m（m0）个互不相交的有限集T1,T2,.Tm,其中每一个集合本身又是一棵树,并且称为根的子树。 树的结点包含一个数据元素及若干指向其子树的分支。结点拥有的子树数称为结点的度。度为0的结点称为叶子或终端结点。度不为0的结点称为非终端结点或分支结点。树的度是树内各结点的度的最大值。 结点的子树的根称为该结点的孩子，相应地，该结点称为孩子的双亲。同一个双亲的孩子之间互称兄弟。结点的祖先是从根到该结点所经分支上的所有结点。以某结点为根的子树中的任一结点都称为该结点的子孙。,23.2.2 导航树的页面结构,在制作JavaScript效果前，应该先规划需要实现的功能和可能的对象结构。Web页面中的导航树需要实现的功能样式为： （1）按照指定的样式显示树的节点，例如图标、节点标题内容等。 （2）树的子节点相对于父节点具有指定的缩进，用于区分不同层级的节点。 （3）每个节点可以相应鼠标的动作，鼠标移入或移出时会有相应的样式变化。在节点上单击鼠标可以选中节点。 （4）在父节点上的文本上双击鼠标左键，或者单击节点中的图标，则可以显示或隐藏其子节点。,23.2.3 代码实现“Ajax”部分（一）,代码23-2 xmlhttp.js是导航树效果的一部分，用于提供“Ajax”的功能。此文件隐藏了“Ajax”的实现细节，提供了简单的调用接口。 注意：省略了部分代码，详细代码参见随书光盘。 23-2 xmlhttp.js 导航树效果“Ajax”功能模块 /XMLHTTP对象 function xmlhttp() /声明西游变量 var aryArgu, aryOnPropertyChange_AttachedEvents, aryRequestHeaders, blnAsyn, objRequest, objSelf, objThat, strMethod, strProtocol, strToBeSend, strUID, strUrl; /声明私有方法 var defaultEvent_onreadystatechange, getXMLRequester, init, realEvent_onreadystatechange, uid; /声明公共属性 this.blnSendDefaultHeader=false; this.readyState=0; this.responseText=“; this.responseXML=“; this.status=-1; /声明公共事件 this.onreadystatechange=defaultEvent_onreadystatechange;,23.2.4 代码实现“Ajax”部分（二）,下面的函数“multiThreads_xmlhttp”构建一个多线程的“Ajax”对象。在实际应用的时候，由于“Ajax”的非同步特性，很可能在前一个操作还没有彻底完成时，就需要执行下一个“Ajax”应用。因此多线程的“Ajax”就成为必须。 function multiThreads_xmlhttp(intThreadsCount) /定义常数 var MAX_THREADS=20; /声明私有变量 var aryThreads, intCurrentTaskID, intThreadsCount, intCheckingTimeoutHandle, objThat, strReadyState, strStatus; /声明公共属性 this.tasks=new Array(); this.tasks._push=this.tasks.push; this.tasks.push=function(strMethod,strUrl,blnAsyn,aryHeaders,strSend,intMaxErr,onloadsuccess,onloadfail,blnWait) var newTask=new task(strMethod,strUrl,blnAsyn,aryHeaders,strSend,intMaxErr,onloadsuccess,onloadfail,blnWait); this._push(newTask); return(newTask); ,23.3 JavaScript实现导航树DOM构建与事件方法,在编写复杂的脚本时，应将代码分为若干部分依次解决。例如本例中，导航树的HTML功能部分，就可以再细分为全局变量、构造DOM结构、实现DOM事件、增加自定义方法和其他杂项函数。,23.3.1 导航树的全局变量与DOM构造函数,代码23-2 tree.js是HTML导航树效果的一部分。 23-2 tree.js HTML树的DOM构造 / global static definition IMG_EMPTY=“inc/js_tree_img/empty.gif“; IMG_FOLDER=“inc/js_tree_img/folder.gif“; IMG_FOLDER_OPEN=“inc/js_tree_img/folderopen.gif“; /*部分细节代码省略*/ IMG_PLUS_BOTTOM =“inc/js_tree_img/plusbottom.gif“;,23.3.2 HTML导航树的事件和自定义方法,function tree_caption_onclick() this.parentNode.collapse(); if(this.parentNode.selected)return; if(this.parentNode.root.selectedTreeNode)if(!this.parentNode.root.selectedTreeNode.selected)this.parentNode.root.selectedTreeNode.caption.className=“tree_caption“; this.className=“tree_caption_active“; this.parentNode.root.selectedTreeNode=this.parentNode; 树节点标题被鼠标左键单击后，调用函数“tree_caption_onclick”，切换其子节点的隐藏或显示，并且设置此节点为选中状态，改变其样式。 function tree_caption_onmouseover() /*部分细节代码省略*/ function tree_caption_onmouseout() /*部分细节代码省略*/ function tree_caption_select(bln) /*部分细节代码省略*/ ,23.3.3 在HTML页面中使用导航树,在完成了上面的“ tree.js”与“xmlhttp.js”函数部分后，在页面中使用导航树就变得非常简单。代码.htm是一个使用导航树的例子。 代码.htm JavaScript导航树 23-2 JavaScript导航树 / This script is used for demo window.onload=function() var t1=tree_create(); document.body.appendChild(t1); t1.load(“inc/data/23-2 testJSO