教學材料《JSP設計與開發(fā)》-第11章 Ajax技術應用

1第10章Ajax技術應用學習要點Ajax的基本概念Ajax的工作原理編寫Ajax的一般過程Ajax技術的典型應用210.1Ajax概述Ajax的全稱為“AsynchronousJavaScriptandXML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術，在現(xiàn)在的Web應用系統(tǒng)中得到了廣泛的應用。從本質上講，Ajax并不是一種全新的技術，它只是綜合利用已經(jīng)存在的各種技術，從而生成一種全新的應用。310.1.1Web開發(fā)技術演變過程Web應用程序發(fā)展至今大體經(jīng)歷了三個階段，第一個階段使用的是簡單的靜態(tài)頁面，第二個階段使用的是ASP、JSP和PHP等動態(tài)腳本語言，第三個階段是Web2.0階段，而Ajax就是Web2.0中的核心技術。在使用Ajax開發(fā)的Web程序中，可以模擬出類似傳統(tǒng)桌面應用程序豐富的界面元素，還可以選擇局部刷新頁面，從而減小了用戶與服務器交互的通信量。由于Ajax的這些特性，在其推出的短短幾年中，已經(jīng)在很多Web應用中得到了廣泛的應用。410.1.2什么是Ajax與Java、JSP等是一種單獨的技術不同，Ajax是一系列技術的集合，例如在時下與服務器的異步通信是，需要用到XML、JavaScript和XMLHttpRequest等，使用這幾種技術可以實現(xiàn)與服務器的異步通信，所以Ajax是這幾種技術的綜合體。傳統(tǒng)的Web應用程序中，每個用戶的請求都會重新刷新整個頁面，而采用Ajax以后，只需要刷新局部的頁面即可。實現(xiàn)與服務器的異步通信，這就是Ajax技術的核心所在。510.1.2什么是AjaxAjax作為新近流行的技術，有優(yōu)勢也有劣勢。其優(yōu)勢主要體現(xiàn)在以下幾點。Ajax可以在靜態(tài)頁面上動態(tài)地調用服務器的資源，大大減少了用戶的等待時間，使界面更加友好。Ajax允許用戶的操作與服務器的操作異步進行，在服務器響應用戶操作的同時，用戶可以執(zhí)行其他操作。Ajax允許一些常規(guī)操作在客戶端進行，有利于減輕服務器的負擔。使用Ajax技術，不必更新全部網(wǎng)頁，只需要更新需要更新的內容或部分頁面。大大減少了用戶的等待時間，使界面更加友好。Ajax的劣勢主要體現(xiàn)在以下幾點。由于Ajax是在客戶端執(zhí)行的，所以在編程時必須考慮客戶可能用到的所有瀏覽器的類型。由于Ajax需要在客戶端執(zhí)行一些操作，所以會在客戶端占用更多的資源。由于Ajax的腳本語言是直接存放在頁面的HTML中的，所以不利于項目代碼的保密。由于Ajax可以不刷新頁面就更新數(shù)據(jù)，通常會導致瀏覽器的“后退”功能失效。610.1.3案例一：應用Ajax局部刷新顯示用戶

【案例功能】局部刷新顯示用戶姓名。【案例目標】體驗Ajax技術的應用并了解Ajax程序的基本框架。【案例要點】Ajax程序的基本框架、Ajax技術在JSP中使用的一般形式、Ajax技術在JSP中的應用。【案例步驟】（1）創(chuàng)建JSP頁面。（2）編寫Servlet用于接收來自客戶端的請求。（3）修改配置文件web.xml。（4）部署。（5）啟動Tomcat，在瀏覽器中輸入:8080/ch10/AjaxShow.jsp，運行結果如圖10-1所示。710.2Ajax的工作原理在一般的Web應用程序中，用戶填寫表單字段并單擊提交按鈕。然后整個表單發(fā)送到服務器，服務器將它轉發(fā)給處理表單的腳本（通常是PHP或Java，也可能是CGI進程或者類似的東西），腳本執(zhí)行完成后再發(fā)送回全新的頁面。該頁面可能是帶有已經(jīng)填充某些數(shù)據(jù)的新表單的HTML，也可能是確認頁面，或者是具有根據(jù)原來表單中輸入數(shù)據(jù)選擇的某些選項的頁面。當然，在服務器上的腳本或程序處理和返回新表單時用戶必須等待。屏幕變成一片空白，等到服務器返回數(shù)據(jù)后再重新繪制。這就是交互性差的原因，用戶得不到立即反饋，因此感覺不同于桌面應用程序。810.2Ajax的工作原理Ajax把JavaScript技術和XMLHttpRequest對象放在Web表單和服務器之間。當用戶填寫表單時，數(shù)據(jù)發(fā)送給一些JavaScript代碼而不是直接發(fā)送給服務器。相反，JavaScript代碼捕獲表單數(shù)據(jù)并向服務器發(fā)送請求。同時用戶屏幕上的表單也不會閃爍、消失或延遲。換句話說，JavaScript代碼在幕后發(fā)送請求，用戶甚至不知道請求的發(fā)出。更好的是，請求是異步發(fā)送的，就是說JavaScript代碼（和用戶）不用等待服務器的響應。因此用戶可以繼續(xù)輸入數(shù)據(jù)、滾動屏幕和使用應用程序。然后，服務器將數(shù)據(jù)返回JavaScript代碼（仍然在Web表單中），后者決定如何處理這些數(shù)據(jù)。它可以迅速更新表單數(shù)據(jù)，讓人感覺應用程序是立即完成的，表單沒有提交或刷新而用戶得到了新數(shù)據(jù)。JavaScript代碼甚至可以對收到的數(shù)據(jù)執(zhí)行某種計算，再發(fā)送另一個請求，完全不需要用戶干預！這就是XMLHttpRequest的強大之處。它可以根據(jù)需要自行與服務器進行交互，用戶甚至可以完全不知道幕后發(fā)生的一切。910.2Ajax的工作原理Ajax實質上也遵循Request/Server模式，所以這個框架基本的流程是：創(chuàng)建XMLHttpRequest對象使用XMLHttpRequest對象發(fā)送請求服務器端處理用戶請求客戶端處理服務器相應只不過這個過程是異步的。1010.2.1創(chuàng)建XMLHttpRequest對象XMLHttpRequest對象在Ajax中占據(jù)十分重要的地位，Ajax中的客戶端就是通過XMLHttpRequest對象實現(xiàn)與服務器通信的。XMLHttpRequest對象需要在發(fā)送請求和接收響應之前創(chuàng)建。在IE瀏覽器中，XMLHttpRequest對象是以ActiveX組建的形式提供的；而在其他瀏覽器中則使用JavaScript的本地方法來創(chuàng)建。所以在創(chuàng)建XMLHttpRequest對象的時候，需要對此差別進行對應的判斷和處理。下面的代碼就是創(chuàng)建XMLHttpRequest對象的通用代碼。1110.2.2客戶端向服務器發(fā)送請求在Ajax中，向服務器端發(fā)送請求使用的是XMLHttpRequest對象，在XMLHttpRequest對象成功創(chuàng)建以后，就可以通過這個對象與服務器進行通信。在向服務器發(fā)送請求之前，首先使用XMLHttpRequest對象的open方法建立對服務器的調用，然后才能向服務器發(fā)送請求信息。1210.2.3服務器端處理用戶請求在Ajax中，服務器接收到用戶的請求以后，可以根據(jù)請求的內容進行相應的操作，然后把操作以合適的格式返回給客戶端。服務器斷的處理方式有很多種選擇，可以選擇JSP、ASP、CGI和Servlet中的任意一種作為相應客戶端請求的服務程序，在本例中選擇Servlet來實現(xiàn)服務器端邏輯處理的功能。由于客戶端想服務器發(fā)送信息的時候，可以選擇多種方式進行發(fā)送，所以服務器端就需要根據(jù)客戶端發(fā)送信息的方式，對接收到的信息進行分析，從而取出進一步操作所需要的信息。當客戶端使用超鏈接傳遞參數(shù)的時候，服務器端的處理比較簡單，僅僅通過request.getParameter("參數(shù)名稱")就可以取出對應參數(shù)的值，然后根據(jù)取得的值進行相應的邏輯操作。當客戶端使用XML格式發(fā)送請求信息的時候，在服務器端就需要對接收的XML文檔進行分析，可以使用DOM或者SAX從這個XML文檔中取出需要的信息，然后才能進行相應的邏輯操作。在服務器端完成用戶需要的邏輯處理后，需要把處理的結果返回給用戶，在這種情況下，一般是把處理的結果組織稱XML的格式，然后把這個XML文檔返回給客戶端。1310.2.4客戶端處理服務器響應當服務器端結束對用戶請求的處理以后，會把處理的結果返回給用戶，在客戶端對返回的內容進行處理，然后根據(jù)其處理結果對頁面的內容進行調整，到這一步為止，客戶端對服務器端的異步通信就完成了。當服務器端用PrintWriter對象返回一般字符串時，在客戶端可以通過XMLHttpRequest對象的responseText屬性取出服務器返回的內容。更多時候，服務器會用XML文檔返回邏輯處理的結果，在客戶端可以通過XMLHttpRequest對象的responseXML屬性取出服務器返回的響應文檔。在JavaScript中，可以用DOM方式分析這個XML文檔，從而取出用戶需要的內容。在對服務器返回的響應文檔文檔解析結束以后，，就可以根據(jù)解析的結果來調整頁面的內容，從而把服務器的處理結果表現(xiàn)在頁面上。通常情況下會使用JavaScript來完成這個任務，通過使用innerText或者innerH