Ajax在web中的應(yīng)用-開(kāi)題報(bào)告

南 京 理 工 大 學(xué) 紫 金 學(xué) 院 畢業(yè)設(shè)計(jì)(論文)開(kāi)題報(bào)告 學(xué)學(xué) 生生 姓姓 名名：AA學(xué)學(xué) 號(hào)號(hào)：0806015 專(zhuān)專(zhuān)業(yè)業(yè) ：計(jì)算機(jī)科學(xué)與技術(shù) 設(shè)設(shè)計(jì)計(jì)(論論文文)題題目目：Ajax 在 web 中的應(yīng)用 指指 導(dǎo)導(dǎo) 教教 師師:AA 2012 年2 月22 日 開(kāi)題報(bào)告填寫(xiě)要求 1開(kāi)題報(bào)告（含“文獻(xiàn)綜述”）作為畢業(yè)設(shè)計(jì)（論文）答辯委 員會(huì)對(duì)學(xué)生答辯資格審查的依據(jù)材料之一。此報(bào)告應(yīng)在指導(dǎo)教師指 導(dǎo)下，由學(xué)生在畢業(yè)設(shè)計(jì)（論文）工作前期內(nèi)完成，經(jīng)指導(dǎo)教師簽 署意見(jiàn)及所在專(zhuān)業(yè)審查后生效； 2開(kāi)題報(bào)告內(nèi)容必須用黑墨水筆工整書(shū)寫(xiě)或按教務(wù)處統(tǒng)一設(shè) 計(jì)的電子文檔標(biāo)準(zhǔn)格式（可從教務(wù)處網(wǎng)頁(yè)上下載）打印，禁止打印 在其它紙上后剪貼，完成后應(yīng)及時(shí)交給指導(dǎo)教師簽署意見(jiàn)； 3“文獻(xiàn)綜述”應(yīng)按論文的格式成文，并直接書(shū)寫(xiě)（或打?。?在本開(kāi)題報(bào)告第一欄目?jī)?nèi)， 學(xué)生寫(xiě)文獻(xiàn)綜述的參考文獻(xiàn)應(yīng)不少于 15 篇（不包括辭典、手冊(cè)） ； 4 有關(guān)年月日等日期的填寫(xiě)， 應(yīng)當(dāng)按照國(guó)標(biāo) GB/T 74082005 數(shù)據(jù)元和交換格式、 信息交換、 日期和時(shí)間表示法 規(guī)定的要求， 一律用阿拉伯?dāng)?shù)字書(shū)寫(xiě)。如“2007 年 3 月 15 日”或“2007-03-15”。 畢畢 業(yè)業(yè) 設(shè)設(shè) 計(jì)（論計(jì)（論 文）開(kāi)文）開(kāi) 題題 報(bào)報(bào) 告告 1結(jié)合畢業(yè)設(shè)計(jì)（論文）課題情況，根據(jù)所查閱的文獻(xiàn)資料，每人撰寫(xiě) 2000 字左右的文獻(xiàn)綜述： 文文 獻(xiàn)獻(xiàn) 綜綜 述述 Ajax 是 Asynchronous JavaScript and XML 的簡(jiǎn)稱(chēng)，從本質(zhì)上而言，Ajax 并非新的 技術(shù)，而是網(wǎng)絡(luò)瀏覽器里已有的三項(xiàng)重要特征的結(jié)合 瀏覽器可以通過(guò) JavaScript 和 Web Server 進(jìn)行通信；JavaScript 能在不刷新頁(yè)面的情況下動(dòng)態(tài)地改變頁(yè)面的值；瀏覽 器能夠解析 XML 文件 Ajax 包含四種核心技術(shù)，即 CSS DOM XMLHttpRequest 以及 JavaScript。 1.1 概述 傳統(tǒng)的網(wǎng)絡(luò)頁(yè)面工作流程是瀏覽器向 Web 服務(wù)器發(fā)送請(qǐng) 求，服務(wù)器收到瀏覽器的 請(qǐng)求后，強(qiáng)制瀏覽器進(jìn)入等待狀態(tài)處理完成后，生成一個(gè)完整的新 Web 頁(yè)面發(fā)送到瀏 覽器，瀏覽器在收到響應(yīng)后刷新整個(gè)頁(yè)面以顯示新的數(shù)據(jù)，瀏覽器客戶端的動(dòng)作總是和 服務(wù)器的響應(yīng)同步。 2.1 使用 CSS 定義應(yīng)用的外觀 CSS 的英文全稱(chēng)為 Cascading Style Sheets，即層疊樣式表，它是由 W3C （萬(wàn)維網(wǎng)聯(lián) 盟 ）制定的 Web 表現(xiàn)層技術(shù)標(biāo)準(zhǔn) 該標(biāo)準(zhǔn)以 CSS 來(lái)描述整個(gè) Web 頁(yè)面的布局設(shè)計(jì)， 為 Web 頁(yè)面元素提供了一種可以重用的可視化樣式的定義方法 CSS 以一致的方式定 義和使用可視化樣式元素，例如顏色 邊框 背景圖片 透明度和大小等，此外，樣式表 還能夠定義頁(yè)面元素相互之間的布局以及簡(jiǎn)單的用戶交互功能， 并能夠非常方便的設(shè)置 在頁(yè)面的元素上 使用 CSS 布局能幫助設(shè)計(jì)師分離出頁(yè)面的結(jié)構(gòu)和樣式外觀，使站點(diǎn) 的構(gòu)建與維護(hù)更加容易。 2.2 使用 DOM 技術(shù)組織視圖 DOM 的英文全稱(chēng)為 Document Object Model，即文檔對(duì)象模型，它也是一種由 W3C 制定的讓瀏覽器與 Web 頁(yè)面內(nèi)容結(jié)構(gòu)之間交互的規(guī)范 它由一組可以使用 JavaScript 操作的可編程對(duì)象展現(xiàn)出 Web 頁(yè)面的結(jié)構(gòu) Web 頁(yè)面中的 HTML 標(biāo)簽被組織成一個(gè) 樹(shù)狀結(jié)構(gòu)，樹(shù)的根節(jié)點(diǎn)是標(biāo)簽，它代表了整個(gè)頁(yè)面文檔，它內(nèi)部的標(biāo) 簽代表了文檔的主體部分，是可見(jiàn)文檔結(jié)構(gòu)的根節(jié)點(diǎn) 在文檔主題之內(nèi)，有表格段落 列 表以及其他的標(biāo)簽類(lèi)型，每個(gè)標(biāo)簽之中可能還有其他標(biāo)簽,實(shí)際上，在 Ajax 應(yīng)用中，正 是因?yàn)?DOM 對(duì)象代表了 Web 頁(yè)面的界面結(jié)構(gòu)元素， 我們才能通過(guò) JavaScript 腳本語(yǔ) 言來(lái)對(duì) Web 界面元素進(jìn)行編程控制，從而使得 Ajax 應(yīng)用程序可以在運(yùn)行時(shí)改變用戶 界面，包括改變界面元素的 CSS 樣式。 2.3 使用 XMLHttpRequest 異步加載數(shù)據(jù) XMLHttpRequest 是瀏覽器內(nèi)建的對(duì)象，它允許 Web 瀏覽器以后臺(tái)活動(dòng)的方式與 Web 服務(wù)器進(jìn)行數(shù)據(jù)交互 數(shù)據(jù)的格式通常是 XML，但是也可以很好地支持任何但是 也可以很好地支持任何基于文本的數(shù)據(jù)格式 它是 Ajax 技術(shù)的核心部分 下面著重介 紹 XMLHttpRequest 的幾個(gè)重要屬性和事件及方法。 2.3.1 屬性 readystate 屬性：從 XMLHttpRequest 對(duì)象中把一個(gè) Http 請(qǐng)求 服務(wù)器 接受服務(wù)器 的響應(yīng)， 將經(jīng)歷若干種狀態(tài)， readyState 用來(lái)描述 XMLHttpRequest 對(duì)象當(dāng)前狀態(tài) status 屬性：代表 Http Request 的狀態(tài)，譬如 404 是沒(méi)有找到服務(wù)器， 500 是服務(wù)器程序出 錯(cuò)， 200 代表請(qǐng)求處理成功 responseText 屬性：客戶端接收到的 HTTP 響應(yīng)的文本內(nèi) 容 responseXML 屬性：客戶端接收到的完整的 XML 格式的 HTTP 響應(yīng)。 2.3.2 事件 onreadystatechange 事件：當(dāng) XMLHttpRequest 對(duì)象的 readystate 發(fā)生改變時(shí)， XMLHttpRequest 對(duì)象都會(huì)觸發(fā)一個(gè) readystatechange 事件 事實(shí)上，onreadystatechange 是一個(gè)回調(diào)函數(shù)，它用來(lái)監(jiān)視服務(wù)器端對(duì)客戶端的響應(yīng)，客戶端收到服務(wù)端的響應(yīng)后， 調(diào)用該回調(diào)函數(shù)，進(jìn)行相應(yīng)的邏輯處理。 2.3.3 方法 open () 方法：Open 用來(lái)初始化一個(gè) XMLHttpRequest 對(duì)象的請(qǐng)求，其函數(shù)原型為： open ( DOMString method，DOMString URL，boolean async，DOMString，username， DOMString password) 其中，method 參數(shù)用于指定你想用來(lái)發(fā)送請(qǐng)求的 HTTP 方法 (GET POST PUT DELETE 或 HEAD)URL 參數(shù)用于指定 XMLHttpRequest 對(duì)象所要請(qǐng) 求的服務(wù)器 async 參數(shù)指定是否請(qǐng)求是異步的，缺省值為 true 最后兩個(gè)參數(shù)用于要求 認(rèn)證的服務(wù)器，為可選參數(shù) send () 方法：在通過(guò)調(diào)用 open () 方法準(zhǔn)備好一個(gè)請(qǐng)求之 后，調(diào)用 send () 方法把該請(qǐng)求發(fā)送到服務(wù)器 當(dāng) open ()方法的 async 參數(shù)為 true 時(shí)， send () 方法立即返回， 從而允許其它客戶端腳本處理繼續(xù) send () 方法使用一個(gè)可選的 參數(shù)。 2.4 使用 JavaScript 綁定和處理數(shù)據(jù) JavaScript 是一種弱類(lèi)型的 解釋型的和通用的腳 本語(yǔ)言弱類(lèi)型意味著變量不需要明確聲明其類(lèi)型， 同一個(gè)變量可以使用不同的類(lèi)型來(lái)賦 值 解釋型意味著不需要編譯，源代碼本身就可以執(zhí)行，將源代碼放在 Web 服務(wù)器上， 通過(guò)因特網(wǎng)傳輸?shù)接脩魹g覽器中， JavaScript 的部署就算完成了 通用意味著這種語(yǔ)言適 用于大部分的算法和編程任務(wù) JavaScript 語(yǔ)言核心支持?jǐn)?shù)字 字符串 日期和時(shí)間 數(shù)組 用于處理文本的正則表達(dá)式及數(shù)學(xué)函數(shù) JavaScript 還支持定義結(jié)構(gòu)化的對(duì)象， 因此可以 使用面向?qū)ο蟮脑O(shè)計(jì)原則來(lái)構(gòu)建更加復(fù)雜的應(yīng)用， 這也使得利用設(shè)計(jì)模式的思想來(lái)改進(jìn) Ajax 應(yīng)用的開(kāi)發(fā)變?yōu)榭赡?Web 瀏覽器中嵌入了 JavaScript 解釋器，能通過(guò) JavaScript 引擎與瀏覽器的許多內(nèi)建功能進(jìn)行交互，例如 CSS DOM 以及 XMLHttpRequest，這允 許頁(yè)面開(kāi)發(fā)者通過(guò)編程方式控制頁(yè)面的表現(xiàn)。 2.5Ajax 核心技術(shù)在應(yīng)用中的協(xié)作使用了 Ajax 技術(shù)的 Web 頁(yè)面在得到用戶請(qǐng)求時(shí)， 會(huì)觸發(fā) JavaScript 事件，這些事件定義了工作流程和業(yè)務(wù)邏輯 JavaScript 在執(zhí)行事件時(shí) 通過(guò) XMLHttpRequest 向服務(wù)器發(fā)送異步的 Http Request，以執(zhí)行服務(wù)器后臺(tái)操作 客 戶端在收到服務(wù)器的響應(yīng)數(shù)據(jù)后， 通過(guò) JavaScript 操作 DOM 來(lái)改變和刷新用戶界面， 重繪特定頁(yè)面元素的 CSS 樣式或者重新組織顯示給用戶的數(shù)據(jù)，而不需要刷新整個(gè)頁(yè) 面 這一過(guò)程對(duì)用戶而言是透明的，也就是說(shuō)，用戶甚至不知道瀏覽器正在與服務(wù)器通 信，Web 站點(diǎn)的響應(yīng)看起來(lái)是即時(shí)的。 參考文獻(xiàn)： 1 Michael MoncurJavaScript 入門(mén)經(jīng)典M王軍譯. 北京：人民郵電出版社，2007 2 June jamrich Parsons，Dan Oja計(jì)算機(jī)文化M北京：機(jī)械工業(yè)出版社，2001 3 劉晨，張濱黑客與網(wǎng)絡(luò)安全M北京：航空工業(yè)出版社，1999 4 謝希仁計(jì)算機(jī)網(wǎng)絡(luò)M大連：大連理工大學(xué)出版社，2004 5 肖金秀等多媒體技術(shù)及應(yīng)用M北京：冶金工業(yè)出版社，2004 6 T Imothy J.OLearyComputing EssentialsM北京：高等教育出版社，2000 7 陶樹(shù)平計(jì)算機(jī)科學(xué)技術(shù)導(dǎo)論M北京：高等教育出版社，2002 8 張孝祥 JavaScript 網(wǎng)頁(yè)開(kāi)發(fā)M北京： 清華大學(xué)出版社，2009 9 相萬(wàn)讓網(wǎng)頁(yè)設(shè)計(jì)與制作M北京：人民郵電出版社，2004 10 盧湘鴻計(jì)算機(jī)應(yīng)用基礎(chǔ)習(xí)題解答與實(shí)驗(yàn)指導(dǎo)M北京：清華大學(xué)出版社，2002 11 楊振山，龔沛曾大學(xué)計(jì)算機(jī)基礎(chǔ)上機(jī)實(shí)驗(yàn)指導(dǎo)與測(cè)試M北京：高等教育出版 社，2004 12 王國(guó)輝，李立文，楊亮.JSP 數(shù)據(jù)庫(kù)系統(tǒng)開(kāi)發(fā)完全手冊(cè)M北京：人民郵電出版社， 2010 13 張孝祥. Java 就業(yè)培訓(xùn)教程M. 北京：清華大學(xué)出版社，2003 14 Bruce Eckel. Java 編程思想M. 北京：機(jī)械工業(yè)出版社，2007 15 陳鵬，程勇. J2EE 項(xiàng)目開(kāi)發(fā)實(shí)用案例M. .北京：科技出版社，2006 畢畢 業(yè)業(yè) 設(shè)設(shè) 計(jì)（論計(jì)（論 文）開(kāi)文）開(kāi) 題題 報(bào)報(bào) 告告 本課題要研究或解決的問(wèn)題和擬采用的研究手段（途徑） ： 1輸入值校驗(yàn)的問(wèn)題輸入值校驗(yàn)的問(wèn)題 如在申請(qǐng)用戶的時(shí)候，需要進(jìn)數(shù)據(jù)庫(kù)對(duì)該用戶進(jìn)行唯一性確認(rèn)，然后才能繼續(xù)往下 申請(qǐng)這種校驗(yàn)需要訪問(wèn)后臺(tái)數(shù)據(jù)庫(kù)， 但又不希望用戶在這里提交后等待用戶名必須唯一 的情況下，傳統(tǒng)做法填定好用戶信息后提交到后臺(tái)，查詢數(shù)據(jù)庫(kù)發(fā)現(xiàn)重復(fù)，返回頁(yè)面提 示用戶用戶名重復(fù)，重新提交信息。 用 ajax 用戶填定好用戶名后，自動(dòng)檢查測(cè)是否是重復(fù)， 重復(fù)直接提示用戶名重復(fù)重 新輸入用戶名，而不需要提交后才檢測(cè) 2.級(jí)聯(lián)顯示的問(wèn)題級(jí)聯(lián)顯示的問(wèn)題 這種問(wèn)題應(yīng)該是我們遇到的最多的表現(xiàn)層的問(wèn)題,最常見(jiàn)的是級(jí)聯(lián)的兩個(gè)或更多的 選擇框。 城市的數(shù)據(jù)從表(city_info)表中讀取.如省份下拉框選擇了浙江，則相應(yīng)的城市下拉 框選項(xiàng)也變?yōu)檎憬〉某鞘校?傳統(tǒng)做法下拉框選擇變化后提交到后臺(tái)查詢所選的省份下 的所有城市，返回前臺(tái)刷新顯示更新過(guò)的省份下的城市。使用 Ajax 技術(shù)省份下拉框選 擇后，不刷新頁(yè)面，城市下拉框顯示相應(yīng)省份下的. 3.數(shù)據(jù)錄入和列表顯示在同一個(gè)頁(yè)面數(shù)據(jù)錄入和列表顯示在同一個(gè)頁(yè)面 在 B/S 的 UI 上，由于需要提交刷新的問(wèn)題，我們經(jīng)常把數(shù)據(jù)的錄入和數(shù)據(jù)顯示分 別放在兩個(gè)不同的頁(yè)面上.如新增學(xué)生信息。 一個(gè)頁(yè)面是顯示學(xué)生的列表， 一個(gè)頁(yè)面是新 增學(xué)生頁(yè)面。每新增完一個(gè)學(xué)生后，頁(yè)面返回到列表頁(yè)面，刷新顯示最新的學(xué)生列表。 使用 Ajax 技術(shù)將新增學(xué)生和學(xué)生列表放在同一個(gè)頁(yè)面。每新增完一個(gè)學(xué)生后，不刷新 頁(yè)面。列表更新為最新的學(xué)生信息列表。 畢畢 業(yè)業(yè) 設(shè)設(shè) 計(jì)（論計(jì)（論 文）開(kāi)文）開(kāi) 題題 報(bào)報(bào) 告告 指導(dǎo)教師意見(jiàn)