Ajax技术在疗养院信息系统目录树菜单中的应用

陈燕群　张华贵

摘要：随着网络技术，WEB技术的高速发展，网页上的动态交互与感知已经被越来越多的用户所喜欢并接受，原来只有在客户端程序才能实现的交互与动态响应，现在利用JavaScript和Ajax技术也能在WEB程序中实现了。通过这两种技术的结合，使得开发者构建的WEB程序能够像WINDOWS中的桌面程序一样自由、丰富、更好的响应用户，而不用每次都需要提交页面，刷新后才能看到结果。文章通过对Ajax技术的开发研究，成功地运用到疗养院信息系统中，提高了页面的响应速度。

关键词：Ajax技术；JavaScript；WEB信息系统

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2017）22-0114-02

Ajax的全称是Asynchronous iavascript and XML其中，Asyn-chronous的意思是异步，这是一种利用异步调用的方式解决WEB页面局部刷新的技术，无论你的浏览器是哪种，它都可以很好的执行，而服务端的开发语言无论是PHP、ASP、JSP、.NET等语言开发的WEB程序都能很好地融合到里面。异步交互的意思就是：利用iavascript来技术实现浏览器和服务器间的数据交互，就是页面程序无需重新载入或刷新，就可以向服务器端发送请求，服务器端响应后返回所需数据，返回的数据可以是XML、文本、JsON等格式，利用iavascript对返回的数据进行解析和处理，显示在用户界面。

1Ajax技术及其核心对象

我们都知道Ajax使用的是JavaScript技术，这是一种客户端使用的脚本语言，在网页中应用比较广泛，而且支持跨平台运行。Ajax主要是利用JavaScript和XMLHttpRequest核心对象，发及DOM、XML、JSON来响应和操作数据。

1.1Don

DOM就是英文（Document Object Model）的缩写，全称叫文档对象模型，它提供了整个网页文件内容的表述结构。通过DOM，浏览器把页面看做是一组对象，程序员就可以操作对象中所有的成员，如建立或更改对象中成员的名称、ID、响应的事件，甚至通过与脚本语言的结合可以实现动态数据显示、隐藏、存储，增加或者修改成员，使得网页与用户的交互性大大增强。

1.2XML

DOM就是英文（Extensible Markup Language）的缩写，全称叫可扩展标记语言，这是一种标准的通用的一种标记语言，用于将电子文件进行结构化标记，并且标记的数据或文档可以很方便地进行数据共享，而且它是一种跨平台的标记语言，使得程序员可以在各种环境中进行程序开发并共享其数据。

1.3JSON

JSON就是英文（JavaScript Object Notationl的缩写，它是一种轻量级的数据交换格式，说得直白一些，它就是将一组数据以标准化的方式返回给程序员，这种标准化的格式易于阅读和编程，通过Ajax返回的这种JsON数据，能够更快的被解析和渲染，响应速度更快。

1.4XMLHttpRequest

XMLHttpRequest是Ajax技术的核心对象，它是通过浏览器中的JavaScript脚本程序来与服务器进行通信，并且在页面不刷新时就可以获取到服务器数据，并返回给用户的页面端，也可以直接向服务器提交数据。

通过上面几种技术的混合运行，就可以完全实现Ajax，并实时操作用户端页面。

2建立Ajax应用代码分析

对于一个Ajax程序来说，有些代码是必要的，即便你使用JQUERY或别的JAVASCRIPT框架，其中依然要使用类似下面这些代码。下面我们来看这个函数：

在Ajax请求对象中，有一些专用的属性，这里来介绍一下常用属性的作用和功能。

readyState：服务器处理请求时会作出多次响应，这个属性用来指示请求处理的情况。共有四种情况，0表示未初始化，尚未调用open（）方法；1表示启动，尚未调用send（）方法；2表示已发送，但尚未收到响应；3表示接收，已经收到部分响应数据；4表示已完成，收到全部响应数据。

responseXML：如果服务器将数据作为XML发回来，这个属性表示发回的数据格式包含XML的树形结构，其中也包含服务器的响应。

responseText：服务器的响应数据会存储在responseText中，也就是文本文件了。

status和statusText：这两个属性用来告诉你的服务器所返回的HTTP的状态，如果是200，就表示“OK”，服务器已准备就绪了，如果是404就表示“未找到”，服务器无法找到所需请求的URL地址。

orrreadystatechange：这个属性用于执行服务器响应请求时需要的回调函数。

下面，我们就来具体分析Ajax技术在疗养院信息系统的读取目录树的主要应用方式。

3疗养院信息系统目录树的研究分析

在疗养院信息系统中，目录树的显示方式如下图所示：

首先，我们来分析一下为何要在目录树里采用Ajax技术，在这个信息系统的目录树中，每个疗养员都有相同的各种检查记录功能，通过权限的设置可以增加或删除其权限菜单，有时不同的医师具有不同的权限菜单，多的时候可能会多达二十多种功能。如果疗养员的人数较多，如有时多达二百多人时，所有人的功能菜单相加起来就会很庞大，提取数据速度会很慢，有时多达十分多钟，为了改变这种方式，所以采用Ajax技术，首先将每个疗养员提取出来，然后再点击每个“+”加号，动态载入所需的功能菜单，通过这种方式，大大节约了浏览器载人页面的时间，也减少了网络开销，原来需要十多分钟载人的页面，现在几秒钟就可以完全载人了。

数据库系统我们使用的是ORACLEllg，由于目录树中的功能菜单层级比较多，所以设计时按照下图来设计：

NO序号为顶層节点，NAME为节点的名称，PARENTNO为父节点，也就是它的上一级菜单的NO号，DISPLAY_ORDER为显示的序号，序号越小显示位置越靠前。MODELID数据库中的模板号，本项功能菜单的模板。URL本项功能菜单的地址。FLAG执行标志，DEFT能够执行此项功能的科室。对于目录树的顶层疗养员姓名，通过数据库的SQL查询语句可以一次性取出来，目录树的功能菜单则通过NO和PARENTNO序号使用递归算法来提取出父子关系放入一个视图中，然后根据需要提出异步Ajax请求，在需要时返回子功能菜单名称以及URL地址，这样就完成了整个目录树的异步请求，并成功读取各级子菜单功能。endprint