Web前端開(kāi)發(fā)技術(shù)

教案設(shè)計(jì)

項(xiàng)目課題AJAX技術(shù)

授課時(shí)間授課對(duì)象大學(xué)生

1.了解AJAK技術(shù)的概念。

學(xué)習(xí)目標(biāo)2.掌握J(rèn)avaScriptAJAX和服務(wù)器數(shù)據(jù)交互技術(shù)。

3.掌握jQueryAJAX和服務(wù)器數(shù)據(jù)交互技術(shù)。

學(xué)習(xí)重點(diǎn)掌握J(rèn)avaScriptAJAX和服務(wù)器數(shù)據(jù)交互技術(shù)。

學(xué)習(xí)難點(diǎn)掌握jQueryAJAX和服務(wù)器數(shù)據(jù)交互技術(shù)。

教學(xué)方法講授法、課堂演示法

教學(xué)用具多媒體課件

教學(xué)流程

教學(xué)環(huán)節(jié)教學(xué)內(nèi)容

任務(wù)一AJAX概述

AJAX(AsynchronousJavaScriptAndXML,異步JavaScript和

XML)是一種使用客戶端腳本與服務(wù)器異步交互數(shù)據(jù)的網(wǎng)頁(yè)開(kāi)發(fā)技

術(shù)。使用AJAX技術(shù)，可以實(shí)現(xiàn)無(wú)須重新加載整個(gè)網(wǎng)頁(yè)即可直接更

新當(dāng)前網(wǎng)頁(yè)中的局部?jī)?nèi)容。JavaScript和jQuery都能使用AJAX

方式和服務(wù)器進(jìn)行數(shù)據(jù)交互。

教學(xué)過(guò)程在傳統(tǒng)的Web交互過(guò)程中，用戶使用瀏覽器向服務(wù)器發(fā)出請(qǐng)求，服

務(wù)器接到請(qǐng)求后執(zhí)行請(qǐng)求的操作，并將執(zhí)行結(jié)果返回給客戶端瀏覽

器。在服務(wù)器返回所有結(jié)果前，客戶端處于等待狀態(tài)。例如，用戶

填寫(xiě)注冊(cè)表單后，提交所有表單數(shù)據(jù)到服務(wù)器。服務(wù)器接收數(shù)據(jù)后

先進(jìn)行數(shù)據(jù)庫(kù)操作，如查詢用戶名是否已注冊(cè)、寫(xiě)入數(shù)據(jù)庫(kù)等，然后

返回注冊(cè)后的網(wǎng)頁(yè)，如提示注冊(cè)成功或注冊(cè)失敗。用戶必須將所有

數(shù)據(jù)填寫(xiě)完畢后才能提交，提交后等待服務(wù)器響應(yīng)。

在使用AJAX技術(shù)的頁(yè)面中，用戶以異步方式發(fā)送請(qǐng)求，不會(huì)影響當(dāng)

前瀏覽器中頁(yè)面的線程，可以繼續(xù)網(wǎng)頁(yè)上的下一步操作，用戶不會(huì)處

于等待狀態(tài)。例如，用戶填寫(xiě)注冊(cè)表單中的用戶名后，用戶名以異步

方式發(fā)送到服務(wù)器進(jìn)行操作，同時(shí)用戶可以進(jìn)行其他數(shù)據(jù)的填寫(xiě)操

作。

AJAX技術(shù)縮短了用戶的等待時(shí)間，改善了用戶的操作體驗(yàn)，提高了

Web程序的性能，降低了服務(wù)器的負(fù)擔(dān)。但是客戶端JavaScript

代碼處理數(shù)據(jù)的能力還是較弱，安全性不夠，更多的數(shù)據(jù)處理還需要

借助服務(wù)器上的后端動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言來(lái)完成。

任務(wù)二AJAX應(yīng)用

一、AJAX使用環(huán)境

由于使用AJAX技術(shù)的頁(yè)面，需要和服務(wù)器進(jìn)行數(shù)據(jù)交互。因此，

在進(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)時(shí)，除了需要客戶端的瀏覽器軟件，還需要具有服務(wù)

器和服務(wù)器軟件環(huán)境。

月艮務(wù)器軟件環(huán)境有IIS（InternetInformationServices,互聯(lián)網(wǎng)信

息服務(wù)）、Apache等。在本書(shū)示例中，采用的服務(wù)器環(huán)境配置為

Apache,服務(wù)器端數(shù)據(jù)處理采用PHP語(yǔ)言。推薦使用PHP集成開(kāi)發(fā)

環(huán)境軟件包AppServoAppServ軟件包一次性安裝，無(wú)須配置即可

使用，極大地簡(jiǎn)化了安裝和配置運(yùn)行環(huán)境的步驟。如果有需要，則可

以到AppServ官方網(wǎng)站下載集成軟件包安裝程序，下面以

appserv-x64-9.3.0.exe版本為例進(jìn)行講解。

下載appserv-x64-9.3.0.exe安裝程序后，雙擊進(jìn)行安裝。在本書(shū)

示例中，AppServ安裝路徑為D:\AppServ,HTTP端口采用默認(rèn)的

80端口。

在瀏覽器地址欄中輸入“http://localhostn或"http://

"訪問(wèn)AppServ服務(wù)器目錄下的www目錄，運(yùn)行

index,php,也就是AppServ的測(cè)試頁(yè)。

至此，服務(wù)器環(huán)境安裝成功。運(yùn)行后面的示例時(shí)，需要把網(wǎng)頁(yè)文件放

到www目錄下，通過(guò)"http://IocaIhost/網(wǎng)頁(yè)文件名”方式

進(jìn)行訪問(wèn)執(zhí)行。

二、JavaScript的AJAX應(yīng)用

JavaScript中AJAX技術(shù)的核心是XMLHttpRequest對(duì)象，該對(duì)象

的功能是和服務(wù)器進(jìn)行異步接收或發(fā)送數(shù)據(jù)。

1.創(chuàng)建XMLHttpRequest對(duì)象實(shí)例

使用XMLHttpRequest對(duì)象之前必須創(chuàng)建XMLHttpRequest對(duì)象實(shí)

例。由于IE6瀏覽器使用ActiveXObject方式引入

XMLHttpRequest對(duì)象，而其他瀏覽器中XMLHttpRequest對(duì)象是

Window對(duì)象的子對(duì)象，所以代碼中需要針對(duì)不同瀏覽器創(chuàng)建實(shí)例。

創(chuàng)建XMLHttpRequest對(duì)象實(shí)例的基本語(yǔ)法格式如下。

var實(shí)例名；

if(window.ActiveXObject){

實(shí)例名:newActiveXObject("Microsoft.XMLHTTP");}

eIseif(window.XMLHttpRequest){

實(shí)例名二newXMLHttpRequest();

1

2.指定文檔方法open()

使用XMLHttpRequest對(duì)象實(shí)例的open()方法指定從服務(wù)器載入

文檔的HTTP請(qǐng)求方式、文件名、是否使用異步方式，其基本語(yǔ)法格

式如下。

實(shí)例名.open("http請(qǐng)求方式"，”請(qǐng)求文件URL地址”，是否采用異

步方式);

http請(qǐng)求方式為GET或POST0是否采用異步方式，默認(rèn)為true,

即異步方式發(fā)送請(qǐng)求。

3.發(fā)送數(shù)據(jù)方法send()

send()方法將open()方法指定的請(qǐng)求發(fā)送出去，該方法只有一個(gè)參

數(shù)nulI,其基本語(yǔ)法格式如下。

實(shí)例名.send(nuII);

4.監(jiān)聽(tīng)服務(wù)器完成請(qǐng)求狀態(tài)

XMLHttpRequest對(duì)象實(shí)例的onreadystatechange事件可以監(jiān)聽(tīng)

服務(wù)器完成請(qǐng)求狀態(tài)，其基本語(yǔ)法格式如下。

實(shí)例名.onreadystatechange二監(jiān)聽(tīng)結(jié)束回調(diào)函數(shù)；

onreadystatechange事件返回readystate屬性和status屬性。

readystate屬性有5種值，當(dāng)數(shù)值為4時(shí)表示服務(wù)器已經(jīng)處理完

畢。status屬性表示請(qǐng)求是否成功，如果值為200,則表明請(qǐng)求成

功?；卣{(diào)函數(shù)需要在readystate為4和status為200時(shí)，才

能訪問(wèn)服務(wù)器返回的數(shù)據(jù)。

5.服務(wù)器返回?cái)?shù)據(jù)屬性

XMLHttpRequest對(duì)象實(shí)例的responseText屬性可以獲取服務(wù)器

返回的數(shù)據(jù)。

三、jQuery的AJAX應(yīng)用

jQuery中對(duì)AJAX進(jìn)行了封裝，提供了一些與AJAX有關(guān)的方法和

屬性，大大簡(jiǎn)化了與服務(wù)器進(jìn)行異步數(shù)據(jù)交互的步驟。

1.加載文檔方法load()

load。方法能載入遠(yuǎn)程HTML文檔并將其插入指定的D0M元素，其

基本語(yǔ)法珞式如下。

load(文檔地址，數(shù)據(jù)，回調(diào)函數(shù))

2.GET方式交互數(shù)據(jù)方法$.get()

$.get()方法采用GET方式發(fā)送數(shù)據(jù)到服務(wù)器指定文檔，并載入返

回信息，其基本語(yǔ)法格式如下。

$.get(文檔地址，發(fā)送給服務(wù)器數(shù)據(jù)，回調(diào)函數(shù)，返回?cái)?shù)據(jù)類(lèi)型)

發(fā)送給服務(wù)器的數(shù)據(jù)以“｛鍵：值｝”的形式組成，多對(duì)數(shù)據(jù)間用逗號(hào)

分隔?；卣{(diào)函數(shù)在服務(wù)器處理請(qǐng)求成功后執(zhí)行，參數(shù)為返回的救據(jù)。

返回?cái)?shù)據(jù)的類(lèi)型可以為XML、HTML,JS0N等。

3.POST方式交互數(shù)據(jù)方法$.post；)

$.post。方法采用POST方式發(fā)送數(shù)據(jù)到服務(wù)器指定文檔，并載入

返回信息,其基本語(yǔ)法格式如下。

$.post(文檔地址，發(fā)送給服務(wù)器數(shù)據(jù)，回調(diào)函數(shù))

發(fā)送給服務(wù)器的數(shù)據(jù)以“｛鍵：值｝”的形式組成，多對(duì)數(shù)據(jù)間用逗號(hào)

分隔。回調(diào)函數(shù)在服務(wù)器處理請(qǐng)求成功后執(zhí)行，參數(shù)為返回的數(shù)據(jù)。

返回?cái)?shù)據(jù)的類(lèi)型可以為XML、HTML、JSON等。

一、問(wèn)答題

(DAJAX是一種什么技術(shù)？有什么優(yōu)點(diǎn)？

(2)JavaScript的AJAX技術(shù)核心是哪些對(duì)象、方法和屬性？

(3)jQuery的AJAX技術(shù)常用的方法有哪些？

(4)GET請(qǐng)求和POST請(qǐng)求的區(qū)別是什么？

作業(yè)布置

二、操作題