Ajax技術(shù)應用的研究

期刊名字：鐵路計算機應用
文件大?。?92kb
論文作者：陳麗軍，羅省賢，李敏
作者單位：成都理工大學(xué)
更新時(shí)間：2020-06-12
下載次數：次

論文簡(jiǎn)介

研究與開(kāi)發(fā)第17卷第1期RESEARCH AND DEVELOPMENT路Vol 17 No 11文章編號:1005-8451(2008)11-001604Ajax技術(shù)應用的研究陳麗軍,羅省賢,李敏(成都理工大學(xué)信息工程學(xué)院,成都610059)摘要:Ajax技術(shù)的出現改變傳統Web應用程序的開(kāi)發(fā)模式,揉脫傳統Web應用程序不連貰的網(wǎng)絡(luò )交互方式。討論Ajax技術(shù)的概念,開(kāi)發(fā)模式,工作方式以及開(kāi)發(fā)步驟,結合JSP技術(shù)實(shí)現Ajax的幾種典型應用。關(guān)謎詞:Web應用程序;開(kāi)發(fā)模式;Ajax;異步屮圖分類(lèi)號: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應用程序開(kāi)發(fā)的手段,它采用傳統的Web應用程序采用同步交互過(guò)程:用戶(hù)客戶(hù)端腳本與Web服務(wù)器交換數據。使用Ajax,可先向Web服務(wù)器發(fā)出一個(gè)請求,web服務(wù)器響應以創(chuàng )建更加豐富、更加動(dòng)態(tài)的web應用程序用戶(hù)再向用戶(hù)返回一個(gè) HTML/XHTML頁(yè)面。這是一種不界面,其即時(shí)性與可用性甚至能夠接近桌面應用程連貫的用戶(hù)體驗,服務(wù)器在處理請求的時(shí)候,用戶(hù)序。對用戶(hù)而言,Ajax意味著(zhù)更好的用戶(hù)體驗;對多數時(shí)間處于等待的狀態(tài),屏幕內容也是一片空白。開(kāi)發(fā)人員而言,Ajax將代替傳統的Web開(kāi)發(fā)方式,2.2Ajax的開(kāi)發(fā)模式稱(chēng)得上是Web技術(shù)發(fā)展中的一個(gè)里程碑。Ajax在用戶(hù)與Web服務(wù)器之間引入一個(gè)中間層,即Ajax引擎。并不是所有的用戶(hù)請求都提交給Ajax概念服務(wù)器,一些數據的驗證和處理由Ajax自己來(lái)做,只有確實(shí)需要從服務(wù)器讀取新數據時(shí),才由客戶(hù)端Aa不是一項新技術(shù),只是多種技術(shù)的綜合,包通過(guò) JavaScript調用Ajax引擎,向服務(wù)器端發(fā)出HItp括 Javascript、 XHTML、CSS、XML、XSTL、DOM和請求,但它并不等待請求的響應,用戶(hù)可以繼續瀏XmlhTtprequEst等技術(shù)。其中:覽或交互。當服務(wù)端的數據返回時(shí),Ajax引擎接收(1)使用 XHTML、XSTL和CSS實(shí)現標準化的數據,并指定 JavaScript函數來(lái)完成相應的處理或頁(yè)呈現界面;(2)使用DOM實(shí)現動(dòng)態(tài)的顯示和交互;面的更新,而不是刷新整個(gè)頁(yè)面,從而實(shí)現用戶(hù)操(3)使用 XmlhtTp Request實(shí)現與服務(wù)器的異步通作與服務(wù)器響應的異步化。圖1和圖2分別表示了信,(4)使用 Javascript將 XHTML、DOM、XML和Ajax應用模型和Ajax傳輸過(guò)程。XmlhTtp Request綁定。23Ajax的工作方式及工作流程Ajax的工作方式,如圖3。其工作流程如下2Ajax技術(shù)核心1)頁(yè)面初始化。用戶(hù)輸入一個(gè)URL地址,或者單擊打開(kāi)一個(gè)超連接,Web頁(yè)面在瀏覽器呈現,21傳統的Web開(kāi)發(fā)模式完成中國煤化工收稿日期:20080627戶(hù)操作Web頁(yè)面上作者簡(jiǎn)介:陳麗軍,在讀碩士研究生,羅省賢,教授CNMHG個(gè)aspt事件第17卷第11期A(yíng)jax技術(shù)應用的研究研究與開(kāi)發(fā)覽器客戶(hù)端(7)頁(yè)面被更新,一次Ajax處理過(guò)程結束HTMLACSS數HTTP請求HTMIACSS數據3使用Ajax開(kāi)發(fā)的步驟web服務(wù)器數據庫等持久化數據(1)初始化 XmlhTtprequEst對象http_request=newXmlhTtprequEsto;//moZilla圖1Ajax應用模型瀏覽器了用戶(hù)行為http-_request=newActivexobject("msxm12XmlhtTp")HIE瀏覽器(2)指定響應函數 callback客戶(hù)端處Ajax引擎http_request.onreadystatechange=callback(3)發(fā)出http請求http_request.open(method,urltrue)數據傳輸數據傳輸數據傳輸http_request.sendo;(4)在響應函數中處理服務(wù)器返回信息,異步七處嚴Web服務(wù)器更新頁(yè)面把以上每步封裝成函數,則可以開(kāi)發(fā)出一個(gè)框圖2Ajax傳輸過(guò)程架Ajax開(kāi)發(fā)框架ajax_ frame. js,以實(shí)現代碼復用。我們可以根據自己的需要,重新編寫(xiě)回調函數call-, Javascript I用XMLH中 rEques對象發(fā)起異步請求back,以處理自己的業(yè)務(wù)邏輯[m戶(hù)界曲卜M綁了則中為總]:4Aj的典型應用1使用HTM新1 mML,XHTML內!文本總!14.1吏新多級下拉列長(cháng)框在Web頁(yè)面中經(jīng)常需要提供多級(兩級或更圖3Ajax的工作方式多)的下拉列表框。后級下拉列表框內容根據前級狀態(tài)而改變。傳統的方法是在頁(yè)面初始化時(shí)將全部(3) Javascript事件處理函數執行,調用XML列表框內容一起載入,在頁(yè)面上生成多級的目錄。Http Request對象。 Javascript事件被觸發(fā),相應的事當用戶(hù)選擇的時(shí)候,再根據情況更新相應下拉列表件處理函數即被調用。在這個(gè)函數中, XmlhtTp框的內容?；蛘邔⑷磕夸洷４嬖谝粋€(gè) Javascript文Request對象被初始化,并根據情況向服務(wù)器發(fā)出件中,必要的時(shí)候再更新。異步通信請求,將用戶(hù)的請求提交到服務(wù)器;應用Ajax,可以在頁(yè)面初始化時(shí)只初始化第1(4)服務(wù)器接收用戶(hù)請求。這個(gè)過(guò)程與傳統級下拉框列表,后級下拉框中的內容根據其前級的Web應用程序交互模式一致。服務(wù)器收到用戶(hù)請求選擇狀態(tài)再向服務(wù)器請求獲取。圖4為采用Ajax實(shí)后,根據URL判斷用戶(hù)行為,響應用戶(hù)行為,并以現的下拉列表框HTMLIXHTML/XML的形式打印出來(lái)(5) XmlhtTprequeSt接收服務(wù)器響應數據。請選擇學(xué)院請選擇專(zhuān)業(yè)XmlhtTp Request檢測到服務(wù)器已將響應結果打印調選擇學(xué)院工程學(xué)院出來(lái)(即將響應結果以文本或XML文檔的形式返外國語(yǔ)學(xué)院回),賦予某個(gè) Javascript變量(假定變量名為: returm地球科學(xué)學(xué)院Value).中國煤化工(6) Javascript調用DOM處理 return Value,更新頁(yè)面內容,CNMHG列表研究與開(kāi)發(fā)鐵路計算機應用第17卷第l以下是基于JSP的兩級下拉列表(學(xué)院和專(zhuān)業(yè))成都理工天學(xué)Ajax實(shí)現關(guān)鍵代碼片段匚自動(dòng)化學(xué)院for(vari=0< classList length-1;i++){∥將專(zhuān)業(yè)信移技和息加入第2級下拉列表中var temp= Trim(classList[i]).split(",")自動(dòng)控制f. select12 add(new Option(temp[1], temp[OD)); I4.2數鋸校驗地球科學(xué)學(xué)院在輸入表單內容時(shí),常常需要保證數據的唯一性。使用Ajax,這個(gè)校驗請求可以 XmlhTtprequEst圖6釆用Ajax實(shí)現級聯(lián)菜單對象發(fā)出,整個(gè)過(guò)程不需要彈出新窗口,也不需要以下是實(shí)現此級聯(lián)菜單的關(guān)鍵代碼:將整個(gè)頁(yè)面提交到服務(wù)器,只要將返回結果用Javvar dataArray str split("Iascript操作DOM顯示就可以了,快速又不加重服務(wù)var content ="

電子郵件唯一性檢查用戶(hù)名稱(chēng)[e】尚未被注冊

\n圖5果用Ajax實(shí)現數據檢驗currentNode. nextSibling style. display ="icurrentNode nextSibling first Child. innerHTM更新頁(yè)面代碼片斷如下:content:document. getElementById(" feedback info").44條目?jì)热輎nnerhtml = httP_reqUesT. responsetext;條目?jì)热菔乾F代Web系統中顯示數據信息的43級聯(lián)菜單種方式,信息以列表的形式顯示。這些信息通常只采用Ajax技術(shù),在初始化頁(yè)面時(shí),只需讀取它顯示標題等重要的數據,只有當單擊標題或其他區的第1級數據并顯示。在用戶(hù)操作某一級菜單時(shí),通域的時(shí)候才顯示條目?jì)热?。Ajax提供了異步傳輸的過(guò)Ajax向后臺請求其下級子菜單的數據…用什么通信方式,允許用戶(hù)在頁(yè)面加載后的任何時(shí)間段內就取什么,用多少就取多少,不會(huì )有數據的冗余和向服務(wù)器重新請求條目?jì)热?此過(guò)程不需要打開(kāi)新浪費,減少了數據下載總量。且在更新頁(yè)面時(shí)不用頁(yè)面,也不需要在頁(yè)面初始化時(shí)加載全部數據。下載全部?jì)热?只更新需要的部分即可,相對于后臺處理并下載的方式縮短了用戶(hù)等待時(shí)間,也將資號發(fā)送看發(fā)送時(shí)闊源浪費降到最低限度。2籌有博到紅=意點(diǎn)用枝米126圖6為采用Ajax實(shí)現級聯(lián)組織機構圖。當用戶(hù)及度用》加了5個(gè)技術(shù)分,紐續努力,再接再點(diǎn)擊核自動(dòng)化學(xué)院時(shí),才會(huì )從服務(wù)器取回其下級機26直技術(shù)加分一來(lái)貼《E四DaJ2060晉構(核技術(shù)和自動(dòng)控制)并顯示,當點(diǎn)擊核技術(shù)時(shí)25有技加分二來(lái)塑點(diǎn)《EE框架技術(shù)莆介)CLJ2000-08否才從服務(wù)器取回其下級機構(AAA和BBB)并顯示。中國煤化工目?jì)瓤投鴽](méi)有被點(diǎn)擊的機構,如研究生院等則不會(huì )取其下級機構。CNMHG內容,當點(diǎn)擊某個(gè)第17卷第11期鐵路機應用鐵路信惠系統Vol 17 No 11RAILWAY INFORMATION SYSTEM文奪編號:10058451(2008)1001903基于可視化客車(chē)調度管理信息系統的設計與實(shí)現韓激揚(武漢鐵路局或昌客車(chē)車(chē)輛段,武漢430064)擴要:為實(shí)現客豐調度管理的科學(xué)化和信息化,在規范和統一客車(chē)技術(shù)管理的相關(guān)數據資源,建立鐵路客車(chē)技術(shù)信息庫的基礎上,本系統以電子動(dòng)態(tài)編組板為基本界面,將調度宣與各個(gè)車(chē)間的業(yè)務(wù)有機聯(lián)系起來(lái),在提供便捷的動(dòng)態(tài)編組工具的同時(shí),實(shí)現相關(guān)信息資源的綜合運用和共享,有效提高信息查詢(xún)、分析處理的效率和淮確性。關(guān)鍵詞:蛺路客車(chē);管理系魷;檢修;蝙程;可視化中圖分類(lèi)號: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在鐵路信息化建設目標的指導下,適應車(chē)輛修算機局域網(wǎng),建立數據庫,以客車(chē)、車(chē)次為紐帶,將制改革和客車(chē)技術(shù)管理不斷發(fā)展的需要,充分利用調度室、庫檢車(chē)間、乘務(wù)車(chē)間、動(dòng)力車(chē)間、上部車(chē)既有的信息資源和系統資源,制定客車(chē)技術(shù)管理信間和車(chē)電車(chē)間的業(yè)務(wù)有機聯(lián)系起來(lái),實(shí)現相關(guān)信息息化建設的總體規劃和發(fā)展方向。資源在電子動(dòng)態(tài)編組板上的顯示、錄入、査詢(xún)、報本系統以電子動(dòng)態(tài)編組板為基本界面,以客車(chē)警、統計、分析和打印等功能。工作人員可根據實(shí)為最小獨立單位,以車(chē)次為相對獨立單位,通過(guò)計際情況,對列車(chē)進(jìn)行動(dòng)態(tài)編組,在編組界面的電子收稿日期:2008-1009動(dòng)態(tài)板上移動(dòng)運行客車(chē)、備用客車(chē)和檢修客車(chē),并作者簡(jiǎn)介:韓激揚,工程師。將有關(guān)規章等作為編組條件,由計算機自動(dòng)記錄編短信標題時(shí),其內容才會(huì )從服務(wù)器端取回并顯示在A(yíng)jax技術(shù)的使用,揭開(kāi)了無(wú)刷新更新頁(yè)面的序頁(yè)面上,沒(méi)有被點(diǎn)擊的標題,不會(huì )進(jìn)行此操作幕。一方面可以利用客戶(hù)端閑置的處理能力承擔以下為更新某個(gè)標題內容的關(guān)鍵代碼:部分服務(wù)器的工作,減輕服務(wù)器和帶寬的負擔;另element style, display =""方面降低頁(yè)面重載的頻率,可以得到更好的用戶(hù)elementinnerHTML=http-_request.responsetext;體驗。5結束語(yǔ)參書(shū)文H中國煤化工[1]阿斯CNMHG金靈北京:人民Ajax的精髓就是異步提交、按需索取。郵電出版社,200619

論文截圖