交互網(wǎng)頁設(shè)計(jì)(畢業(yè)論文)

《交互網(wǎng)頁設(shè)計(jì)(畢業(yè)論文)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在學(xué)術(shù)論文-天天文庫。

1、武漢理工大學(xué)畢業(yè)設(shè)計(jì)目錄一、異步交互的實(shí)現(xiàn)：11、同步Web應(yīng)用模型與異步Web應(yīng)用模型：12、Ajax異步通信技術(shù)：23、jQuery庫：4二、Ajax與jQuery技術(shù)實(shí)現(xiàn)二級(jí)連動(dòng)下拉列表41、任務(wù)描述：42、數(shù)據(jù)庫設(shè)計(jì)：53、HTML頁面設(shè)計(jì)：54、JavaScript腳本程序main.js：65、服務(wù)器端程序66、分析總結(jié)：8三、一個(gè)完整的交互頁面分析91、界面設(shè)計(jì)及設(shè)計(jì)思路：92、相關(guān)HTML頁面代碼：93、Js腳本設(shè)計(jì)：134、服務(wù)器端ASP程序設(shè)計(jì)：165、頁面交互分析：196、小結(jié)：2021武漢理工大學(xué)畢業(yè)設(shè)

2、計(jì)交互網(wǎng)頁設(shè)計(jì)——Ajax與jQuery技術(shù)實(shí)現(xiàn)網(wǎng)頁異步交互一個(gè)優(yōu)秀的網(wǎng)站通常會(huì)有以下幾個(gè)方面的優(yōu)勢(shì)：漂亮的設(shè)計(jì)、友好的界面、規(guī)范的結(jié)構(gòu)、智能化的后臺(tái)處理以及充實(shí)的內(nèi)容，另外還有一個(gè)不可忽視的就是良好的交互性。網(wǎng)站的交互性通常是給用戶網(wǎng)頁瀏覽過程中良好體驗(yàn)的一個(gè)非常重要的環(huán)節(jié)，滿足用戶的瀏覽需求，對(duì)用戶的選擇作出“及時(shí)”的響應(yīng)，是交互性網(wǎng)頁設(shè)計(jì)的關(guān)鍵。網(wǎng)頁設(shè)計(jì)者一定要明白，缺乏交互性的網(wǎng)站即使看上去很美也是沒有生命力的。“交互”的本質(zhì)就是用戶（客戶端）發(fā)出請(qǐng)求，通過網(wǎng)絡(luò)傳送到服務(wù)器（服務(wù)器端），服務(wù)器端處理用戶的請(qǐng)求后得到結(jié)

3、果，再次通過網(wǎng)絡(luò)傳送到客戶端，客戶端將返回的結(jié)果展示給用戶?，F(xiàn)在的交互式網(wǎng)頁設(shè)計(jì)技術(shù)中，使用的最為廣泛的就是Ajax技術(shù)，那么什么是Ajax呢？如何實(shí)現(xiàn)Ajax的應(yīng)用呢？以下就圍繞著這兩個(gè)問題并通過實(shí)例進(jìn)行說明。一、異步交互的實(shí)現(xiàn)：1、同步Web應(yīng)用模型與異步Web應(yīng)用模型：傳統(tǒng)的網(wǎng)頁設(shè)計(jì)技術(shù)中，“交互”就已經(jīng)存在，但與Ajax異步通信之間存在有一定的區(qū)別，看下面圖示：客戶端用戶　　用戶活動(dòng)　　活動(dòng)HTTPHTML請(qǐng)求CSS程序處理服務(wù)器端客戶端客戶界面JavaScript　　顯示Ajax引擎HTTPXML請(qǐng)求程序處理服務(wù)器

4、端21武漢理工大學(xué)畢業(yè)設(shè)計(jì)從圖示中，可以看到，傳統(tǒng)的Web應(yīng)用模型中，客戶端與服務(wù)器端是直接通信的，客戶端發(fā)出請(qǐng)求后，一直等待服務(wù)器端的返回?cái)?shù)據(jù)，直到服務(wù)器端處理完成返回?cái)?shù)據(jù)后，客戶端才會(huì)顯示出處理結(jié)果，中間的數(shù)據(jù)傳遞過程和處理過程就是客戶的等待的過程，瀏覽器中往往是顯示一片空白，這就是同步應(yīng)用模型，其最大缺點(diǎn)就是：頁面全刷新，用戶等待時(shí)間長(zhǎng)，體驗(yàn)差。異步Web應(yīng)用模型中，弱化了客戶界面前臺(tái)的表單功能，不再由表單來實(shí)現(xiàn)數(shù)據(jù)的傳遞，轉(zhuǎn)而通過Ajax引擎向服務(wù)器端傳遞數(shù)據(jù)，Ajax功能的實(shí)現(xiàn)則通過JavaScript語言來完成，

5、服務(wù)器端返回的數(shù)據(jù)也通過Ajax引擎，利用JavaScript來操作HtmlDOM更新頁面。由于與服務(wù)器端的數(shù)據(jù)交流是由Ajax引擎完成，客戶在前臺(tái)的操作是不會(huì)被打斷的，即數(shù)據(jù)在傳遞的過程中，用戶可以繼續(xù)其他的操作，這實(shí)際上也就是我們常說的“局部刷新”技術(shù)，用戶的體驗(yàn)是非常完美的，在良好的網(wǎng)絡(luò)狀態(tài)下，甚至與我們的本機(jī)應(yīng)用程序操作體驗(yàn)近似。2、Ajax異步通信技術(shù)：Ajax（AsynchronousJavaScriptAndXML，異步JavaScript和XML）并不是什么新的語言或技術(shù)，而是使用JavaScript和XML

6、完成的異步發(fā)送請(qǐng)求。Ajax實(shí)際上就是JavaScript語言操作了一個(gè)新的對(duì)象，這個(gè)對(duì)象就是XMLHttpRequest對(duì)象，XMLHttpRequest就是異步發(fā)送請(qǐng)求的對(duì)象，這就是Ajax技術(shù)的核心，而開發(fā)Ajax程序則需要完成五件事情，分別是：獲取XMLHttpRequest對(duì)象、注冊(cè)回調(diào)方法、打開請(qǐng)求、發(fā)送請(qǐng)求、編寫回調(diào)方法。l獲取XMLHttpRequest對(duì)象：由于不同的瀏覽器對(duì)W3C標(biāo)準(zhǔn)的支持程度是不同的，所以在網(wǎng)頁編程中一定要考慮到瀏覽器的兼容問題varxmlHttp;//定義全局的XMLHttpReque

7、stfunctioncreateXMLHttpRequest(){//適用IE6以下版本的IEif(window.ActiveXObject){xmlHttp=newActiveXObject("Microsoft.XMLHttp");}//適用IE7、IE8、FireFox等主流瀏覽器21武漢理工大學(xué)畢業(yè)設(shè)計(jì)elseif(window.XMLHttpRequest){xmlHttp=newXMLHttpRequest();}}l注冊(cè)回調(diào)方法：回調(diào)方法會(huì)監(jiān)聽服務(wù)器端的響應(yīng)，在發(fā)送異步請(qǐng)求后，回調(diào)方法會(huì)每隔一段時(shí)間被調(diào)用一次x

8、mlhttp.onreadystatechange=callback;l打開請(qǐng)求：open()方法有三個(gè)參數(shù)，其中第一個(gè)參數(shù)是請(qǐng)求方式，可選值為GET或POST，建議使用POST；第二個(gè)參數(shù)是請(qǐng)求資源的URL，實(shí)際是服務(wù)器端響應(yīng)程序；第三個(gè)參數(shù)是一個(gè)布爾值，true表示為異步請(qǐng)求。為解決瀏