山大《網(wǎng)站設(shè)計與建設(shè)》課件第15章 Ajax設(shè)計方法

1、第15章 Ajax設(shè)計方法第三部分 網(wǎng)站設(shè)計技術(shù)15.1 什么是AjaxAjax的全稱是：Asynchronous異步JavaScript+XML Ajax不是一個技術(shù)，它實際上是幾種技術(shù)，每種技術(shù)都有其獨特之處，合在一起就成了一個功能強大的新技術(shù)。 Web開發(fā)領(lǐng)域的最新時髦術(shù)語其實質(zhì)是“舊貌換新顏”Ajax 由 HTML、JavaScript 技術(shù)、DHTML 和 DOM 組成，它可以提供介于桌面應(yīng)用程序和Web應(yīng)用程序的中間選擇，構(gòu)建更為動態(tài)和響應(yīng)更為靈敏的Web應(yīng)用程序。Ajax是一種客戶端設(shè)計方法，可以與J2EE、.NET、PHP、Ruby和CGI腳本交互，它并不關(guān)心服務(wù)器是什么。Aj

2、ax可以讓開發(fā)人員構(gòu)建基于Java技術(shù)的Web應(yīng)用，并打破了使用頁面重載的慣例 實例/ajax/ajax_asp_php.aspAjax包括： HTML 用于建立 Web 表單并確定應(yīng)用程序其他部分使用的字段。 JavaScript 代碼是運行 Ajax 應(yīng)用程序的核心代碼，幫助改進與服務(wù)器應(yīng)用程序的通信。使用XMLHttpRequest進行異步數(shù)據(jù)接收 DHTML 或 Dynamic HTML，用于動態(tài)更新表單。使用 div、span 和其他動態(tài) HTML 元素來標記 HTML。 文檔對象模型 DOM 用于（通過 JavaScript 代碼）處理 HTML 結(jié)構(gòu)和（某些情況下）服務(wù)器返回的

3、XML15.2 Ajax工作原理Ajax用來描述一組技術(shù)，它使瀏覽器可以為用戶提供更為自然的瀏覽體驗。在Ajax之前，Web站點強制用戶進入提交/等待/重新顯示內(nèi)容，用戶的動作總是與服務(wù)器的“思考時間”同步。Ajax提供與服務(wù)器異步通信的能力，從而使用戶從請求/響應(yīng)的循環(huán)中解脫出來。借助于Ajax，可以在用戶單擊按鈕時，使用JavaScript和DHTML立即更新UI(用戶界面)，并向服務(wù)器發(fā)出異步請求，以執(zhí)行更新或查詢數(shù)據(jù)庫。當請求返回時，就可以使用JavaScript和CSS來相應(yīng)地更新UI，而不是刷新整個頁面。最重要的是，用戶甚至不知道瀏覽器正在與服務(wù)器通信：Web站點看起來是即時響應(yīng)的

4、。在面向消費者的諸多應(yīng)用當中，Google的Gmail和GoogleMaps就是最常見的例子。在Gmail當中，AJAX負責如何開啟線程會話，以顯示不同郵件的文本內(nèi)容。而在Maps當中，AJAX允許用戶以一種似乎無縫的方式拖拉及滾動地圖。 還有雅虎的Flickr像片共享應(yīng)用和亞馬遜網(wǎng)站的A9搜索引擎。這些UI都充分地使用了后臺通道不過AJAX應(yīng)用軟件的適用領(lǐng)域具有一定的局限性。因為它們利用了一些最新的Web技術(shù)，所以只能在某些Web瀏覽器里面運行 Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入17.3 XMLHtt

5、pRequest 對象XMLHttpRequest是一個 JavaScript 對象，處理所有服務(wù)器通信的對象。一個Ajax交互從一個XMLHttpRequest對象開始。它允許一個客戶端腳本來執(zhí)行HTTP請求，并且將會解析一個XML格式的服務(wù)器響應(yīng)。1)啟動一個Ajax過程 form+ JavaScript2)創(chuàng)建一個XMLHttpRequest實例3)獲取表單數(shù)據(jù) 。4)將目標URL設(shè)置到XMLHttpRequest對象上。 5)發(fā)送請求6)處理服務(wù)器響應(yīng) 1)啟動一個Ajax過程 form+ JavaScriptClick here to fire a script: City: Sta

6、te: Zip Code: 2)創(chuàng)建一個XMLHttpRequest實例所有現(xiàn)代瀏覽器均支持 XMLHttpRequest 對象IE7+、Firefox、Chrome、Safari 以及 Operavariable=new XMLHttpRequest();IE5 和 IE6 使用 ActiveXObjectvariable=new ActiveXObject(Microsoft.XMLHTTP);IE中安裝的 JavaScript 技術(shù)版本不同，MSXML 實際上有兩種不同的版本var xmlHttp = false;try xmlHttp = new ActiveXObject(Msxml

7、2.XMLHTTP); catch (e) try xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); catch (e2) xmlHttp = false; xmlHttp是XMLHttpRequest句柄function callServer() / 從Web表單中獲取city 和 state 單元格的值 var city = document.getElementById(city).value; var state = document.getElementById(state).value; if (city = null) | (city

8、 = ) return; if (state = null) | (state = ) return; / 建立URL，escape 函數(shù)是一個頂級 JavaScript 函數(shù)，可將屬性值添加到URL中 var url = /scripts/getZipCode.php?city= + escape(city) + &state= + escape(state); / 打開一個與服務(wù)器的連接 xmlHttp.open(GET, url, true); / 設(shè)置結(jié)束后服務(wù)器運行的函數(shù)名 xmlHttp.onreadystatechange = updatePage; / 發(fā)送這個請求 xmlHt

9、tp.send(null);XMLHttpRequest 對象的 open() 方法指定了連接方法（GET）與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。和要連接的 URL。最后一個參數(shù)如果設(shè)為 true，那么將請求一個異步連接（這就是 Ajax 的由來）如果設(shè)為 true，當服務(wù)器在后臺處理請求的時候用戶仍然可以使用表單（甚至調(diào)用其他 JavaScript 方法）。 。如果使用 false，那么代碼發(fā)出請求后將等待服務(wù)器返回的響應(yīng)。6)處理服務(wù)器響應(yīng) function updatePage() if (xmlHttp.readyState = = 4) var response = xmlHttp.responseText; document.setElementById(zipCode).value = response; responseText 屬性獲得字符串形式的響應(yīng)數(shù)據(jù)responseXML 屬性來自服務(wù)器的響應(yīng)是 XML，而且需要作為 XML 對象進行解析/ajax/ajax_xmlhttprequest_response