完成第6題后效果資料

1、基于 Ajax 技術(shù)的 Web 頁面開發(fā)THE WEB PAGE DEVELOPMENT BASED ON AJAX專業(yè)：計(jì)算機(jī)科學(xué)與技術(shù)姓名：楊宇馥指導(dǎo)教師姓名： 申請學(xué)位級別：學(xué) 士 論文提交日期： 2007年 6月 12日 學(xué)位授予單位：天津科技大學(xué)摘要摘要AJAX 全 稱 為 “ Asynchronous JavaScript and XML” ( 異 步 JavaScript 和 XML)，是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁 開發(fā)技術(shù)。它是幾種已經(jīng)在各自領(lǐng)域成熟發(fā)展的技術(shù)的強(qiáng)強(qiáng) 結(jié)合。Ajax 混合了基于 XHTML/CS，S由 DO(MDocument Object Model)實(shí)現(xiàn)

2、動態(tài)顯示與交互， 通過 XML和 XSLT進(jìn)行數(shù)據(jù)交 換及處理，使用 JavaScript 整合上述技術(shù)。Ajax 方法是 WEB2.0的核心，而且圍繞 Ajax 的技術(shù)和應(yīng)用也越 來越多。鑒于 Ajax 方法相當(dāng)新，仍然處于探索階段，本設(shè) 計(jì)旨在建立一個關(guān)于 Ajax 專題網(wǎng)站， 介紹一些關(guān)于 Ajax 的 內(nèi)容及一些小實(shí)例，并在該網(wǎng)站上運(yùn)用了 Ajax 技術(shù)實(shí)現(xiàn)簡 單的異步通信功能。本系統(tǒng)從 Ajax 的基本概念， Ajax 相關(guān) 技術(shù)、 Ajax 新聞及 Ajax 實(shí)例等方面介紹 Ajax 專題網(wǎng)站的 開發(fā)和技術(shù)手段。技術(shù)上主要使用 JavaScript 和 XML語言，輔以 PHP語言

3、和 MySQL 數(shù)據(jù)庫來實(shí)現(xiàn)。關(guān)鍵詞： Ajax ； WEB2.0； JavaScriptabstractABSTRACTAjax's full name is asynchronousj avascript and xml. It means web page development technology that it found interactive web page. It is union what a few of technology develop very well in itself field . Ajax mixed xhtml/css, and com ac

4、hieve dynamic display and tneractive. Through xml and sxlt exchange data processing. It use javascript conformity these technology.Ajax is centered by the Web 2.0,also the technology and the application is more and more related with ajax.because ajax is very new.it si explore moment.this design is a

5、bout ajax's special website,introduce about aja'xscontent and examples,and it uses ajax technology and it achieves simple asynchronization communication.This system introduces development and technology about a'sja x special website from ajax basic concept.technology,news and examples.Th

6、e technology uses javascript and xml language.on the other hand it uses PHP language and Mysql database.Key words：ajax web2.0 javascript目錄目錄2012 屆本科生畢業(yè)設(shè)計(jì)第一章 選題意義第一節(jié) Web 系統(tǒng)工作機(jī)制Internet的基本協(xié)議是 TCP/IP 協(xié)議（傳輸控制協(xié)議和網(wǎng)際協(xié)議） ，目前廣泛 使用的 FTP、HTTP（超文本傳輸協(xié)議， Hypertext Transfer Protocol）、Archie Gopher 都是建立在 TCP/IP 上面的

7、應(yīng)用層協(xié)議，不同的協(xié)議對應(yīng)不同的應(yīng)用，而 HTTP 協(xié)議是 Web 應(yīng)用所使用的主要協(xié)議 HTTP 協(xié)議的上述特點(diǎn)，通常，客戶端每次 需要更新信息都必須重新向服務(wù)器發(fā)起請求， 客戶端收到服務(wù)器返回的信息后再 更新屏幕內(nèi)容 1 。第二節(jié) Web2.0 的概念一、Web1.0Web1.0 時(shí)代是一個群雄并起，逐鹿網(wǎng)絡(luò)的時(shí)代，雖然各個網(wǎng)站采用的手段 和方法不同，但第一代互聯(lián)網(wǎng)有諸多共同的特征，表現(xiàn)在：（一）Web1.0基本采用的是技術(shù)創(chuàng)新主導(dǎo)模式信息技術(shù)的變革和使用對于網(wǎng)站的新生與發(fā)展起到了關(guān)鍵性的作用。 新浪的 最初就是以技術(shù)平臺起家，搜狐以搜索技術(shù)起家，騰訊以即時(shí)通訊技術(shù)起家， 盛 大以網(wǎng)絡(luò)游戲

8、起家，在這些網(wǎng)站的創(chuàng)始階段，技術(shù)性的痕跡相當(dāng)之重。（二）Web1.0的盈利都基于一個共通點(diǎn)即巨大的點(diǎn)擊流量。 無論是早期融資還是后期獲利， 依托的都是為數(shù)眾多的 用戶和點(diǎn)擊率，以點(diǎn)擊率為基礎(chǔ)上市或開展增值服務(wù)，受眾群眾的基礎(chǔ)， 決定了 盈利的水平和速度，充分地體現(xiàn)了互聯(lián)網(wǎng)的眼球經(jīng)濟(jì)色彩。二、Web2.0Web2.0，是相對 Web1.0（2003 年以前的互聯(lián)網(wǎng)模式）的新的一類互聯(lián)網(wǎng)應(yīng) 用的統(tǒng)稱，是從核心內(nèi)容到外部應(yīng)用的革命。由 Web1.0 單純的通過網(wǎng)絡(luò)瀏覽器 瀏覽 html 網(wǎng)頁模式，向內(nèi)容更豐富、聯(lián)系性更強(qiáng)、工具性更強(qiáng)的 Web2.0 互聯(lián)網(wǎng) 模式的發(fā)展，已經(jīng)成為互聯(lián)網(wǎng)新的發(fā)展趨勢。第

9、三節(jié) Ajax 概念一、 Ajax 的概念A(yù)JAX 全稱為“Asynchronous JavaScript and XML”（異步 JavaScript 和 XML） ，2012 屆本科生畢業(yè)設(shè)計(jì)是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。 它是幾種已經(jīng)在各自領(lǐng)域成熟發(fā) 展的技術(shù)的強(qiáng)強(qiáng)結(jié)合。 Ajax 混合了 XHTML/CSS ，由 DOM (Document Object Model )實(shí)現(xiàn)動態(tài)顯示與交互，通過 XML 和 XSLT 進(jìn)行數(shù)據(jù)交換及處理，使用 JavaScript整合上述技術(shù)。具體的說 Ajax 是能夠?qū)崿F(xiàn)不刷新瀏覽器窗口，而滿足用戶的操作，現(xiàn)在一 些看上去很 Cool 的網(wǎng)

10、站，很多是用這項(xiàng)技術(shù)實(shí)現(xiàn)的，其中包括： Gmail 、Google Group、Google Sugges、t Google Maps、A 等3 。二、 與傳統(tǒng)的 Web 應(yīng)用比較傳統(tǒng)的 Web 應(yīng)用允許用戶填寫表單，當(dāng)提交表單時(shí)就向 Web服務(wù)器發(fā)送一 個請求， 服務(wù)器接收并處理傳來的表單， 然后返回一個新的網(wǎng)頁。 這個做法浪費(fèi) 了許多帶寬，因?yàn)樵谇昂髢蓚€頁面中的大部分 HTML 代碼往往是相同的。由于 每次應(yīng)用的交互都需要向服務(wù)器發(fā)送請求， 應(yīng)用的響應(yīng)時(shí)間就依賴于服務(wù)器的響 應(yīng)時(shí)間，這導(dǎo)致了用戶界面的響應(yīng)比本地應(yīng)用慢得多 4 。與此不同的是， Ajax 應(yīng)用可以僅向服務(wù)器發(fā)送并取回必需的數(shù)

11、據(jù)，它使用 SOAP 或其它一些基于 XML 的 Web service 接口，并在客戶端采用 JavaScript處 理來自服務(wù)器的響應(yīng)。 因?yàn)樵诜?wù)器和瀏覽器之間交換的數(shù)據(jù)大量減少， 用戶就 能看到響應(yīng)更快的應(yīng)用， 同時(shí)很多的處理工作可以在發(fā)出請求的客戶端機(jī)器上完 成，所以 Web服務(wù)器的處理時(shí)間也減少了 5 。三、Ajax 的工作原理Ajax 的核心是 JavaScript 對象 XmlHttpRequest。該對象在 Internet Explorer 5 中首次引入，它是一種支持異步請求的技術(shù)。 XmlHttpRequest 可以使用 JavaScript 向服務(wù)器提出請求并處理響應(yīng)

12、，而不阻塞用戶。在創(chuàng)建 Web 站點(diǎn)時(shí)，在客戶端 執(zhí)行屏幕更新為用戶提供了很大的靈活性 7 。第二章 Ajax 技術(shù)研究第一節(jié) Ajax 理論與技術(shù)一、 XMLHttpRequestAjax 應(yīng)用的特點(diǎn)之一就是無需刷新頁面即可向服務(wù)器傳輸或者讀寫數(shù)據(jù) (又 稱無刷新更新頁面) ，這一特點(diǎn)主要得益于 XMLHttpRequest 對象。這樣就可以 像桌面應(yīng)用程序一樣， 只同服務(wù)器進(jìn)行數(shù)據(jù)層面的交換， 而不用每次都刷新界面， 也不用每次將數(shù)據(jù)處理的工作提交給服務(wù)器來做。 這樣既減輕了服務(wù)器的負(fù)擔(dān)又 加快了響應(yīng)速度、縮短了用戶等候的時(shí)間。2012 屆本科生畢業(yè)設(shè)計(jì)最早應(yīng)用 XMLHTTP 組件的是微

13、軟公司， IE（IE5 以上）通過允許開發(fā)人員 在 Web頁面內(nèi)部使用 XMLHTTP ActiveX 組件來擴(kuò)展自身的功能， 開發(fā)人員不用 通過當(dāng)前的 Web 頁面導(dǎo)航而直接傳輸數(shù)據(jù)到服務(wù)器上或者從服務(wù)器取回?cái)?shù)據(jù)。 這個功能是很重要的，從而提高進(jìn)程的速度。二、XMLXML 即可擴(kuò)展標(biāo)記語言（ extensible Markup Language）的縮寫。擴(kuò)展標(biāo)記 語言 XML 是一種簡單的數(shù)據(jù)存儲語言，使用一系列簡單的標(biāo)記描述數(shù)據(jù)，而這 些標(biāo)記可以用方便的方式建立，雖然 XML 占用的空間比二進(jìn)制數(shù)據(jù)要占用更多 的空間，但 XML 極其簡單易于掌握和使用。 XML 同時(shí)也推出一種新型文檔類

14、型，使得開發(fā)者可以不必定義文檔類型 2 。第二節(jié) Ajax 開發(fā)框架一、瀏覽器框架（一） DojoDojo 是最老的框架之一，于 2004年 9月開始開發(fā)。這個項(xiàng)目的目標(biāo)是建立 充分利用 XHR 的 DHTML 工具包， 并把重心放在可用性問題上。 Dojo 只有幾個 文件，不用處理 XHR 的建立，只需調(diào)用 bind 方法，并傳入想調(diào)用的 URL 和回 調(diào)方法即可。 Dojo 有一個特性使它獨(dú)樹一幟，這就是它支持向后和向前按鈕。（三）qooxdooqooxdoo 是 Ajax 框架領(lǐng)域的一個新成員， 它提供了一個基于 JavaScript 的工 具包來彌補(bǔ) HTML 的不足。盡管還處在早期的

15、階段，但 qooxdoo 提供了一些相 當(dāng)引人注目的部件。使用 qooxdoo，可以模擬標(biāo)準(zhǔn)客戶應(yīng)用中的一些特性，如菜 單條、工具提示、風(fēng)格布局和拖放支持。二、服務(wù)器端框架（一） CPAINTCPAINT（跨平臺異步接口工具包）在服務(wù)器端實(shí)現(xiàn) Ajax ，它向客戶返回文 本或 DOM 文檔對象，以便用 JavaScript處理。 CPAINT 在大多數(shù)主要瀏覽器上 都能用，而且支持遠(yuǎn)程腳本。（二） Sajax利用 Sajax，可以直接從 JavaScript 調(diào)用服務(wù)器端代碼。 Sajax 支持 Perl、 Python、Ruby 和 ASP 等語言（目前并不支持 Java）。安裝 Sajax

16、 相當(dāng)簡單，只涉 及針對特定服務(wù)器語言的簡單的庫。 已經(jīng)確認(rèn)的只有 IE6 和 Mozilla/Firefox 提供 Sajax 支持。2012 屆本科生畢業(yè)設(shè)計(jì)第三章 基于 Ajax 技術(shù)開發(fā) Web 頁面第一節(jié) 數(shù)據(jù)驗(yàn)證在填寫表單內(nèi)容時(shí)， 需要保證數(shù)據(jù)的惟一性 (例如新用戶注冊填寫的用戶) ， 因此必須對用戶輸入的內(nèi)容進(jìn)行數(shù)據(jù)驗(yàn)證。 數(shù)據(jù)驗(yàn)證通常有兩種方式： 一種是直 接填寫， 然后提交表單， 這種方式需要將整個頁面提交到服務(wù)器端進(jìn)行驗(yàn)證， 整 個過程不僅時(shí)間長而且造成了服務(wù)器不必要的負(fù)擔(dān)；第二節(jié) 按需取數(shù)據(jù)分類樹或樹形結(jié)構(gòu)在 Web 應(yīng)用系統(tǒng)中使用得非常廣泛，例如部門結(jié)構(gòu)、文 檔的分類結(jié)

17、構(gòu)常常使用樹形控件呈現(xiàn)。一、主頁面當(dāng)單擊第一個圖書封面后， 會看到右邊的效果圖， 圖書的簡要介紹會在圖書 封面的下面顯示。這個方法是在圖書封面下面有一個層，當(dāng)單擊圖書封面后， 會 通過發(fā)送的 id，來決定在 XML 文件中調(diào)用哪部分的數(shù)據(jù)，然后在層中顯示。主要 JavaScript代碼：<script type="text/javascript">var xmlHttp;function handleStateChange() document.getElementById("div1").innerHTML='<font si

18、ze="2">'+out;表 3-1 chat 表字段名類型長度是否為空chat idint11否posted_ondatetim e10否user_namevarchar255否messagetext255否colorchar7否2012 屆本科生畢業(yè)設(shè)計(jì)二、實(shí)現(xiàn) Ajax 建議和自動完成自動完成功能曾是桌面應(yīng)用程序的一個重要特征。最近這個功能在 Web 應(yīng) 用中流行起來了。這個例子可以幫助用戶在 中查找 PHP 函數(shù) 和函數(shù)的官方幫助頁。 在應(yīng)用中可以實(shí)現(xiàn)以下功能： 當(dāng)用戶打字時(shí)匹配函數(shù)檢索 結(jié)果并顯示在一個下拉列表中； 當(dāng)前關(guān)鍵字是返回結(jié)果的第一個建議，

19、 并自動補(bǔ) 上缺失的字母。 增加的部分高亮顯示； 與查詢關(guān)鍵字匹配的開頭幾個字母在下拉 列表中用黑體顯示。如表所示數(shù)據(jù)表：表 3-2 suggest表字段名類型長度是否為空Namevarchar100否如圖所示：圖 3-1 Ajax 建議和自動完成主頁面圖 3-2 第一個字母存在界面第四章 總結(jié)與展望第一節(jié) 總結(jié)本文從 Ajax 相關(guān)概念及應(yīng)用、開發(fā)工具介紹到系統(tǒng)設(shè)計(jì)及實(shí)現(xiàn)介紹了制作2012 屆本科生畢業(yè)設(shè)計(jì)本系統(tǒng)的目的， 是為了讓更多的人了解到這個新技術(shù)， 因?yàn)樗淖兞藗鹘y(tǒng)的網(wǎng)站 模式，更加為用戶考慮，使得頁面獲得更好的用戶體驗(yàn)。在這次做畢業(yè)設(shè)計(jì)的過程中，也遇到了很多問題，例如當(dāng)單擊“簡要”

20、時(shí)， 應(yīng)該可以看到當(dāng)前文件的一個概述，可是在實(shí)現(xiàn)的過程中，什么都沒有發(fā)生 ， 只有 IE 瀏覽器提示網(wǎng)頁上有錯誤，由于在修改文件時(shí)，經(jīng)常使用文本文件，所 以保存時(shí)都是默認(rèn)方式 ，但是使用 XML 文件，一般都是用 UTF-8 文本格式， 后來試著在保存文本文件時(shí)，將保存格式更改為 UTF-8 格式之后，再運(yùn)行，文 件的概述可以出現(xiàn)了，在這個例子中，深切體會到，編程是需要很細(xì)心的，稍微 不注意，很細(xì)微的東西都會影響程序的運(yùn)行。第二節(jié) 展望在本文前面的介紹中， 可以看出在建立 Web 應(yīng)用程序時(shí)使用 Ajax 將給用戶 帶來如下潛在的好處：它可以實(shí)現(xiàn)一個更加優(yōu)秀、響應(yīng)更加迅速的網(wǎng)站或 Web 應(yīng)用程序； 它的流行將促進(jìn)建立統(tǒng)一的開發(fā)模式， 開發(fā)者們不需要為完成一個基 本的功能建立新的模式；它使用現(xiàn)有的開發(fā)技術(shù)；使用現(xiàn)有的開發(fā)技巧； Ajax 完美的集成了 Web 瀏覽器提供的功能。當(dāng)然 Ajax 也存在一些