Web 前端開(kāi)發(fā)技術(shù)（HTML5+CSS3+JavaScript+jQuery） 課件 項(xiàng)目十二　 AJAX 技術(shù)

AJAX技術(shù)Web前端開(kāi)發(fā)技術(shù)篇4：jQuery技術(shù)

本項(xiàng)目介紹AJAX技術(shù)的基本概念,以及JavaScriptAJAX、jQueryAJAX技術(shù)應(yīng)用示例。通過(guò)學(xué)習(xí)AJAX技術(shù)的相關(guān)知識(shí),能夠了解到數(shù)據(jù)安全問(wèn)題,以及我國(guó)的網(wǎng)絡(luò)安全形勢(shì)。2018年4月,全國(guó)網(wǎng)絡(luò)安全和信息化工作會(huì)議中提出“沒(méi)有網(wǎng)絡(luò)安全就沒(méi)有國(guó)家安全,就沒(méi)有經(jīng)濟(jì)社會(huì)穩(wěn)定運(yùn)行,廣大人民群眾利益也難以得到保障?！币虼?學(xué)生需要加強(qiáng)安全意識(shí),培養(yǎng)網(wǎng)絡(luò)安全意識(shí)、數(shù)據(jù)安全意識(shí),培養(yǎng)和樹立總體國(guó)家安全觀。序言目錄CONTENTSAJAX概述AJAX應(yīng)用010201AJAX概述Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.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ù)交互。在傳統(tǒng)的Web交互過(guò)程中,用戶使用瀏覽器向服務(wù)器發(fā)出請(qǐng)求,服務(wù)器接到請(qǐng)求后執(zhí)行請(qǐng)求的操作,并將執(zhí)行結(jié)果返回給客戶端瀏覽器。在服務(wù)器返回所有結(jié)果前,客戶端處于等待狀態(tài)。例如,用戶填寫注冊(cè)表單后,提交所有表單數(shù)據(jù)到服務(wù)器。服務(wù)器接收數(shù)據(jù)后先進(jìn)行數(shù)據(jù)庫(kù)操作,如查詢用戶名是否已注冊(cè)、寫入數(shù)據(jù)庫(kù)等,然后返回注冊(cè)后的網(wǎng)頁(yè),如提示注冊(cè)成功或注冊(cè)失敗。用戶必須將所有數(shù)據(jù)填寫完畢后才能提交,提交后等待服務(wù)器響應(yīng)。AJAX概述AJAX概述在使用AJAX技術(shù)的頁(yè)面中,用戶以異步方式發(fā)送請(qǐng)求,不會(huì)影響當(dāng)前瀏覽器中頁(yè)面的線程,可以繼續(xù)網(wǎng)頁(yè)上的下一步操作,用戶不會(huì)處于等待狀態(tài)。例如,用戶填寫注冊(cè)表單中的用戶名后,用戶名以異步方式發(fā)送到服務(wù)器進(jìn)行操作,同時(shí)用戶可以進(jìn)行其他數(shù)據(jù)的填寫操作。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)完成。AJAX概述02AJAX應(yīng)用Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.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等。在本書示例中,采用的服務(wù)器環(huán)境配置為Apache,服務(wù)器端數(shù)據(jù)處理采用PHP語(yǔ)言。推薦使用PHP集成開(kāi)發(fā)環(huán)境軟件包AppServ。AppServ軟件包一次性安裝,無(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)行安裝。在本書示例中,AppServ安裝路徑為D:\AppServ,HTTP端口采用默認(rèn)的80端口。AJAX應(yīng)用AJAX使用環(huán)境在瀏覽器地址欄中輸入“http://localhost”或“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://localhost/網(wǎng)頁(yè)文件名”方式進(jìn)行訪問(wèn)執(zhí)行。AJAX應(yīng)用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){AJAX應(yīng)用JavaScript的AJAX應(yīng)用實(shí)例名=newActiveXObject("Microsoft.XMLHTTP");}elseif(window.XMLHttpRequest){實(shí)例名=newXMLHttpRequest();}2.指定文檔方法open()使用XMLHttpRequest對(duì)象實(shí)例的open()方法指定從服務(wù)器載入文檔的HTTP請(qǐng)求方式、文件名、是否使用異步方式,其基本語(yǔ)法格式如下。實(shí)例名.open("http請(qǐng)求方式","請(qǐng)求文件URL地址",是否采用異步方式);http請(qǐng)求方式為GET或POST。是否采用異步方式,默認(rèn)為true,即異步方式發(fā)送請(qǐng)求。AJAX應(yīng)用JavaScript的AJAX應(yīng)用3.發(fā)送數(shù)據(jù)方法send()send()方法將open()方法指定的請(qǐng)求發(fā)送出去,該方法只有一個(gè)參數(shù)null,其基本語(yǔ)法格式如下。實(shí)例名.send(null);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ù)。AJAX應(yīng)用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文檔并將其插入指定的DOM元素,其基本語(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ù)類型)AJAX應(yīng)用jQuery的AJAX應(yīng)用發(fā)送給服務(wù)器的數(shù)據(jù)以“{鍵:值}”的形式組成,多對(duì)數(shù)據(jù)間用逗號(hào)分隔?；卣{(diào)函數(shù)在服務(wù)器處理請(qǐng)求成功后執(zhí)行,參數(shù)為返回的數(shù)據(jù)。返回?cái)?shù)據(jù)的類型可以為XML、HTML、JSON等。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ù)的類型可以為XML、HTML、JSON等。AJAX應(yīng)用實(shí)訓(xùn)工單問(wèn)答題：(3)jQuery的AJAX技術(shù)常用的方法有哪些?(4)GET請(qǐng)求和POST請(qǐng)求的區(qū)別是什么?操作題設(shè)計(jì)一個(gè)用戶注冊(cè)頁(yè)面,使用AJAX技術(shù)將用戶名發(fā)送到服務(wù)器。在服務(wù)器端