第7單元AJAX在jQuery中的應用了解AJAX技術(shù)以及它的優(yōu)點、缺點。了解并安裝Web運行環(huán)境。了解通過JavaScript應用AJAX技術(shù)。掌握jQuery中的AJAX應用。掌握AJAX的全局事件的使用。教學目標pedagogicalobjectives能夠熟練使用jQuery中的AJAX應用。能夠熟練使用jQuery中的AJAX全局事件。加深對異步技術(shù)的理解與應用，提升數(shù)據(jù)交互設計的邏輯性與敏銳度，增強技術(shù)與實際需求結(jié)合的能力。目錄導航7.1AJAX技術(shù)簡介7.3通過JavaScript應用AJAX7.5AJAX的全局事件7.2安裝Web運行環(huán)境——AppServ7.4jQuery中的AJAX應用7.6項目實戰(zhàn)：使用AJAX實現(xiàn)留言板即時更新7.1.1AJAX概述AJAX是AsynchronousJavaScriptandXML的縮寫，它的意思是異步的JavaScript和XML。AJAX并不是一門新的語言或技術(shù)，它是JavaScript、XML、CSS、DOM等多種已有語言或技術(shù)的組合，可以實現(xiàn)客戶端的異步請求操作，從而實現(xiàn)在不需要刷新頁面的情況下與服務器進行通信，減少了用戶的等待時間，減輕了服務器和帶寬的負擔，提供了更好的服務響應。Web應用的傳統(tǒng)模型Web應用的AJAX模型7.1.2AJAX技術(shù)的優(yōu)點AJAX可以把一部分以前由服務器承擔的工作轉(zhuǎn)移到客戶端，利用客戶端閑置的資源進行處理，減輕服務器和帶寬的負擔，節(jié)約空間和成本。AJAX實現(xiàn)無刷新更新頁面，從而使用戶不用再像以前一樣在服務器處理數(shù)據(jù)時，只能在白屏前焦急地等待。AJAX使用XMLHttpRequest對象發(fā)送請求并得到服務器響應，在不需要重新載入整個頁面的情況下，就可以通過DOM及時將更新的內(nèi)容顯示在頁面中。AJAX可以調(diào)用XML等外部數(shù)據(jù)。AJAX基于標準化并被廣泛支持的技術(shù)，不需要下載插件或者小程序，即可輕松實現(xiàn)桌面應用程序的效果。AJAX沒有平臺限制。AJAX把服務器的工作由原本的傳輸內(nèi)容轉(zhuǎn)變?yōu)閭鬏敂?shù)據(jù)，而數(shù)據(jù)格式可以是純文本格式和XML格式，這兩種數(shù)據(jù)格式?jīng)]有平臺限制。7.1.3AJAX技術(shù)的缺點瀏覽器對XMLHttpRequest對象的支持不足破壞瀏覽器“前進”“后退”按鈕的正常行為IE從5.0版本開始才支持XMLHttpRequest對象，Mozilla、Netscape等瀏覽器支持XMLHttpRequest對象的時間晚于IE。為使AJAX在各個瀏覽器中都能夠正常運行，開發(fā)人員必須花費大量精力編碼，從而實現(xiàn)各個瀏覽器兼容XMLHttpRequest對象，這樣就使AJAX開發(fā)難度高于普通Web開發(fā)難度。在傳統(tǒng)頁面中，用戶會習慣性地使用瀏覽器自帶的“前進”“后退”按鈕，但使用AJAX破壞了瀏覽器“前進”“后退”按鈕的正常行為。在更新動態(tài)頁面的情況下，用戶無法回到前一個頁面的狀態(tài)，因為瀏覽器僅能記錄歷史記錄中的靜態(tài)頁面。用戶通常希望單擊“后退”按鈕取消前一次操作，在AJAX中用戶可能無法這樣做。目錄導航7.1AJAX技術(shù)簡介7.3通過JavaScript應用AJAX7.5AJAX的全局事件7.2安裝Web運行環(huán)境——AppServ7.4jQuery中的AJAX應用7.6項目實戰(zhàn)：使用AJAX實現(xiàn)留言板即時更新7.2安裝Web運行環(huán)境——AppServ①同意AppServ安裝協(xié)議②選擇安裝路徑③設置安裝選項④設置Apache端口號⑤MySQL設置⑥完成安裝⑦AppServ目錄結(jié)構(gòu)⑧AppServ測試頁面目錄導航7.1AJAX技術(shù)簡介7.3通過JavaScript應用AJAX7.5AJAX的全局事件7.2安裝Web運行環(huán)境——AppServ7.4jQuery中的AJAX應用7.6項目實戰(zhàn)：使用AJAX實現(xiàn)留言板即時更新7.3通過JavaScript應用AJAX【例7-1】通過傳統(tǒng)的JavaScript應用AJAX從服務器端獲取文本。（1）聲明一個空對象來保存XMLHttpRequest對象，代碼如下：varxmlhttp=null;（2）創(chuàng)建XMLHttpRequest對象，代碼如下：functioncreateXMLHttpRequest(){ if(window.ActiveXObject){//瀏覽器為IE xmlhttp=newActiveXObject("Microsoft.XMLHTTP"); }elseif(window.XMLHttpRequest){//瀏覽器非IE xmlhttp=newXMLHttpRequest(); }}編寫startRequest()方法，使用open()方法初始化XMLHttpRequest對象，指定要使用的服務器URL。代碼如下：varurl="index.php";//要使用的服務器URL7.3通過JavaScript應用AJAX【例7-1】通過傳統(tǒng)的JavaScript應用AJAX從服務器端獲取文本。（4）XMLHttpRequest對象提供了用于指定狀態(tài)改變時所觸發(fā)的事件處理器的屬性onreadystatechange。在AJAX中，每個狀態(tài)改變時都會觸發(fā)指定的事件處理器，通常會調(diào)用一個JavaScript函數(shù)。當請求狀態(tài)改變時，XMLHttpRequest對象觸發(fā)onreadystatechange屬性指定的事件處理器。因此在處理該事件之前，事件處理器應該首先檢查readyState屬性值和HTTP狀態(tài)值。當請求完成（readyState屬性值為4）并且事件已經(jīng)成功（HTTP狀態(tài)值為200）時，就可以調(diào)用一個JavaScript函數(shù)來處理該事件內(nèi)容。代碼如下：xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ alert(xmlhttp.responseText); }}（5）調(diào)用send()方法提交請求。因為請求使用的是HTTP的get方式，所以可以在不指定參數(shù)或使用null參數(shù)的情況下調(diào)用send()方法。代碼如下：xmlhttp.send(null);7.3通過JavaScript應用AJAX【例7-1】通過傳統(tǒng)的JavaScript應用AJAX從服務器端獲取文本。（6）將源代碼文件存放到AppServ/www目錄下，然后根據(jù)目錄地址對其進行訪問，如圖所示。（7）單擊“獲取服務器端文本”按鈕，可以看到網(wǎng)頁彈出的提示對話框中顯示“我的第一個AJAX實例！”，運行效果如圖

所示。目錄導航7.1AJAX技術(shù)簡介7.3通過JavaScript應用AJAX7.5AJAX的全局事件7.2安裝Web運行環(huán)境——AppServ7.4jQuery中的AJAX應用7.6項目實戰(zhàn)：使用AJAX實現(xiàn)留言板即時更新7.4.1使用load()方法獲取異步數(shù)據(jù)01OPTION載入HTML頁面（1）創(chuàng)建要載入的頁面mofun.html，代碼如下：<div><p>莫凡魔方科技</p><p>莫凡圖書</p><p>jQuery開發(fā)基礎(chǔ)教程</p></div>（2）創(chuàng)建index.html頁面，在頁面中添加按鈕以及id屬性值為loadhtml的<div>元素，代碼如下：<inputtype="button"id="btn"value="載入頁面"/><divid="loadhtml"></div>【例7-2】使用load()方法載入頁面。7.4.1使用load()方法獲取異步數(shù)據(jù)01OPTION載入HTML頁面（3）引入jQuery庫并且在其下方編寫jQuery代碼，使用load()方法載入之前創(chuàng)建的mofun.html頁面，代碼如下：<scripttype="text/javascript"src="../js/jquery-3.6.4.min.js"></script><scripttype="text/javascript">$(document).ready(function(){ $("#btn").on("click",function(){ $("#loadhtml").load("mofun.html"); })})</script>【例7-2】使用load()方法載入頁面。運行結(jié)果7.4.1使用load()方法獲取異步數(shù)據(jù)【例7-3】載入頁面中class屬性值為mofun365的元素。（1）創(chuàng)建要載入的頁面mofun.html，代碼如下：<div><pclass="mofun365">莫凡魔方科技</p><pclass="mofun365">莫凡圖書</p><pclass="mofun">jQuery開發(fā)基礎(chǔ)教程</p></div>（2）第（2）步同例7-2第（2）步。（3）在引入jQuery庫的下方編寫jQuery代碼，使用load()方法載入mofun.html頁面中class屬性值為mofun365的元素，代碼如下：02OPTION載入HTML頁面中的指定元素7.4.1使用load()方法獲取異步數(shù)據(jù)【例7-3】載入頁面中class屬性值為mofun365的元素。<scripttype="text/javascript"src="../js/jquery-3.6.4.min.js"></script><scripttype="text/javascript">$(document).ready(function(){ $("#btn").on("click",function(){ $("#loadhtml").load("mofun.html.mofun365"); })})</script>02OPTION載入HTML頁面中的指定元素運行結(jié)果7.4.1使用load()方法獲取異步數(shù)據(jù)03OPTION傳遞方式和傳遞參數(shù)load()方法的傳遞方式是根據(jù)傳遞參數(shù)data來指定的。如果沒有傳遞參數(shù)data，默認采用get方式傳遞，否則將自動轉(zhuǎn)換為post方式。例如下面的代碼，無傳遞參數(shù)data，因此傳遞方式是get方式。$("#loadhtml").load("mofun.php",function(responseText,status,XMLHttpRequest){ //省略部分代碼});而下面的代碼有傳遞參數(shù)data，因此傳遞方式是post方式。$("#loadhtml").load("mofun.php",{name:"xiaogang",age:"30"},function(responseText,status,XMLHttpRequest){ //省略部分代碼});7.4.2使用$.get()方法請求數(shù)據(jù)$.get()方法使用get方式異步請求數(shù)據(jù)，它的語法格式為：$.get(url[,data][,callback][,type])url：請求的HTML頁面的URL地址。data：可選參數(shù)，指定發(fā)送到服務器的數(shù)據(jù)。callback：可選參數(shù)，規(guī)定當請求成功時調(diào)用的回調(diào)函數(shù)。type：可選參數(shù)，預計的服務器響應的數(shù)據(jù)類型。7.4.2使用$.get()方法請求數(shù)據(jù)【例7-4】使用$.get()方法請求數(shù)據(jù)。（1）創(chuàng)建index.html頁面，構(gòu)建表單。主要代碼如下：<formname="form"action="">

用戶名：<inputtype="text"id="username"/><br/><br/>

內(nèi)容：<textareaid="content"></textarea><br/><br/> <inputtype="button"id="button"value="提交"/><br/><br/> <divid="responseText"></div></form>（2）給按鈕添加click事件，確定請求頁面的URL，獲取用戶名與內(nèi)容字段并將其作為參數(shù)傳遞到index.php頁面，代碼如下：$("#button").on("click",function(){$.get("index.php",{username:$("#username").val(),content:$("#content").val()},回調(diào)函數(shù)，"json");})7.4.2使用$.get()方法請求數(shù)據(jù)【例7-4】使用$.get()方法請求數(shù)據(jù)。（3）如果服務器端成功返回數(shù)據(jù)，那么可以通過回調(diào)函數(shù)將返回的數(shù)據(jù)顯示在頁面中。其中回調(diào)函數(shù)有兩個參數(shù)。代碼格式如下：function(data,status){ //data：服務器端返回的數(shù)據(jù)，可以是XML、JSON、HTML文檔等 //status：請求狀態(tài)});（4）創(chuàng)建index.php文件，獲取頁面?zhèn)鬟f的數(shù)據(jù)，保存到$dataArray數(shù)組中，之后使用json_encode()方法將數(shù)組轉(zhuǎn)換為JSON對象并返回。具體代碼如下：7.4.2使用$.get()方法請求數(shù)據(jù)【例7-4】使用$.get()方法請求數(shù)據(jù)。（5）由于服務端返回的是JSON對象，因此需要對返回的數(shù)據(jù)進行處理。在以上代碼中，將$.get()方法的第4個參數(shù)（type）設置為json，表示服務器返回的數(shù)據(jù)格式為JSON格式，之后編寫回調(diào)函數(shù)，將頁面中id屬性值為responseText的<div>元素內(nèi)容設置為用戶提交的用戶名與留言內(nèi)容。具體代碼如下：function(data,textStatus){//顯示用戶提交的用戶名與留言內(nèi)容 $("#responseText").html("用戶名："+data.username+"<br/>留言內(nèi)容："+data.content);}運行結(jié)果7.4.3使用$.post()方法請求數(shù)據(jù)$.post()方法的使用方式（post方式）與$.get()方法的使用方式（get方式）是相同的，不過它們之間仍有以下區(qū)別。get方式使用get方式可以傳送簡單數(shù)據(jù)，一般數(shù)據(jù)大小限制在2KB以下，數(shù)據(jù)追加到URL中發(fā)送。也就是說，使用get方式時瀏覽器會將數(shù)據(jù)作為參數(shù)追加到URL后面進行傳遞。最重要的是，數(shù)據(jù)會被客戶端瀏覽器緩存，這樣別人就可以從瀏覽器的歷史記錄中讀取用戶數(shù)據(jù)，例如賬號、密碼等。post方式使用post方式時，瀏覽器將表單字段元素以及數(shù)據(jù)作為HTTP消息實體內(nèi)容發(fā)送給Web服務器，而不是作為URL參數(shù)進行傳遞，可以避免數(shù)據(jù)被瀏覽器緩存，比get方式更加安全。而且使用post方式傳遞的數(shù)據(jù)量要比使用get方式傳送的數(shù)據(jù)量大得多。7.4.3使用$.post()方法請求數(shù)據(jù)【例7-5】使用$.post()方法請求數(shù)據(jù)。本實例的表單內(nèi)容與例7-4的相同，不同的是提交AJAX請求使用的是$.post()方法，即：在index.php文件中，獲取頁面?zhèn)鬟f的數(shù)據(jù)時使用$_POST方法，具體代碼如下：7.4.4使用$.getScript()方法加載JavaScript文件在頁面中獲取JavaScript文件內(nèi)容的方法有很多，例如：<scripttype="text/javascript"src="js/jquery.js"></script>但這些方法都不是最理想的。在jQuery中通過全局函數(shù)getScript()加載JavaScript文件時，不僅可以像加載HTML片段一樣簡單、方便，而且JavaScript文件會自動執(zhí)行，大大提高了頁面的執(zhí)行效率。具體代碼如下：$("#btn").on("click",function(){ $.getScript("js/jquery.js");})或者$("<scripttype='text/javascript'src='js/jquery.js'>").appendTo("head");7.4.4使用$.getScript()方法加載JavaScript文件【例7-6】使用$.getScript()方法加載JavaScript文件。（1）創(chuàng)建index.html頁面，在頁面中加入一個按鈕和兩個<div>元素。主要代碼如下：<inputtype="button"id="btn"value="改變背景色"/><divclass="mofun">莫凡魔方科技</div><divclass="mofun">莫凡圖書</div>（2）創(chuàng)建test.js文件，內(nèi)容如下：alert("test.js加載成功！");（3）在index.html面中加載test.js文件，加載完畢后執(zhí)行回調(diào)函數(shù)，給按鈕添加click事件，使單擊按鈕時，改變class屬性值為mofun的<div>元素的背景色。具體代碼如下：運行結(jié)果7.4.5使用$.getJSON()方法加載JSON文件JSON可以將JavaScript對象中表示的一組數(shù)據(jù)轉(zhuǎn)換為字符串，然后就可以在函數(shù)之間輕松地傳遞這個字符串。JSON格式的文件很方便計算機的讀取，因此受到開發(fā)人員的青睞。在jQuery中$.getJSON()方法用于加載JSON文件，它的用法與$.getScript()方法的用法相同。例如，要加載test.json文件，具體代碼如下：$("#btn").click(function(){ $.getJSON("test.json",回調(diào)函數(shù));})【例7-7】使用$.getJSON()方法加載JSON文件。（1）創(chuàng)建index.html頁面，在頁面中加入一個id屬性值為json的<div>空元素，代碼如下：<divid="json"></div>7.4.5使用$.getJSON()方法加載JSON文件【例7-7】使用$.getJSON()方法加載JSON文件。（2）創(chuàng)建test.json文件，內(nèi)容為：（3）在index.html頁面中加載test.json文件，加載完畢后執(zhí)行回調(diào)函數(shù)，首先定義一個空的字符串htmlStr，然后使用$.each()方法遍歷返回的數(shù)據(jù)（即第1個參數(shù)data），并以一個回調(diào)函數(shù)作為第2個參數(shù)，將結(jié)果保存在htmlStr字符串中。具體代碼如下：運行結(jié)果7.4.6使用$.ajax()方法請求數(shù)據(jù)參數(shù)options為$.ajax()方法中的請求設置，語法格式為key/value，既包含發(fā)送請求的參數(shù)，又包含服務器響應后回調(diào)的數(shù)據(jù)。$.ajax()方法中常用的參數(shù)如表所示。$.ajax(options);參數(shù)名稱類型說明urlString發(fā)送請求的地址（默認為當前頁面的地址）typeString數(shù)據(jù)請求方式（post方式或get方式），默認為get方式dataString或Object發(fā)送到服務器的數(shù)據(jù)。如果數(shù)據(jù)不是字符串格式，則自動轉(zhuǎn)換成字符串格式；如果請求方式是get方式，則該字符串將附在URL后dataTypeString服務器返回的數(shù)據(jù)類型。如果沒有指定數(shù)據(jù)類型，jQuery將自動根據(jù)HTTP包MIME信息自動判斷，服務器返回的數(shù)據(jù)根據(jù)自動判斷結(jié)果進行解析，傳遞給回調(diào)函數(shù)?？捎玫臄?shù)據(jù)類型如下：html：返回純文本HTML信息，包含的<Script>標記會在插入頁面時被執(zhí)行。script：返回純文本JavaScript代碼。text：返回純文本字符串。xml：返回可被jQuery處理的XML文檔。json：返回JSON格式的數(shù)據(jù)7.4.6使用$.ajax()方法請求數(shù)據(jù)參數(shù)名稱類型說明

beforeSendFunction該函數(shù)用于在發(fā)送請求前修改XMLHttpRequest對象。該函數(shù)的參數(shù)就是XMLHttpRequest對象。由于該函數(shù)本身是jQuery事件，因此如果函數(shù)返回false，則表示取消本次事件。function(XMLHttpRequest){this;//調(diào)用本次AJAX請求傳遞的options參數(shù)}completeFunction請求完成后調(diào)用的回調(diào)函數(shù)。該函數(shù)無論數(shù)據(jù)發(fā)送成功或失敗都會被調(diào)用。該函數(shù)有兩個參數(shù)，一個是XMLHttpRequest對象，另一個是用來描述成功請求類型的字符串textStatus。function(XMLHttpRequest,textStatus){this;//調(diào)用本次AJAX請求傳遞的options參數(shù)}successFunction請求成功后調(diào)用的回調(diào)函數(shù)。該函數(shù)有兩個參數(shù)，一個是根據(jù)dataType參數(shù)處理后服務器返回的數(shù)據(jù)，另一個是用來描述狀態(tài)的字符串textStatus。function(data,textStatus){//data可能是xmlDoc、jsonObj、html、text等this;//調(diào)用本次AJAX請求傳遞的options參數(shù)}errorFunction請求失敗后調(diào)用的回調(diào)函數(shù)。該函數(shù)有3個參數(shù)，第1個參數(shù)是XMLHttpRequest對象，第2個參數(shù)是出錯信息strError，第3個參數(shù)是捕捉到的錯誤對象strObject。function(XMLHttpRequest,strError,strObject){//通常情況下strError參數(shù)和strObject參數(shù)只有一個包含信息this;//調(diào)用本次AJAX請求傳遞的options參數(shù)}globalBoolean是否響應全局事件，默認參數(shù)值為true表示響應，如果將參數(shù)值設置成false表示不響應，全局事件ajaxStart等將不響應timeoutNumber請求超時的時間（ms），該參數(shù)的設置將覆蓋$.ajaxSetup()方法的全局設置7.4.6使用$.ajax()方法請求數(shù)據(jù)【例7-8】使用$.ajax()方法請求數(shù)據(jù)。本實例的表單內(nèi)容與例7-4的相同，不同的是提交AJAX請求使用的是$.ajax()方法，即：$.ajax({type:"GET",url:"index.php", data:{username:$("#username").val(),content:$("#content").val()}, dataType:"json", success:function(data,textStatus){ //顯示用戶提交的用戶名與留言內(nèi)容 $("#responseText").html("用戶名："+data.username+"<br/>留言內(nèi)容："+data.content);}});7.4.7使用serialize()方法序列化表單【例7-9】使用serialize()方法序列化表單。（1）創(chuàng)建index.html頁面，構(gòu)建表單，在此處給表單中的控件添加name屬性，并給表單賦予一個id屬性值。主要代碼如下：（2）引入jQuery庫，并且在引入代碼下方編寫jQuery代碼，使用$.post()方法提交表單、傳值。具體代碼如下：運行結(jié)果目錄導航7.1AJAX技術(shù)簡介7.3通過JavaScript應用AJAX7.5AJAX的全局事件7.2安裝Web運行環(huán)境——AppServ7.4jQuery中的AJAX應用7.6項目實戰(zhàn)：使用AJAX實現(xiàn)留言板即時更新7.5.1AJAX的全局事件參數(shù)全局事件名稱參數(shù)說明ajaxComplete(callback)callbackAJAX請求完成時執(zhí)行的函數(shù)，在jQuery3.5中已廢棄，請使用.on("ajaxComplete",handler)ajaxError(callback)callbackAJAX請求發(fā)生錯誤時執(zhí)行的函數(shù)，其中捕捉到的錯誤可以作為最后一個參數(shù)進行傳遞，在jQuery3.5中已廢棄，請使用.on("ajaxError",handler)ajaxSend(callback)callbackAJAX請求發(fā)送前執(zhí)行的函數(shù)，在jQuery3.5中已廢棄，請使用.on("ajaxSend",handler)ajaxStart(callback)callbackAJAX請求開始時執(zhí)行的函數(shù)，在jQuery3.5中已廢棄，請使用.on("ajaxStart",handler)ajaxStop(callback)callbackAJAX請求結(jié)束時執(zhí)行的函數(shù)，在jQuery3.5中已廢棄，請使用.on("ajaxStop",handler)ajaxSuccess(callback)callbackAJAX請求成功時執(zhí)行的函數(shù)，在jQuery3.5中已廢棄，請使用.on("ajaxSuccess",handler)7.5.2ajaxStart與ajaxStop全局事件【例7-10】使用ajaxStart