研究与开发第17卷第1期RESEARCH AND DEVELOPMENT路Vol 17 No 11文章编号:1005-8451(2008)11-001604Ajax技术应用的研究陈丽军,罗省贤,李敏(成都理工大学信息工程学院,成都610059)摘要:Ajax技术的出现改变传统Web应用程序的开发模式,揉脱传统Web应用程序不连贳的网络交互方式。讨论Ajax技术的概念,开发模式,工作方式以及开发步骤,结合JSP技术实现Ajax的几种典型应用。关謎词:Web应用程序;开发模式;Ajax;异步屮图分类号:TP312文献标识码:AResearch on application of Ajax technologyCHEN Li-jun, LUO Sheng-xian, LI Min(School of Information Engineering, Chengdu University of Technology, Chengdu 610059, China)Abstract: As a new approach to Web applications, Ajax had changed the incoherence of the interaction model oftraditional Web application. It was introduced the definition, development mode, the principle and the development steps ofAjax technology. Combined with the JSP technology, it was implemented some typical Web applications of Ajax technologyKey words: Web application; development model; Ajax: asynchronousAjax是一种Web应用程序开发的手段,它采用传统的Web应用程序采用同步交互过程:用户客户端脚本与Web服务器交换数据。使用Ajax,可先向Web服务器发出一个请求,web服务器响应以创建更加丰富、更加动态的web应用程序用户再向用户返回一个 HTML/XHTML页面。这是一种不界面,其即时性与可用性甚至能够接近桌面应用程连贯的用户体验,服务器在处理请求的时候,用户序。对用户而言,Ajax意味着更好的用户体验;对多数时间处于等待的状态,屏幕内容也是一片空白。开发人员而言,Ajax将代替传统的Web开发方式,2.2Ajax的开发模式称得上是Web技术发展中的一个里程碑。Ajax在用户与Web服务器之间引入一个中间层,即Ajax引擎。并不是所有的用户请求都提交给Ajax概念服务器,一些数据的验证和处理由Ajax自己来做,只有确实需要从服务器读取新数据时,才由客户端Aa不是一项新技术,只是多种技术的综合,包通过 JavaScript调用Ajax引擎,向服务器端发出HItp括 Javascript、 XHTML、CSS、XML、XSTL、DOM和请求,但它并不等待请求的响应,用户可以继续浏XmlhTtprequEst等技术。其中:览或交互。当服务端的数据返回时,Ajax引擎接收(1)使用 XHTML、XSTL和CSS实现标准化的数据,并指定 JavaScript函数来完成相应的处理或页呈现界面;(2)使用DOM实现动态的显示和交互;面的更新,而不是刷新整个页面,从而实现用户操(3)使用 XmlhtTp Request实现与服务器的异步通作与服务器响应的异步化。图1和图2分别表示了信,(4)使用 Javascript将 XHTML、DOM、XML和Ajax应用模型和Ajax传输过程。XmlhTtp Request绑定。23Ajax的工作方式及工作流程Ajax的工作方式,如图3。其工作流程如下2Ajax技术核心1)页面初始化。用户输入一个URL地址,或者单击打开一个超连接,Web页面在浏览器呈现,21传统的Web开发模式完成中国煤化工收稿日期:20080627户操作Web页面上作者简介:陈丽军,在读硕士研究生,罗省贤,教授CNMHG个aspt事件第17卷第11期Ajax技术应用的研究研究与开发览器客户端(7)页面被更新,一次Ajax处理过程结束HTMLACSS数HTTP请求HTMIACSS数据3使用Ajax开发的步骤web服务器数据库等持久化数据(1)初始化 XmlhTtprequEst对象http_request=newXmlhTtprequEsto;//moZilla图1Ajax应用模型浏览器了用户行为http-_request=newActivexobject("msxm12XmlhtTp")HIE浏览器(2)指定响应函数 callback客户端处Ajax引擎http_request.onreadystatechange=callback(3)发出http请求http_request.open(method,urltrue)数据传输数据传输数据传输http_request.sendo;(4)在响应函数中处理服务器返回信息,异步七处严Web服务器更新页面把以上每步封装成函数,则可以开发出一个框图2Ajax传输过程架Ajax开发框架ajax_ frame. js,以实现代码复用。我们可以根据自己的需要,重新编写回调函数call-, Javascript I用XMLH中 rEques对象发起异步请求back,以处理自己的业务逻辑[m户界曲卜M绑了则中为总]:4Aj的典型应用1使用HTM新1 mML,XHTML内!文本总!14.1吏新多级下拉列長框在Web页面中经常需要提供多级(两级或更图3Ajax的工作方式多)的下拉列表框。后级下拉列表框内容根据前级状态而改变。传统的方法是在页面初始化时将全部(3) Javascript事件处理函数执行,调用XML列表框内容一起载入,在页面上生成多级的目录。Http Request对象。 Javascript事件被触发,相应的事当用户选择的时候,再根据情况更新相应下拉列表件处理函数即被调用。在这个函数中, XmlhtTp框的内容。或者将全部目录保存在一个 Javascript文Request对象被初始化,并根据情况向服务器发出件中,必要的时候再更新。异步通信请求,将用户的请求提交到服务器;应用Ajax,可以在页面初始化时只初始化第1(4)服务器接收用户请求。这个过程与传统级下拉框列表,后级下拉框中的内容根据其前级的Web应用程序交互模式一致。服务器收到用户请求选择状态再向服务器请求获取。图4为采用Ajax实后,根据URL判断用户行为,响应用户行为,并以现的下拉列表框HTMLIXHTML/XML的形式打印出来(5) XmlhtTprequeSt接收服务器响应数据。请选择学院请选择专业XmlhtTp Request检测到服务器已将响应结果打印调选择学院工程学院出来(即将响应结果以文本或XML文档的形式返外国语学院回),赋予某个 Javascript变量(假定变量名为: returm地球科学学院Value).中国煤化工(6) Javascript调用DOM处理 return Value,更新页面内容,CNMHG列表研究与开发铁路计算机应用第17卷第l以下是基于JSP的两级下拉列表(学院和专业)成都理工天学Ajax实现关键代码片段匚自动化学院for(vari=0< classList length-1;i++){∥将专业信移技和息加入第2级下拉列表中var temp= Trim(classList[i]).split(",")自动控制f. select12 add(new Option(temp[1], temp[OD)); I4.2数锯校验地球科学学院在输入表单内容时,常常需要保证数据的唯一性。使用Ajax,这个校验请求可以 XmlhTtprequEst图6釆用Ajax实现级联菜单对象发出,整个过程不需要弹出新窗口,也不需要以下是实现此级联菜单的关键代码:将整个页面提交到服务器,只要将返回结果用Javvar dataArray str split("Iascript操作DOM显示就可以了,快速又不加重服务var content ="
| 电子邮件唯一性检查用户名称[e】尚未被注册 | \n图5果用Ajax实现数据检验currentNode. nextSibling style. display ="icurrentNode nextSibling first Child. innerHTM更新页面代码片断如下:content:document. getElementById(" feedback info").44条目内容innerhtml = httP_reqUesT. responsetext;条目内容是现代Web系统中显示数据信息的43级联菜单种方式,信息以列表的形式显示。这些信息通常只采用Ajax技术,在初始化页面时,只需读取它显示标题等重要的数据,只有当单击标题或其他区的第1级数据并显示。在用户操作某一级菜单时,通域的时候才显示条目内容。Ajax提供了异步传输的过Ajax向后台请求其下级子菜单的数据…用什么通信方式,允许用户在页面加载后的任何时间段内就取什么,用多少就取多少,不会有数据的冗余和向服务器重新请求条目内容,此过程不需要打开新浪费,减少了数据下载总量。且在更新页面时不用页面,也不需要在页面初始化时加载全部数据。下载全部内容,只更新需要的部分即可,相对于后台处理并下载的方式缩短了用户等待时间,也将资号发送看发送时阔源浪费降到最低限度。2籌有博到红=意点用枝米126图6为采用Ajax实现级联组织机构图。当用户及度用》加了5个技术分,纽续努力,再接再点击核自动化学院时,才会从服务器取回其下级机26直技术加分一来贴《E四DaJ2060晋构(核技术和自动控制)并显示,当点击核技术时25有技加分二来塑點《EE框架技术莆介)CLJ2000-08否才从服务器取回其下级机构(AAA和BBB)并显示。中国煤化工目内客而没有被点击的机构,如研究生院等则不会取其下级机构。CNMHG内容,当点击某个第17卷第11期铁路机应用铁路信惠系统Vol 17 No 11RAILWAY INFORMATION SYSTEM文夺编号:10058451(2008)1001903基于可视化客车调度管理信息系统的设计与实现韩激扬(武汉铁路局或昌客车车辆段,武汉430064)擴要:为实現客丰调度管理的科学化和信息化,在規范和统一客车技术管理的相关数据資源,建立铁路客车技术信息库的基础上,本系统以电子动态编组板为基本界面,将调度宣与各个车间的业务有机联系起来,在提供便捷的动态编组工具的同时,实现相关信息資源的综合运用和共享,有效提高信息查询、分析处理的效率和淮确性。关键词:蛱路客车;管理系魷;检修;蝙程;可视化中图分类号:U2932:TP39文献标识码:ADesign and implementation based on Visualization Dispatching ManagementInformation System for railway passenger carsHAN Ji-yangWuchang Passenger Deport, Wuhan Railway Adminstration, Wuhan 430064, ChinaAbstract: To make railway passenger car dispatching management more scientific and informatization, the passengertechnical information database was built using standard and unified car technical data sources. Based on the database, theVisualization Dispatching Management Information System for railway passenger cars used electronic dynamic sign board asa basic interface to display and adjust the formation lists of passenger trains for dispatching management in car depot, whichcould link the operations of the control center with the operations of each workshops in a organic manner, offer a quiteinconvenient tool for dynamic train forming, implement integrated application, share of car technical data sources, enhancethe efficiency and accuracy of data inquiry and analysisKey words: railway passenger car; Management System; maintenance; programming: visualization在铁路信息化建设目标的指导下,适应车辆修算机局域网,建立数据库,以客车、车次为纽带,将制改革和客车技术管理不断发展的需要,充分利用调度室、库检车间、乘务车间、动力车间、上部车既有的信息资源和系统资源,制定客车技术管理信间和车电车间的业务有机联系起来,实现相关信息息化建设的总体规划和发展方向。资源在电子动态编组板上的显示、录入、査询、报本系统以电子动态编组板为基本界面,以客车警、统计、分析和打印等功能。工作人员可根据实为最小独立单位,以车次为相对独立单位,通过计际情况,对列车进行动态编组,在编组界面的电子收稿日期:2008-1009动态板上移动运行客车、备用客车和检修客车,并作者简介:韩激扬,工程师。将有关规章等作为编组条件,由计算机自动记录编短信标题时,其内容才会从服务器端取回并显示在Ajax技术的使用,揭开了无刷新更新页面的序页面上,没有被点击的标題,不会进行此操作幕。一方面可以利用客户端闲置的处理能力承担以下为更新某个标题内容的关键代码:部分服务器的工作,减轻服务器和带宽的负担;另element style, display =""方面降低页面重载的频率,可以得到更好的用户elementinnerHTML=http-_request.responsetext;体验。5结束语参书文H中国煤化工[1]阿斯CNMHG金灵北京:人民Ajax的精髓就是异步提交、按需索取。邮电出版社,200619
论文截图
上一条：MPLSVPN技术及其应用
下一条：“数字城市”建设与应用
版权：如无特殊注明，文章转载自网络，侵权请联系cnmhg168#163.com删除！文件均为网友上传，仅供研究和学习使用，务必24小时内删除。
热门推荐
|
