SSH輕量級框架實(shí)踐課件：使用AJAX改進(jìn)和用戶體驗(yàn)

使用AJAX改進(jìn)和用戶體驗(yàn)本章目標(biāo)了解AJAX的應(yīng)用場合理解AJAX的實(shí)現(xiàn)過程掌握AJAX的實(shí)現(xiàn)技巧了解XMLHttpRequest對象的作用理解XMLHttpRequest對象的屬性和方法掌握XMLHttpRequest對象的應(yīng)用WEB2.0互聯(lián)網(wǎng)的前世今生互聯(lián)網(wǎng)的發(fā)展經(jīng)歷了以下幾個(gè)階段：黑暗年代

靜態(tài)網(wǎng)頁時(shí)代

動(dòng)態(tài)網(wǎng)頁時(shí)代WEB2.0時(shí)代WEB2.0概述

WEB2.0有別于以往，主要體現(xiàn)在以下幾個(gè)方面。用戶貢獻(xiàn)內(nèi)容內(nèi)容聚合——RSS更豐富的“用戶體驗(yàn)”，新的交互方式為什么用AJAXAJAX技術(shù)使我們可以通過JavaScript發(fā)送請求到服務(wù)器，并獲得返回結(jié)果。這就讓我們可以在必要的時(shí)候只更新頁面的一小部分，而不用整個(gè)頁面都刷新，這稱為“無刷新”技術(shù)。如圖2-5所示，搜狐首頁上的登錄功能就使用了AJAX技術(shù)。輸入登錄信息單擊“登錄”按鈕后，只是刷新登錄區(qū)域的內(nèi)容。首頁上信息很多，這就避免了重復(fù)加載，浪費(fèi)網(wǎng)絡(luò)資源。這是無刷新技術(shù)的第一個(gè)優(yōu)勢。

再看土豆網(wǎng)的例子，在觀看視頻的時(shí)候，我們可以在頁面上單擊其他按鈕執(zhí)行操作，由于只是局部刷新，頁面不會(huì)刷新，視頻繼續(xù)播放，不會(huì)受影響，如圖2-6所示。這體現(xiàn)了無刷新技術(shù)的第二個(gè)優(yōu)勢：提供連續(xù)的用戶體驗(yàn)，不因頁面刷新而中斷。什么是AJAXAiax是幾個(gè)單詞首字母的縮寫：AsynchronousJavaScriptAndXml。AJAX并不是一種全新的技術(shù)，而是整合了幾種現(xiàn)有的技術(shù)：JavaScript、XML和CSS。主要是JavaScript，我們通過JavaScript的XMLHttpRequest對象完成發(fā)送請求到服務(wù)器并獲得返回結(jié)果的任務(wù)，然后使用JavaScript更新局部的網(wǎng)頁。Asynchronous（異步）指的是JavaScript腳本發(fā)送請求后并不是一直等著服務(wù)器響應(yīng)，而是發(fā)送請求后繼續(xù)做別的事，請求響應(yīng)的處理是異步完成的。XML一般用于請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)的封裝，CSS用于美化頁面樣式。怎樣使用AJAX我們用一個(gè)實(shí)際的案例解釋AJAX的應(yīng)用。在用戶注冊信息時(shí)，通常因?yàn)檩斎氲挠脩裘驯皇褂枚槐橛忠槐榈刂貜?fù)注冊，這便不是好的用戶體驗(yàn)。如果當(dāng)用戶名輸入框失去焦點(diǎn)時(shí)，就發(fā)送請求到服務(wù)器，判斷用戶是否存在。已經(jīng)存在則彈出窗口提示：“用戶名已經(jīng)存在”。完成這個(gè)功能的過程中頁面不刷新便可以解決這個(gè)難題了，如圖2-9所示。傳統(tǒng)Web應(yīng)用解決方案傳統(tǒng)的Web應(yīng)用是同步交互的方式，這種同步交互方式的處理過程如下圖所示：AJAX解決方案與傳統(tǒng)的WEB應(yīng)用不同，AJAX采用的是一種異步交互的處理方式，這種異步交互方式的處理過程如下圖所示：AJAX相關(guān)技術(shù)AJAX應(yīng)用程序所用到的基本技術(shù)包括：XHTML和CSS：基于標(biāo)準(zhǔn)的表示技術(shù)。JavaScript腳本：運(yùn)行AJAX應(yīng)用程序的核心代碼，幫助改進(jìn)與服務(wù)器應(yīng)用程序的通信。文檔對象模型DOM：通過JavaScript代碼處理HTML結(jié)構(gòu)和服務(wù)器返回的XML。XML和XSTL：進(jìn)行瀏覽器和服務(wù)器兩端的數(shù)據(jù)信息交換與處理。XMLHttpRequest：進(jìn)行瀏覽器和服務(wù)兩端的異步數(shù)據(jù)讀取。XMLHttpRequest對象的方法和屬性表2-1

XMLHttpRequest對象的一些典型方法發(fā)送請求首先，為得到XMLHttpRequest對象實(shí)例的一個(gè)引用，可以創(chuàng)建一個(gè)新的實(shí)例，這里，我們只需調(diào)用這個(gè)函數(shù)即可，即createXMLHttpRequest()；接著，告訴XMLHttpRequest對象，哪個(gè)函數(shù)會(huì)處理XMLHttpRequest對象狀態(tài)的改變，為此要把對象的onreadystatechange屬性設(shè)置為指向JavaScript函數(shù)的指針，即xmlHttp.onreadystatechange=handleResponse；然后，指定請求的屬性。XMLHttpRequest對象的open()方法會(huì)指定發(fā)出的請求。open()方法通常取3個(gè)參數(shù)：一個(gè)是指示所用的方法（通常是GET或POST）的串，一個(gè)是表示目標(biāo)資源URL的串，一個(gè)是boolean值，指示請求是否是異步的。上述代碼片段采用GET請求方式，即xmlHttp.open("GET",url,true)；將請求發(fā)送給服務(wù)器最后，將請求發(fā)送給服務(wù)器。XMLHttpRequest對象的send()方法把請求發(fā)送給指定的目標(biāo)資源。send()方法接受一個(gè)參數(shù)，通常是一個(gè)串或一個(gè)DOM對象。這個(gè)參數(shù)作為請求體的一部分發(fā)送到目標(biāo)URL。當(dāng)向send()方法提供參數(shù)時(shí)，要確保open()中指定的方法是POST。如果沒有數(shù)據(jù)作為請求體的一部分被發(fā)送，則使用null響應(yīng)數(shù)據(jù)服務(wù)器不一定都要按簡單文本格式發(fā)送響應(yīng)。當(dāng)Content-Type響應(yīng)首部正確地設(shè)置為text/xml（如果是簡單文本，Content-Type響應(yīng)首部則是text/plain），將響應(yīng)作為XML數(shù)據(jù)發(fā)送完全是可以的（復(fù)雜的數(shù)據(jù)結(jié)構(gòu)適合以XML格式發(fā)送）。此時(shí)可以使用XMLHttpRequest對象的responseXML屬性來獲取響應(yīng)數(shù)據(jù)。信息搜索示例這一節(jié)，我們將綜合運(yùn)用本章所講述的內(nèi)容，來實(shí)現(xiàn)一個(gè)網(wǎng)頁中常見的信息搜索功能。該實(shí)例模擬了音樂網(wǎng)站中常見的歌曲分類搜索，實(shí)現(xiàn)的效果如下圖所示。在頁面的選擇列表框中列出所有的歌曲分類，當(dāng)用戶選擇某一類別時(shí)，下方顯示出所有該類別的歌曲信息。顯示效果如圖2-13所示：

總結(jié)

本章提供了幾個(gè)例子，展示了應(yīng)用AJAX技術(shù)改善用戶體驗(yàn)的方法。相信這些例