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

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

論文簡(jiǎn)介

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

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

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

論文截圖