AJAX技術Web前端開發技術篇4：jQuery技術

本項目介紹AJAX技術的基本概念,以及JavaScriptAJAX、jQueryAJAX技術應用示例。通過學習AJAX技術的相關知識,能夠了解到數據安全問題,以及我國的網絡安全形勢。2018年4月,全國網絡安全和信息化工作會議中提出“沒有網絡安全就沒有國家安全,就沒有經濟社會穩定運行,廣大人民群眾利益也難以得到保障。”因此,學生需要加強安全意識,培養網絡安全意識、數據安全意識,培養和樹立總體國家安全觀。序言目錄CONTENTSAJAX概述AJAX應用010201AJAX概述Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.AJAX概述AJAX(AsynchronousJavaScriptAndXML,異步JavaScript和XML)是一種使用客戶端腳本與服務器異步交互數據的網頁開發技術。使用AJAX技術,可以實現無須重新加載整個網頁即可直接更新當前網頁中的局部內容。JavaScript和jQuery都能使用AJAX方式和服務器進行數據交互。在傳統的Web交互過程中,用戶使用瀏覽器向服務器發出請求,服務器接到請求后執行請求的操作,并將執行結果返回給客戶端瀏覽器。在服務器返回所有結果前,客戶端處于等待狀態。例如,用戶填寫注冊表單后,提交所有表單數據到服務器。服務器接收數據后先進行數據庫操作,如查詢用戶名是否已注冊、寫入數據庫等,然后返回注冊后的網頁,如提示注冊成功或注冊失敗。用戶必須將所有數據填寫完畢后才能提交,提交后等待服務器響應。AJAX概述AJAX概述在使用AJAX技術的頁面中,用戶以異步方式發送請求,不會影響當前瀏覽器中頁面的線程,可以繼續網頁上的下一步操作,用戶不會處于等待狀態。例如,用戶填寫注冊表單中的用戶名后,用戶名以異步方式發送到服務器進行操作,同時用戶可以進行其他數據的填寫操作。AJAX技術縮短了用戶的等待時間,改善了用戶的操作體驗,提高了Web程序的性能,降低了服務器的負擔。但是客戶端JavaScript代碼處理數據的能力還是較弱,安全性不夠,更多的數據處理還需要借助服務器上的后端動態網頁設計語言來完成。AJAX概述02AJAX應用Learningisaveryhappyopportunity,anopportunitythatmustbethoroughlyutilizedinordertoacquireknowledgeandbroadenone'shorizon.AJAX使用環境由于使用AJAX技術的頁面,需要和服務器進行數據交互。因此,在進行網頁開發時,除了需要客戶端的瀏覽器軟件,還需要具有服務器和服務器軟件環境。服務器軟件環境有IIS(InternetInformationServices,互聯網信息服務)、Apache等。在本書示例中,采用的服務器環境配置為Apache,服務器端數據處理采用PHP語言。推薦使用PHP集成開發環境軟件包AppServ。AppServ軟件包一次性安裝,無須配置即可使用,極大地簡化了安裝和配置運行環境的步驟。如果有需要,則可以到AppServ官方網站下載集成軟件包安裝程序,下面以appserv-x64-9.3.0.exe版本為例進行講解。下載appserv-x64-9.3.0.exe安裝程序后,雙擊進行安裝。在本書示例中,AppServ安裝路徑為D:\AppServ,HTTP端口采用默認的80端口。AJAX應用AJAX使用環境在瀏覽器地址欄中輸入“http://localhost”或“http://”訪問AppServ服務器目錄下的www目錄,運行index.php,也就是AppServ的測試頁。至此,服務器環境安裝成功。運行后面的示例時,需要把網頁文件放到www目錄下,通過“http://localhost/網頁文件名”方式進行訪問執行。AJAX應用JavaScript的AJAX應用JavaScript中AJAX技術的核心是XMLHttpRequest對象,該對象的功能是和服務器進行異步接收或發送數據。1.創建XMLHttpRequest對象實例使用XMLHttpRequest對象之前必須創建XMLHttpRequest對象實例。由于IE6瀏覽器使用ActiveXObject方式引入XMLHttpRequest對象,而其他瀏覽器中XMLHttpRequest對象是Window對象的子對象,所以代碼中需要針對不同瀏覽器創建實例。創建XMLHttpRequest對象實例的基本語法格式如下。var實例名;if(window.ActiveXObject){AJAX應用JavaScript的AJAX應用實例名=newActiveXObject("Microsoft.XMLHTTP");}elseif(window.XMLHttpRequest){實例名=newXMLHttpRequest();}2.指定文檔方法open()使用XMLHttpRequest對象實例的open()方法指定從服務器載入文檔的HTTP請求方式、文件名、是否使用異步方式,其基本語法格式如下。實例名.open("http請求方式","請求文件URL地址",是否采用異步方式);http請求方式為GET或POST。是否采用異步方式,默認為true,即異步方式發送請求。AJAX應用JavaScript的AJAX應用3.發送數據方法send()send()方法將open()方法指定的請求發送出去,該方法只有一個參數null,其基本語法格式如下。實例名.send(null);4.監聽服務器完成請求狀態XMLHttpRequest對象實例的onreadystatechange事件可以監聽服務器完成請求狀態,其基本語法格式如下。實例名.onreadystatechange=監聽結束回調函數;onreadystatechange事件返回readystate屬性和status屬性。readystate屬性有5種值,當數值為4時表示服務器已經處理完畢。status屬性表示請求是否成功,如果值為200,則表明請求成功。回調函數需要在readystate為4和status為200時,才能訪問服務器返回的數據。5.服務器返回數據屬性XMLHttpRequest對象實例的responseText屬性可以獲取服務器返回的數據。AJAX應用jQuery的AJAX應用jQuery中對AJAX進行了封裝,提供了一些與AJAX有關的方法和屬性,大大簡化了與服務器進行異步數據交互的步驟。1.加載文檔方法load()load()方法能載入遠程HTML文檔并將其插入指定的DOM元素,其基本語法格式如下。load(文檔地址,數據,回調函數)2.GET方式交互數據方法$.get()$.get()方法采用GET方式發送數據到服務器指定文檔,并載入返回信息,其基本語法格式如下。$.get(文檔地址,發送給服務器數據,回調函數,返回數據類型)AJAX應用jQuery的AJAX應用發送給服務器的數據以“{鍵:值}”的形式組成,多對數據間用逗號分隔。回調函數在服務器處理請求成功后執行,參數為返回的數據。返回數據的類型可以為XML、HTML、JSON等。3.POST方式交互數據方法$.post()$.post()方法采用POST方式發送數據到服務器指定文檔,并載入返回信息,其基本語法格式如下。$.post(文檔地址,發送給服務器數據,回調函數)發送給服務器的數據以“{鍵:值}”的形式組成,多對數據間用逗號分隔。回調函數在服務器處理請求成功后執行,參數為返回的數據。返回數據的類型可以為XML、HTML、JSON等。AJAX應用實訓工單問答題：(3)jQuery的AJAX技術常用的方法有哪些?(4)GET請求和POST請求的區別是什么?操作題設計一個用戶注冊頁面,使用AJAX技術將用戶名發送到服務器。在服務器端