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

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

論文簡介

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

電子郵件唯一性檢查用戶名稱[e】尚未被注冊

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

論文截圖