1、目 錄一、異步交互的實(shí)現(xiàn)：11、同步Web應(yīng)用模型與異步Web應(yīng)用模型：12、Ajax異步通信技術(shù)：23、jQuery庫(kù)：4二、Ajax與jQuery技術(shù)實(shí)現(xiàn)二級(jí)連動(dòng)下拉列表41、任務(wù)描述：42、數(shù)據(jù)庫(kù)設(shè)計(jì)：53、HTML頁(yè)面設(shè)計(jì)：54、JavaScript腳本程序main.js：65、服務(wù)器端程序66、分析總結(jié)：8三、一個(gè)完整的交互頁(yè)面分析91、界面設(shè)計(jì)及設(shè)計(jì)思路：92、相關(guān)HTML頁(yè)面代碼：93、Js腳本設(shè)計(jì)：134、服務(wù)器端ASP程序設(shè)計(jì)：165、頁(yè)面交互分析：196、小結(jié)：20交互網(wǎng)頁(yè)設(shè)計(jì)Ajax與jQuery技術(shù)實(shí)現(xiàn)網(wǎng)頁(yè)異步交互一個(gè)優(yōu)秀的網(wǎng)站通常會(huì)有以下幾個(gè)方面的優(yōu)勢(shì)：漂亮的設(shè)計(jì)、友

2、好的界面、規(guī)范的結(jié)構(gòu)、智能化的后臺(tái)處理以及充實(shí)的內(nèi)容，另外還有一個(gè)不可忽視的就是良好的交互性。網(wǎng)站的交互性通常是給用戶(hù)網(wǎng)頁(yè)瀏覽過(guò)程中良好體驗(yàn)的一個(gè)非常重要的環(huán)節(jié)，滿(mǎn)足用戶(hù)的瀏覽需求，對(duì)用戶(hù)的選擇作出“及時(shí)”的響應(yīng)，是交互性網(wǎng)頁(yè)設(shè)計(jì)的關(guān)鍵。網(wǎng)頁(yè)設(shè)計(jì)者一定要明白，缺乏交互性的網(wǎng)站即使看上去很美也是沒(méi)有生命力的?！敖换ァ钡谋举|(zhì)就是用戶(hù)（客戶(hù)端）發(fā)出請(qǐng)求，通過(guò)網(wǎng)絡(luò)傳送到服務(wù)器（服務(wù)器端），服務(wù)器端處理用戶(hù)的請(qǐng)求后得到結(jié)果，再次通過(guò)網(wǎng)絡(luò)傳送到客戶(hù)端，客戶(hù)端將返回的結(jié)果展示給用戶(hù)?，F(xiàn)在的交互式網(wǎng)頁(yè)設(shè)計(jì)技術(shù)中，使用的最為廣泛的就是Ajax技術(shù)，那么什么是Ajax呢？如何實(shí)現(xiàn)Ajax的應(yīng)用呢？以下就圍繞著這兩

3、個(gè)問(wèn)題并通過(guò)實(shí)例進(jìn)行說(shuō)明。一、異步交互的實(shí)現(xiàn)：1、同步Web應(yīng)用模型與異步Web應(yīng)用模型：傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)中，“交互”就已經(jīng)存在，但與Ajax異步通信之間存在有一定的區(qū)別，看下面圖示：客戶(hù)端用戶(hù)用戶(hù)活動(dòng)活動(dòng)HTTP HTML請(qǐng)求 CSS程序處理服務(wù)器端客戶(hù)端客戶(hù)界面JavaScript顯示Ajax引擎HTTP XML請(qǐng)求程序處理服務(wù)器端從圖示中，可以看到，傳統(tǒng)的Web應(yīng)用模型中，客戶(hù)端與服務(wù)器端是直接通信的，客戶(hù)端發(fā)出請(qǐng)求后，一直等待服務(wù)器端的返回?cái)?shù)據(jù)，直到服務(wù)器端處理完成返回?cái)?shù)據(jù)后，客戶(hù)端才會(huì)顯示出處理結(jié)果，中間的數(shù)據(jù)傳遞過(guò)程和處理過(guò)程就是客戶(hù)的等待的過(guò)程，瀏覽器中往往是顯示一片空白，這就

4、是同步應(yīng)用模型，其最大缺點(diǎn)就是：頁(yè)面全刷新，用戶(hù)等待時(shí)間長(zhǎng)，體驗(yàn)差。異步Web應(yīng)用模型中，弱化了客戶(hù)界面前臺(tái)的表單功能，不再由表單來(lái)實(shí)現(xiàn)數(shù)據(jù)的傳遞，轉(zhuǎn)而通過(guò)Ajax引擎向服務(wù)器端傳遞數(shù)據(jù)，Ajax功能的實(shí)現(xiàn)則通過(guò)JavaScript語(yǔ)言來(lái)完成，服務(wù)器端返回的數(shù)據(jù)也通過(guò)Ajax引擎，利用JavaScript來(lái)操作Html DOM更新頁(yè)面。由于與服務(wù)器端的數(shù)據(jù)交流是由Ajax引擎完成，客戶(hù)在前臺(tái)的操作是不會(huì)被打斷的，即數(shù)據(jù)在傳遞的過(guò)程中，用戶(hù)可以繼續(xù)其他的操作，這實(shí)際上也就是我們常說(shuō)的“局部刷新”技術(shù)，用戶(hù)的體驗(yàn)是非常完美的，在良好的網(wǎng)絡(luò)狀態(tài)下，甚至與我們的本機(jī)應(yīng)用程序操作體驗(yàn)近似。2、Ajax異

5、步通信技術(shù)：Ajax（Asynchronous JavaScript And XML，異步JavaScript和XML）并不是什么新的語(yǔ)言或技術(shù)，而是使用JavaScript和XML完成的異步發(fā)送請(qǐng)求。Ajax實(shí)際上就是JavaScript語(yǔ)言操作了一個(gè)新的對(duì)象，這個(gè)對(duì)象就是XMLHttpRequest對(duì)象，XMLHttpRequest就是異步發(fā)送請(qǐng)求的對(duì)象，這就是Ajax技術(shù)的核心，而開(kāi)發(fā)Ajax程序則需要完成五件事情，分別是：獲取XMLHttpRequest對(duì)象、注冊(cè)回調(diào)方法、打開(kāi)請(qǐng)求、發(fā)送請(qǐng)求、編寫(xiě)回調(diào)方法。l 獲取XMLHttpRequest對(duì)象：由于不同的瀏覽器對(duì)W3C標(biāo)準(zhǔn)的支持程度

6、是不同的，所以在網(wǎng)頁(yè)編程中一定要考慮到瀏覽器的兼容問(wèn)題var xmlHttp;/定義全局的XMLHttpRequestfunction createXMLHttpRequest()/適用IE6以下版本的IEif(window.ActiveXObject) xmlHttp = new ActiveXObject(Microsoft. XMLHttp);/適用IE7、IE8、FireFox等主流瀏覽器 else if(window.XMLHttpRequest) xmlHttp = new XMLHttpRequest();l 注冊(cè)回調(diào)方法：回調(diào)方法會(huì)監(jiān)聽(tīng)服務(wù)器端的響應(yīng)，在發(fā)送異步請(qǐng)求后，回調(diào)方法

7、會(huì)每隔一段時(shí)間被調(diào)用一次xmlhttp.onreadystatechange = callback;l 打開(kāi)請(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)求。為解決瀏覽器緩存問(wèn)題，通常在URL中使用時(shí)間戳來(lái)欺騙瀏覽器。xmlhttp.open(“POST”, URL, true);l 發(fā)送請(qǐng)求:GET請(qǐng)求與POST請(qǐng)求的設(shè)置的參數(shù)是不同的。xmlHttp.send(content)l 編寫(xiě)回調(diào)方法：回調(diào)函數(shù)通常是獲取服務(wù)器的返回?cái)?shù)據(jù)，并通過(guò)

8、操作DOM，將結(jié)果顯示在網(wǎng)頁(yè)中。在回調(diào)函數(shù)中通常要判斷兩個(gè)狀態(tài)值，xmhttp.readyState=4代表對(duì)象讀取服務(wù)器響應(yīng)結(jié)束，xmlhttp.status = 200表示服務(wù)器正確完成了響應(yīng)。function callback() if(xmhttp.readyState = 4) if(xmlhttp.status = 200) var text = xmlhttp.responseText;/獲取服務(wù)器的響應(yīng)文本3、jQuery庫(kù)：Ajax程序的開(kāi)發(fā)是一個(gè)很繁瑣的事情，五個(gè)步驟缺一不可，遇到實(shí)際問(wèn)題要處理的事情會(huì)更多，那么有簡(jiǎn)化的方法來(lái)開(kāi)發(fā)Ajax程序嗎？答案就是jQuery。jQu

9、ery是一個(gè)優(yōu)秀的JavaScript庫(kù)，極大地簡(jiǎn)化了JavaScript開(kāi)發(fā)人員遍歷HTML文檔、操作DOM、處理事件、執(zhí)行動(dòng)畫(huà)和開(kāi)發(fā)Ajax的操作。其獨(dú)特而又優(yōu)雅的代碼風(fēng)格改變了JavaScript程序員的設(shè)計(jì)思路和編寫(xiě)程序的方式。jQuery將所有的Ajax操作封裝到Ajax方法中，使得開(kāi)發(fā)者處理Ajax的時(shí)候能夠?qū)Ｐ奶幚順I(yè)務(wù)邏輯而無(wú)需關(guān)心復(fù)雜的瀏覽器兼容性和XMLHttpRequest對(duì)象的創(chuàng)建和使用的問(wèn)題，極大地簡(jiǎn)化了我們的編程，其主要的Ajax方法有：l load( url, data, callback )：載入遠(yuǎn)程 HTML 文件代碼并插入至 DOM 中l(wèi) jQuery.get

10、( url, data, callback )：使用GET方式來(lái)進(jìn)行異步請(qǐng)求l jQuery.post( url, data, callback, type ) ：使用POST方式來(lái)進(jìn)行異步請(qǐng)求l jQuery.Ajax( options ) : 通過(guò) HTTP 請(qǐng)求加載遠(yuǎn)程數(shù)據(jù)二、Ajax與jQuery技術(shù)實(shí)現(xiàn)二級(jí)連動(dòng)下拉列表1、任務(wù)描述：下面是在網(wǎng)頁(yè)中截取的圖片：由于鄉(xiāng)鎮(zhèn)較多，可能達(dá)到上百個(gè)，下拉列表太長(zhǎng)，造成用戶(hù)查找相應(yīng)數(shù)據(jù)很困難，于是我們希望選擇了首字母后，鄉(xiāng)鎮(zhèn)下拉列表中只顯示對(duì)應(yīng)字母開(kāi)始的那些鄉(xiāng)鎮(zhèn)名，方便用戶(hù)的操作，如下圖效果：首字母為B，鄉(xiāng)鎮(zhèn)只顯示出對(duì)應(yīng)的兩項(xiàng)數(shù)據(jù)。2、數(shù)據(jù)庫(kù)設(shè)計(jì)：

11、我們使用最簡(jiǎn)單的ACCESS數(shù)據(jù)庫(kù)來(lái)保存相關(guān)的鄉(xiāng)鎮(zhèn)數(shù)據(jù)，在ACCESS中建立數(shù)據(jù)表XIANGZHENG：為了得到鄉(xiāng)鎮(zhèn)的首字母，我們建立查詢(xún)cx_xzFirstLetter：SELECT DISTINCT left(xiangzhengEname,1) AS firstLetterFROM xiangzhengORDER BY left(xiangzhengEname,1);3、HTML頁(yè)面設(shè)計(jì)：我們只需要建立一個(gè)非常簡(jiǎn)單的頁(yè)面，下拉列表中的選項(xiàng)都是空白的，內(nèi)部的數(shù)據(jù)是在頁(yè)面生成后，由服務(wù)器端獲取的。HTML頁(yè)面中關(guān)鍵代碼： 所屬鄉(xiāng)鎮(zhèn)名稱(chēng) 首字母鄉(xiāng)鎮(zhèn)4、JavaScript腳本程序main.js

12、：前臺(tái)的HTML文件中，表單都已經(jīng)被省略，數(shù)據(jù)的傳遞完全通過(guò)后臺(tái)Ajax程序完成，下面是利用jQuery編寫(xiě)的Ajax源代碼$(document).ready(function()/鄉(xiāng)鎮(zhèn)名稱(chēng)與首字母兩個(gè)下拉列表連動(dòng)/定義函數(shù)，當(dāng)首字母發(fā)生變化后，函數(shù)被調(diào)用，改變鄉(xiāng)鎮(zhèn)的數(shù)據(jù)var getXzOpt=function()/建立時(shí)間戳curtimevar curtime=new Date();curtime=curtime.getTime();tLetter=$(#xzletter).val();$.get(./asp/getXiangzhengOption.asp,letter:tLetter,t

13、ime:curtime,function(d)$(#xiangzhengname).empty().append(d););/頁(yè)面被加載后即執(zhí)行下面的Ajax方法$.get(./asp/getXzFirstLetterOption.asp,function(d)$(#xzletter).append(d).change(getXzOpt);getXzOpt();););5、服務(wù)器端程序服務(wù)器端用于連接數(shù)據(jù)庫(kù)，在數(shù)據(jù)庫(kù)中獲取前臺(tái)頁(yè)面所需要的數(shù)據(jù)，并傳遞給前臺(tái)Ajax引擎。sub makeOption(runsql)thesql=runsqlrs.open thesql,conn,3if not

14、(rs.eof and rs.bof) thenarr=rs.getrows()y=ubound(arr,2)相當(dāng)于記錄個(gè)數(shù)for i=0 to yresponse.Write(&arr(0,i)&)nextend ifend sub文件getXzFirstLetterOption.asp源代碼：%Set rs=Server.CreateObject(Adodb.RecordSet)sql=select firstletter from cs_xzFirstLetterresponse.Buffer=trueresponse.Write(全部)makeOption sqlresponse.Fl

15、ush()rs.closeset rs=nothing%文件getXiangzhengOption.asp源代碼：6、分析總結(jié)：上述幾個(gè)文件中，中間的橋梁就是main.js文件，實(shí)際上也就是它完成了Ajax引擎的作用，由于使用jQuery風(fēng)格，可以看到代碼只有幾行，卻完成了Ajax程序需要完成的五件事件，并且將結(jié)果寫(xiě)入了網(wǎng)頁(yè)，我們?cè)賮?lái)簡(jiǎn)要分析一下其中的關(guān)鍵代碼：$.get(./asp/getXzFirstLetterOption.asp,function(d)$(#xzletter).append(d).change(getXzOpt);getXzOpt(););$.get()方法是jQuer

16、y封裝的Ajax方法，jQuery將XMLHttpRequest對(duì)象的獲取、回調(diào)方法的注冊(cè)、打開(kāi)請(qǐng)求、發(fā)送請(qǐng)求這四個(gè)步驟都已經(jīng)封裝在get()方法中，我們只需要簡(jiǎn)單的調(diào)用即可，其完整的格式是：jQuery.get(url,data,callback)，它有三個(gè)參數(shù)，第一個(gè)參數(shù)url為發(fā)送請(qǐng)求的地址，第二個(gè)參數(shù)是GET方式傳遞的數(shù)據(jù)，第三個(gè)參數(shù)是回調(diào)函數(shù)，也是Ajax的第五件事情在這里完成。回調(diào)函數(shù)中，通過(guò)一個(gè)語(yǔ)句$(#xzletter).append(d).change(getXzOpt)就完成了兩大功能，一個(gè)將服務(wù)器端數(shù)據(jù)寫(xiě)入了頁(yè)面，這是append()方法完成的，二是給首字母下拉列表注冊(cè)了

17、change事件，這是change()方法完成的，在這里，我們不得不感嘆jQuery代碼的簡(jiǎn)練，完美地體現(xiàn)了其WRITE LESS,DO MORE的宗旨。三、一個(gè)完整的交互頁(yè)面分析1、界面設(shè)計(jì)及設(shè)計(jì)思路：整個(gè)頁(yè)面設(shè)計(jì)左右兩部分，左側(cè)菜單項(xiàng)，當(dāng)點(diǎn)擊時(shí)將會(huì)導(dǎo)入右側(cè)的表單，表單內(nèi)的下拉列表項(xiàng)均由數(shù)據(jù)庫(kù)中相關(guān)數(shù)據(jù)控制，當(dāng)點(diǎn)擊“提交”按鈕后，當(dāng)前表單中錄入的數(shù)據(jù)會(huì)寫(xiě)入到數(shù)據(jù)庫(kù)中，并且在下方顯示出新添加的數(shù)據(jù)行。下方的“編輯”按鈕可實(shí)現(xiàn)當(dāng)前行數(shù)據(jù)的修改，“刪除”按鈕可實(shí)現(xiàn)當(dāng)前行數(shù)據(jù)的刪除。2、相關(guān)HTML頁(yè)面代碼：左側(cè)菜單頁(yè)main.asp的主要部分：醴陵市安全生產(chǎn)培訓(xùn)信息管理系統(tǒng)醴陵市安全生產(chǎn)培訓(xùn)信息管

18、理系統(tǒng) 基本數(shù)據(jù)錄入 企業(yè)基本信息 新訓(xùn)學(xué)員數(shù)據(jù)錄入 表單單獨(dú)放在一個(gè)文件中（t_qiyeinfo.html）：企業(yè)基本信息錄入 企業(yè)名稱(chēng) * 企業(yè)拼音簡(jiǎn)稱(chēng) 所屬行業(yè) 所屬鄉(xiāng)鎮(zhèn)名稱(chēng) 首字母 鄉(xiāng)鎮(zhèn) 法人 * 聯(lián)系電話(huà) * 企業(yè)性質(zhì) 私營(yíng)企業(yè) 三資企業(yè) 聯(lián)營(yíng)企業(yè) 集體所有制企業(yè) 全民所有制企業(yè) 企業(yè)規(guī)模 主要產(chǎn)品 * 登錄密碼 * 是否允許添加數(shù)據(jù) 是否 3、Js腳本設(shè)計(jì)：菜單項(xiàng)的點(diǎn)擊，將會(huì)激活js腳本中相應(yīng)的代碼，腳本中使用了jQuery代碼應(yīng)用Ajax技術(shù)導(dǎo)入右側(cè)表單，并將表單中的下拉列表初始化，并為下拉列表及提交按鈕等綁定事件，實(shí)現(xiàn)用戶(hù)的提交請(qǐng)求等功能。/左邊菜單項(xiàng)的點(diǎn)擊，右邊導(dǎo)入表單，以方

19、便添加記錄$(#lefter a).bind(click,function()$(#lefter a).removeClass(cur);$(this).addClass(cur);bn=$(this).attr(bname);switch(bn)case qiyeinfo:$(#righter1).load(./html/t_qiyeinfo.html,function()rightAlign();var curtime=new Date();curtime=curtime.getTime();/鄉(xiāng)鎮(zhèn)名稱(chēng)與首字母兩個(gè)下拉列表連動(dòng)var getXzOpt=function()tLetter=$

20、(#xzletter).val();$.get(./asp/getXiangzhengOption.asp,letter:tLetter,time:curtime,function(d)$(#xiangzhengname).empty().append(d););$.get(./asp/getXzFirstLetterOption.asp,time:curtime,function(d)$(#xzletter).append(d).change(getXzOpt);getXzOpt(););$.get(./asp/getHangyeOption.asp,time:curtime,functio

21、n(d)$(#hangyeselect).append(d););$.get(./asp/getGuimoOption.asp,time:curtime,function(d)$(#guimoselect).append(d););$(#autocreate).live(click,function()var tmp1=parseInt(Math.random()*10000);var tmp2=;for(i=0;i3;i+) tmp2+=String.fromCharCode(97+parseInt(Math.random()*26); var tmp=tmp2.toUpperCase()+

22、tmp1$(#pass).val(tmp););/* 企業(yè)名稱(chēng)錄入時(shí)自動(dòng)填寫(xiě)漢字的拼音 */$(#qyname).bind(change,here:$(#qyEname),writePinYin);$(#qyname).bind(keyup,here:$(#qyEname),writePinYin););showTable(bn);/頁(yè)面下方表格的顯示break;);/添加記錄按鈕的點(diǎn)擊，使得表單數(shù)據(jù)提交$(#addsubmit).live(click,function()var tbname=$(this).attr(tablename);var notHasNull=checkForm(t

23、bname);if(!notHasNull)alert(數(shù)據(jù)不完整！);return;var ilen=$(.isdata).length;var sendValue=tablename=+tbname+&;for(i=0;iilen;i+)tempValue=escape($(.isdata).eq(i).val();sendValue+=input+i+=+tempValue;if(i!=ilen-1)sendValue+=&;$.post(./asp/addrecord.asp,sendValue,function(data)/添加記錄后顯示表內(nèi)數(shù)據(jù)showTable(tbname);/

24、清除表單中的數(shù)據(jù)clearForm(tbname);alert(data);););4、服務(wù)器端ASP程序設(shè)計(jì)：從上段JS程序中可以看到，內(nèi)部有多段Ajax程序與服務(wù)器端的多個(gè)ASP程序進(jìn)行了交互，這里不將ASP程序全部列舉。ShowTable.asp文件的作用有兩個(gè)，一是表單被調(diào)入時(shí)即在表單下方顯示出表內(nèi)最近被更新的數(shù)據(jù)，二是當(dāng)添加了新數(shù)據(jù)時(shí)，馬上將新數(shù)據(jù)顯示在表格內(nèi)，下面是它的源程序代碼：%Server.ScriptTimeout=999Set rs=Server.CreateObject(Adodb.RecordSet)response.Buffer=truetbname=request

25、.QueryString(tablename)curpici=request.QueryString(pici)if tbname= or tbname=empty thentbname=xiangzhengend ifif tbname=stu or tbname=qiyeinfo thentopten=top 10elsetopten=end ifsql=select &topten& * from &tbname& order by id descdim fieldnameselect case tbnamecase qiyeinfofieldname=array(企業(yè)基本信息（最近錄入

26、）,企業(yè)名稱(chēng),拼音簡(jiǎn)稱(chēng),所屬行業(yè),所屬鄉(xiāng)鎮(zhèn),法人代表,聯(lián)系電話(huà),企業(yè)性質(zhì),企業(yè)規(guī)模,主要產(chǎn)品,登錄密碼,添加權(quán)限)case end selectresponse.write(&fieldname(0)&)rs.open sql,conn,3response.Write()response.Write(操作ID)response.Write(&fieldname(i)&)nextresponse.Write()顯示出所有的記錄while not rs.eofresponse.Write()response.Write()response.Write(&rs(0)&)response.Write(&rs(i)& )nextrs.movenextresponse.Write()wendresponse.Write()response.Flush()%5、頁(yè)面交互分析：現(xiàn)在我們看看具體執(zhí)行時(shí)的效率，為了方便，我們使用FireFox瀏覽器的插件FireBug對(duì)頁(yè)面的代碼執(zhí)行過(guò)程及時(shí)間上進(jìn)行分析。下圖是我們點(diǎn)擊左側(cè)“企業(yè)基本信息”鏈接后，執(zhí)行的一系列與服務(wù)器的交互操作：可以看到，通過(guò)Ajax方式一共與服務(wù)器端有六次數(shù)據(jù)請(qǐng)求，我們通過(guò)下表對(duì)其功能分別進(jìn)行說(shuō)明：次序服務(wù)器端程序耗用時(shí)間作用第1次t_qiyeinfo.html56ms遠(yuǎn)程導(dǎo)入表單第2次showtab