資源描述：
《交互網(wǎng)頁設計(畢業(yè)論文)》由會員上傳分享，免費在線閱讀，更多相關內容在學術論文-天天文庫。
1、武漢理工大學畢業(yè)設計目錄一、異步交互的實現(xiàn)：11、同步Web應用模型與異步Web應用模型：12、Ajax異步通信技術：23、jQuery庫：4二、Ajax與jQuery技術實現(xiàn)二級連動下拉列表41、任務描述：42、數(shù)據(jù)庫設計：53、HTML頁面設計：54、JavaScript腳本程序main.js：65、服務器端程序66、分析總結：8三、一個完整的交互頁面分析91、界面設計及設計思路：92、相關HTML頁面代碼：93、Js腳本設計：134、服務器端ASP程序設計：165、頁面交互分析：196、小結：2021武漢理工大學畢業(yè)設
2、計交互網(wǎng)頁設計——Ajax與jQuery技術實現(xiàn)網(wǎng)頁異步交互一個優(yōu)秀的網(wǎng)站通常會有以下幾個方面的優(yōu)勢：漂亮的設計、友好的界面、規(guī)范的結構、智能化的后臺處理以及充實的內容，另外還有一個不可忽視的就是良好的交互性。網(wǎng)站的交互性通常是給用戶網(wǎng)頁瀏覽過程中良好體驗的一個非常重要的環(huán)節(jié)，滿足用戶的瀏覽需求，對用戶的選擇作出“及時”的響應，是交互性網(wǎng)頁設計的關鍵。網(wǎng)頁設計者一定要明白，缺乏交互性的網(wǎng)站即使看上去很美也是沒有生命力的?！敖换ァ钡谋举|就是用戶（客戶端）發(fā)出請求，通過網(wǎng)絡傳送到服務器（服務器端），服務器端處理用戶的請求后得到結
3、果，再次通過網(wǎng)絡傳送到客戶端，客戶端將返回的結果展示給用戶?，F(xiàn)在的交互式網(wǎng)頁設計技術中，使用的最為廣泛的就是Ajax技術，那么什么是Ajax呢？如何實現(xiàn)Ajax的應用呢？以下就圍繞著這兩個問題并通過實例進行說明。一、異步交互的實現(xiàn)：1、同步Web應用模型與異步Web應用模型：傳統(tǒng)的網(wǎng)頁設計技術中，“交互”就已經(jīng)存在，但與Ajax異步通信之間存在有一定的區(qū)別，看下面圖示：客戶端用戶 用戶活動 活動HTTPHTML請求CSS程序處理服務器端客戶端客戶界面JavaScript 顯示Ajax引擎HTTPXML請求程序處理服務器
4、端21武漢理工大學畢業(yè)設計從圖示中，可以看到，傳統(tǒng)的Web應用模型中，客戶端與服務器端是直接通信的，客戶端發(fā)出請求后，一直等待服務器端的返回數(shù)據(jù)，直到服務器端處理完成返回數(shù)據(jù)后，客戶端才會顯示出處理結果，中間的數(shù)據(jù)傳遞過程和處理過程就是客戶的等待的過程，瀏覽器中往往是顯示一片空白，這就是同步應用模型，其最大缺點就是：頁面全刷新，用戶等待時間長，體驗差。異步Web應用模型中，弱化了客戶界面前臺的表單功能，不再由表單來實現(xiàn)數(shù)據(jù)的傳遞，轉而通過Ajax引擎向服務器端傳遞數(shù)據(jù)，Ajax功能的實現(xiàn)則通過JavaScript語言來完成，
5、服務器端返回的數(shù)據(jù)也通過Ajax引擎，利用JavaScript來操作HtmlDOM更新頁面。由于與服務器端的數(shù)據(jù)交流是由Ajax引擎完成，客戶在前臺的操作是不會被打斷的，即數(shù)據(jù)在傳遞的過程中，用戶可以繼續(xù)其他的操作，這實際上也就是我們常說的“局部刷新”技術，用戶的體驗是非常完美的，在良好的網(wǎng)絡狀態(tài)下，甚至與我們的本機應用程序操作體驗近似。2、Ajax異步通信技術：Ajax（AsynchronousJavaScriptAndXML，異步JavaScript和XML）并不是什么新的語言或技術，而是使用JavaScript和XML
6、完成的異步發(fā)送請求。Ajax實際上就是JavaScript語言操作了一個新的對象，這個對象就是XMLHttpRequest對象，XMLHttpRequest就是異步發(fā)送請求的對象，這就是Ajax技術的核心，而開發(fā)Ajax程序則需要完成五件事情，分別是：獲取XMLHttpRequest對象、注冊回調方法、打開請求、發(fā)送請求、編寫回調方法。l獲取XMLHttpRequest對象：由于不同的瀏覽器對W3C標準的支持程度是不同的，所以在網(wǎng)頁編程中一定要考慮到瀏覽器的兼容問題varxmlHttp;//定義全局的XMLHttpReque
7、stfunctioncreateXMLHttpRequest(){//適用IE6以下版本的IEif(window.ActiveXObject){xmlHttp=newActiveXObject("Microsoft.XMLHttp");}//適用IE7、IE8、FireFox等主流瀏覽器21武漢理工大學畢業(yè)設計elseif(window.XMLHttpRequest){xmlHttp=newXMLHttpRequest();}}l注冊回調方法：回調方法會監(jiān)聽服務器端的響應，在發(fā)送異步請求后，回調方法會每隔一段時間被調用一次x
8、mlhttp.onreadystatechange=callback;l打開請求：open()方法有三個參數(shù)，其中第一個參數(shù)是請求方式，可選值為GET或POST，建議使用POST；第二個參數(shù)是請求資源的URL，實際是服務器端響應程序；第三個參數(shù)是一個布爾值，true表示為異步請求。為解決瀏
