Web前端開發(fā)技術教案設計項目課題AJAX技術授課時間授課對象大學生學習目標1.了解AJAX技術的概念。2.掌握JavaScriptAJAX和服務器數(shù)據(jù)交互技術。3.掌握jQueryAJAX和服務器數(shù)據(jù)交互技術。學習重點掌握JavaScriptAJAX和服務器數(shù)據(jù)交互技術。學習難點掌握jQueryAJAX和服務器數(shù)據(jù)交互技術。教學方法講授法、課堂演示法教學用具多媒體課件教學流程教學環(huán)節(jié)教學內容教學過程任務一AJAX概述AJAX(AsynchronousJavaScriptAndXML,異步JavaScript和XML)是一種使用客戶端腳本與服務器異步交互數(shù)據(jù)的網(wǎng)頁開發(fā)技術。使用AJAX技術,可以實現(xiàn)無須重新加載整個網(wǎng)頁即可直接更新當前網(wǎng)頁中的局部內容。JavaScript和jQuery都能使用AJAX方式和服務器進行數(shù)據(jù)交互。在傳統(tǒng)的Web交互過程中,用戶使用瀏覽器向服務器發(fā)出請求,服務器接到請求后執(zhí)行請求的操作,并將執(zhí)行結果返回給客戶端瀏覽器。在服務器返回所有結果前,客戶端處于等待狀態(tài)。例如,用戶填寫注冊表單后,提交所有表單數(shù)據(jù)到服務器。服務器接收數(shù)據(jù)后先進行數(shù)據(jù)庫操作,如查詢用戶名是否已注冊、寫入數(shù)據(jù)庫等,然后返回注冊后的網(wǎng)頁,如提示注冊成功或注冊失敗。用戶必須將所有數(shù)據(jù)填寫完畢后才能提交,提交后等待服務器響應。在使用AJAX技術的頁面中,用戶以異步方式發(fā)送請求,不會影響當前瀏覽器中頁面的線程,可以繼續(xù)網(wǎng)頁上的下一步操作,用戶不會處于等待狀態(tài)。例如,用戶填寫注冊表單中的用戶名后,用戶名以異步方式發(fā)送到服務器進行操作,同時用戶可以進行其他數(shù)據(jù)的填寫操作。AJAX技術縮短了用戶的等待時間,改善了用戶的操作體驗,提高了Web程序的性能,降低了服務器的負擔。但是客戶端JavaScript代碼處理數(shù)據(jù)的能力還是較弱,安全性不夠,更多的數(shù)據(jù)處理還需要借助服務器上的后端動態(tài)網(wǎng)頁設計語言來完成。任務二AJAX應用一、AJAX使用環(huán)境由于使用AJAX技術的頁面,需要和服務器進行數(shù)據(jù)交互。因此,在進行網(wǎng)頁開發(fā)時,除了需要客戶端的瀏覽器軟件,還需要具有服務器和服務器軟件環(huán)境。服務器軟件環(huán)境有IIS(InternetInformationServices,互聯(lián)網(wǎng)信息服務)、Apache等。在本書示例中,采用的服務器環(huán)境配置為Apache,服務器端數(shù)據(jù)處理采用PHP語言。推薦使用PHP集成開發(fā)環(huán)境軟件包AppServ。AppServ軟件包一次性安裝,無須配置即可使用,極大地簡化了安裝和配置運行環(huán)境的步驟。如果有需要,則可以到AppServ官方網(wǎng)站下載集成軟件包安裝程序,下面以appserv-x64-9.3.0.exe版本為例進行講解。下載appserv-x64-9.3.0.exe安裝程序后,雙擊進行安裝。在本書示例中,AppServ安裝路徑為D:\AppServ,HTTP端口采用默認的80端口。在瀏覽器地址欄中輸入“http://localhost”或“http://”訪問AppServ服務器目錄下的www目錄,運行index.php,也就是AppServ的測試頁。至此,服務器環(huán)境安裝成功。運行后面的示例時,需要把網(wǎng)頁文件放到www目錄下,通過“http://localhost/網(wǎng)頁文件名”方式進行訪問執(zhí)行。二、JavaScript的AJAX應用JavaScript中AJAX技術的核心是XMLHttpRequest對象,該對象的功能是和服務器進行異步接收或發(fā)送數(shù)據(jù)。1.創(chuàng)建XMLHttpRequest對象實例使用XMLHttpRequest對象之前必須創(chuàng)建XMLHttpRequest對象實例。由于IE6瀏覽器使用ActiveXObject方式引入XMLHttpRequest對象,而其他瀏覽器中XMLHttpRequest對象是Window對象的子對象,所以代碼中需要針對不同瀏覽器創(chuàng)建實例。創(chuàng)建XMLHttpRequest對象實例的基本語法格式如下。var實例名;if(window.ActiveXObject){實例名=newActiveXObject("Microsoft.XMLHTTP");}elseif(window.XMLHttpRequest){實例名=newXMLHttpRequest();}2.指定文檔方法open()使用XMLHttpRequest對象實例的open()方法指定從服務器載入文檔的HTTP請求方式、文件名、是否使用異步方式,其基本語法格式如下。實例名.open("http請求方式","請求文件URL地址",是否采用異步方式);http請求方式為GET或POST。是否采用異步方式,默認為true,即異步方式發(fā)送請求。3.發(fā)送數(shù)據(jù)方法send()send()方法將open()方法指定的請求發(fā)送出去,該方法只有一個參數(shù)null,其基本語法格式如下。實例名.send(null);4.監(jiān)聽服務器完成請求狀態(tài)XMLHttpRequest對象實例的onreadystatechange事件可以監(jiān)聽服務器完成請求狀態(tài),其基本語法格式如下。實例名.onreadystatechange=監(jiān)聽結束回調函數(shù);onreadystatechange事件返回readystate屬性和status屬性。readystate屬性有5種值,當數(shù)值為4時表示服務器已經(jīng)處理完畢。status屬性表示請求是否成功,如果值為200,則表明請求成功。回調函數(shù)需要在readystate為4和status為200時,才能訪問服務器返回的數(shù)據(jù)。5.服務器返回數(shù)據(jù)屬性XMLHttpRequest對象實例的responseText屬性可以獲取服務器返回的數(shù)據(jù)。三、jQuery的AJAX應用jQuery中對AJAX進行了封裝,提供了一些與AJAX有關的方法和屬性,大大簡化了與服務器進行異步數(shù)據(jù)交互的步驟。1.加載文檔方法load()load()方法能載入遠程HTML文檔并將其插入指定的DOM元素,其基本語法格式如下。load(文檔地址,數(shù)據(jù),回調函數(shù))2.GET方式交互數(shù)據(jù)方法$.get()$.get()方法采用GET方式發(fā)送數(shù)據(jù)到服務器指定文檔,并載入返回信息,其基本語法格式如下。$.get(文檔地址,發(fā)送給服務器數(shù)據(jù),回調函數(shù),返回數(shù)據(jù)類型)發(fā)送給服務器的數(shù)據(jù)以“{鍵:值}”的形式組成,多對數(shù)據(jù)間用逗號分隔。回調函數(shù)在服務器處理請求成功后執(zhí)行,參數(shù)為返回的數(shù)據(jù)。返回數(shù)據(jù)的類型可以為XML、HTML、JSON等。3.POST方式交互數(shù)據(jù)方法$.post()$.post()方法采用POST方式發(fā)送數(shù)據(jù)到服務器指定文檔,并載入返回信息,其基本語法格式如下。$.post(文檔地址,發(fā)送給服務器數(shù)據(jù),回調函數(shù))發(fā)送給服務器的數(shù)據(jù)以“{鍵:值}”的形式組成,多對數(shù)據(jù)間用逗號分隔。回調函數(shù)在服務器處理請求成功后執(zhí)行,參數(shù)為返回的數(shù)據(jù)。返回數(shù)據(jù)的類型可以為XML、HTML、JSON等。作業(yè)布置一、問答題(1)AJAX是一種什么技術?有什么優(yōu)點?(2)JavaScript的AJAX技術核心是哪些對象、方法和屬性?(3)jQuer