網(wǎng)頁(yè)設(shè)計(jì)技巧：用Dreamweaver制作AJAX網(wǎng)頁(yè)必備知識(shí)

網(wǎng)頁(yè)制作技術(shù)日新月異，新技術(shù)層出不窮，當(dāng)很多用戶(hù)還沉浸在web1.0時(shí)代樂(lè)樂(lè)津道時(shí)，web 2.0已經(jīng)走到了我們的面前。AJAX作為web 2.0應(yīng)用的一個(gè)重要組成部分，利用AJAX技術(shù)可以創(chuàng)建交互式網(wǎng)頁(yè)，給用戶(hù)提供良好的體驗(yàn)，因此，它一出現(xiàn)就受到了廣大用戶(hù)的歡迎，成為網(wǎng)頁(yè)開(kāi)發(fā)者的熱愛(ài)。然而AJAX網(wǎng)頁(yè)的開(kāi)發(fā)需要具備了JavaScript、CSS、XML、XHTML知識(shí)，對(duì)許多網(wǎng)頁(yè)開(kāi)發(fā)者來(lái)說(shuō)難度較大。為了解決這個(gè)問(wèn)題，提高網(wǎng)頁(yè)開(kāi)發(fā)者的效率，adobe公司的網(wǎng)頁(yè)設(shè)計(jì)工具Dreamweaver CS6中專(zhuān)門(mén)集成了用來(lái)開(kāi)發(fā)AJAX網(wǎng)頁(yè)的構(gòu)件，利用這些構(gòu)件，用戶(hù)不用書(shū)寫(xiě)一句代碼，只需簡(jiǎn)單地用鼠標(biāo)進(jìn)行拖放操作，就可以設(shè)計(jì)出令人羨慕的AJAX網(wǎng)頁(yè)，給你的網(wǎng)站增添光彩。

Dreamweaver CS6

在用Dreamweaver CS6開(kāi)發(fā)AJAX網(wǎng)頁(yè)之前，首先要了解一些開(kāi)發(fā)AJAX網(wǎng)頁(yè)的基礎(chǔ)知識(shí)。

一、什么是AJAX

AJAX是指Asynchromous Javascript and XML的縮寫(xiě)，翻譯成中文就是異步Javascript 和XML。所謂異步就是可以經(jīng)由超文本傳輸協(xié)議（http）向服務(wù)器發(fā)出請(qǐng)求，并且在等待該響應(yīng)時(shí)繼續(xù)處理另外的數(shù)據(jù)。AJAX的工作原理相當(dāng)于在用戶(hù)和服務(wù)器之間加了一個(gè)中間層，使用戶(hù)操作與服務(wù)器響應(yīng)異步化。并不是所有的用戶(hù)請(qǐng)求都提交給服務(wù)器，像一些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等，都交給AJAX引擎自己來(lái)做，只有確定需要從服務(wù)器讀取新的數(shù)據(jù)時(shí)再由AJAX引擎代為向服務(wù)器提交請(qǐng)求。例如，用戶(hù)以調(diào)用一個(gè)服務(wù)器端腳本來(lái)從一個(gè)數(shù)據(jù)庫(kù)中以XML方式檢索數(shù)據(jù)，把數(shù)據(jù)發(fā)送到存儲(chǔ)在一個(gè)數(shù)據(jù)庫(kù)的服務(wù)庫(kù)腳本，或者簡(jiǎn)單地裝載一個(gè)XML文件以填充你的web站點(diǎn)而不需要刷新該頁(yè)面。

AJAX圖標(biāo)

AJAX并不是一門(mén)新的語(yǔ)言或技術(shù)，它實(shí)際上是幾項(xiàng)技術(shù)按一定方式組合在一起，在共同的協(xié)作中發(fā)揮各自的作用，每種技術(shù)都有其獨(dú)特之處，合在一起就成了一個(gè)功能強(qiáng)大的新技術(shù)。

AJAX主要包含了以下幾種技術(shù)：

1.使用基于web標(biāo)準(zhǔn)的XHTML＋CSS呈現(xiàn)。

2.使用文檔對(duì)象模型（DOM）進(jìn)行動(dòng)態(tài)顯示及交互。

3.使用XML和XSLT進(jìn)行數(shù)據(jù)交換及相關(guān)操作。

4.使用XMLHttpRequest進(jìn)行異步數(shù)據(jù)查詢(xún)、檢索。

5.使用Javascript綁定和處理所有數(shù)據(jù)。

AJAX是使用客戶(hù)端腳本與web服務(wù)器交換數(shù)據(jù)的web應(yīng)用開(kāi)發(fā)方法。它一個(gè)大的特點(diǎn)是無(wú)需刷新頁(yè)面就可向服務(wù)器傳輸或讀寫(xiě)數(shù)據(jù)（又稱(chēng)無(wú)刷新更新頁(yè)面），這樣，web頁(yè)面不用打斷交互流程，進(jìn)行重新加載，就可以動(dòng)態(tài)地更新。使用AJAX技術(shù)，可以把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶(hù)端，利用客戶(hù)端閑置的處理能力來(lái)處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，達(dá)到節(jié)約ISP的空間及帶寬租用成本的目的，同時(shí)，使用AJAX技術(shù)，用戶(hù)可以創(chuàng)建接近本地桌面應(yīng)用的直接、高可用、更豐富、更動(dòng)態(tài)的web用戶(hù)界面，因此，AJAX技術(shù)大受歡迎，在許多網(wǎng)站得了廣泛應(yīng)用，隨著AJAX開(kāi)發(fā)技術(shù)的進(jìn)步，必將會(huì)有更多網(wǎng)站使用該技術(shù)。

二、什么是Spry

由于AJAX開(kāi)發(fā)需要具備較多的Javascript知識(shí)，而且要手工書(shū)寫(xiě)大量的代碼，所以不是一般用戶(hù)就能隨便使用的。為了減輕學(xué)習(xí)的難度，提高AJAX網(wǎng)頁(yè)的開(kāi)發(fā)效率，adobe開(kāi)發(fā)了一種叫Spry框架的AJAX技術(shù)，并且將它集成在Dreamweaver CS6中，這樣就可以讓普通用戶(hù)也能迅速開(kāi)發(fā)出具有良好用戶(hù)體驗(yàn)的AJAX網(wǎng)頁(yè)。

Spry框架

Spry框架是adobe出品的輕量級(jí)的支持AJAX的Javascript庫(kù)，它以HTML為中心，使用最基本的HTML、CSS和Javascript來(lái)實(shí)現(xiàn)豐富的web頁(yè)面體驗(yàn)。使用Spry框架可以顯示XML數(shù)據(jù)，并創(chuàng)建用來(lái)顯示動(dòng)態(tài)數(shù)據(jù)的交互式頁(yè)面元素，而無(wú)需刷新整個(gè)頁(yè)面。雖然這些文件存放在服務(wù)器上，實(shí)際上是被加載到瀏覽器中運(yùn)行的?？蚣艿挠脩?hù)將所有需要的文件鏈接到HTML文檔中，以使用不同的組件，來(lái)獲得更豐富的用戶(hù)體驗(yàn)。

三、Spry框架包括四種不同的工具

Spry數(shù)據(jù)：將XML數(shù)據(jù)添加到任何web頁(yè)面上，并且允許以AJAX樣式交互顯示數(shù)據(jù)，主要是通過(guò)Spry數(shù)據(jù)集來(lái)實(shí)現(xiàn)這一功能。

Spry表單工具：將表單元素，像文本域、列表等，與Javascript驗(yàn)證功能和友好的用戶(hù)錯(cuò)誤信息提示結(jié)合起來(lái)，它包括驗(yàn)證文本域構(gòu)件、驗(yàn)證文本區(qū)域構(gòu)件、驗(yàn)證選擇構(gòu)件、驗(yàn)證復(fù)選框構(gòu)件。

Spry布局工具：提供一系列精致的布局控件，包括選項(xiàng)卡式面板構(gòu)件、菜單欄構(gòu)件、可折疊面板構(gòu)件、折疊構(gòu)件。

Spry效果：是一個(gè)視覺(jué)增強(qiáng)功能，它用新級(jí)的功能來(lái)交互式的給頁(yè)面元素添加特殊顯示效果，可以將Spry效果應(yīng)用于使用Javascript 的HTML頁(yè)面上幾乎所有的元素。Spry效果包括顯示/漸穩(wěn)、高亮顏色、向上遮簾/向下遮簾、上滑/下滑、增大/收縮、晃動(dòng)、擠壓。

為了便于AJAX網(wǎng)頁(yè)的開(kāi)發(fā)，adobe將構(gòu)件的概念引進(jìn)了Spry框架。構(gòu)件是AJAX框架的基本功能，構(gòu)件被稱(chēng)為下一代的頁(yè)面UI的AJAX。一個(gè)構(gòu)件是由HTML、CSS、Javascript共同封裝的系統(tǒng)用戶(hù)界面。在Dreamweaver CS6中，Spry構(gòu)件是一個(gè)頁(yè)面元素，Spry框架支持一組用標(biāo)準(zhǔn)的HTML、CSS和Javascript編寫(xiě)的可重用構(gòu)件。常用的構(gòu)件有菜單欄、選項(xiàng)卡式面板、折疊構(gòu)件等，這些對(duì)象很難建立，需要高級(jí)的編碼能力，adobe公司預(yù)先做好這些構(gòu)件，并且將它們集成在Dreamweaver CS6中，這樣就可以讓普通用戶(hù)無(wú)需進(jìn)行復(fù)雜的編碼操作也能方便快捷地建立起AJAX網(wǎng)頁(yè)，實(shí)現(xiàn)復(fù)雜的用戶(hù)界面。每個(gè)構(gòu)件都關(guān)聯(lián)著唯一的CSS和Javascript文件。CSS文件包含著設(shè)置構(gòu)件樣式所需的全部信息，而Javascript文件則賦予構(gòu)件功能。當(dāng)用戶(hù)使用Dreamweaver CS6界面插入構(gòu)件時(shí)，Dreamweaver CS6會(huì)自動(dòng)將這些文件鏈接到頁(yè)面，以便構(gòu)件中包含該頁(yè)面的功能和樣式。

1.閱后如果喜歡，不妨點(diǎn)贊、評(píng)論和關(guān)注一下。

2.如果喜歡玩軟件，請(qǐng)關(guān)注本頭條號(hào)閱讀相關(guān)文章。

3.在學(xué)習(xí)中有什么問(wèn)題，歡迎與我溝通交流，今日頭條號(hào)搜索：微課傳媒，我在這里等你喲！

非常感謝您讀完創(chuàng)新互聯(lián)的這篇文章："網(wǎng)頁(yè)設(shè)計(jì)技巧：用Dreamweaver制作AJAX網(wǎng)頁(yè)必備知識(shí)"，僅為提供更多信息供用戶(hù)參考使用或?yàn)閷W(xué)習(xí)交流的方便。我們公司提供：網(wǎng)站建設(shè)、網(wǎng)站制作、官網(wǎng)建設(shè)、SEO優(yōu)化、小程序制作等服務(wù)，歡迎聯(lián)系我們提供您的需求。

網(wǎng)站名稱(chēng)：網(wǎng)頁(yè)設(shè)計(jì)技巧：用Dreamweaver制作AJAX網(wǎng)頁(yè)必備知識(shí)
當(dāng)前網(wǎng)址：http://bm7419.com/news18/324168.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、App開(kāi)發(fā)、靜態(tài)網(wǎng)站、App設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)公司、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)