站長(zhǎng)資訊網(wǎng)本篇文章帶大家了解一下jQuery中的Ajax，聊聊Ajax 的優(yōu)勢(shì)與不足，并深入了解一下Ajax的主要方法，希望對(duì)大家有所幫助！
序言
本文章參考并引用《鋒利的JQuery》，對(duì) jQuery-Ajax 及其主要方法進(jìn)行詳解。
一、Ajax 的優(yōu)勢(shì)與不足
1、Ajax 的優(yōu)勢(shì)
a. 不需任何瀏覽器插件
不需任何瀏覽器插件，就可以被大多數(shù)瀏覽器所支持，用戶只需要允許 JavaScript 在瀏覽器上執(zhí)行即可。
b. 優(yōu)秀的用戶體驗(yàn)。
最大的優(yōu)點(diǎn)，能在不刷新整個(gè)頁(yè)面的前提下更新數(shù)據(jù)，這使得 Web 應(yīng)用程序能迅速回應(yīng)用戶的操作。
c. 提高 Web 程序的性能
與傳統(tǒng)模式相比，Ajax 模式在性能上最大區(qū)別就是在于傳輸數(shù)據(jù)的方式，在傳統(tǒng)模式中，數(shù)據(jù)提交是通過(guò)表單（from）來(lái)實(shí)現(xiàn)的，而數(shù)據(jù)獲取的是靠全面刷新網(wǎng)頁(yè)來(lái)說(shuō)獲取整頁(yè)的內(nèi)容，Ajax 的模式只是通過(guò) XMLHttpRequest 對(duì)象來(lái)向服務(wù)器端提交需要提交的數(shù)據(jù)，即按需發(fā)送。
d. 減輕服務(wù)器和寬帶的負(fù)擔(dān)
Ajax 的工作的原理相當(dāng)于在用戶和服務(wù)器之間加了一個(gè)中間層，是用戶操作與服務(wù)器響應(yīng)異步化，他在客戶端創(chuàng)建 Ajax 引擎，把傳統(tǒng)方式下的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)移到客戶端，便于客戶端資源來(lái)處理，減輕服務(wù)器和寬帶的負(fù)擔(dān)。
2、Ajax 的不足
a. 瀏覽器對(duì) XMLHttpRequest 對(duì)象的支持度不足
Ajax 的不足之一首先來(lái)自于瀏覽器，IE5.0 及以后的版本才支持 XMLHttpRequest 對(duì)象（現(xiàn)階段大部分客戶端都在IE6以上），Mozilla，Netscape 等瀏覽器支持 XMLHttpRequest 則更在其后，為了使得 Ajax 應(yīng)用能在各個(gè)瀏覽器中正常運(yùn)行，程序員必須花費(fèi)大量的精力編碼以兼顧各個(gè)瀏覽器之間的差別，來(lái)讓 Aajx 應(yīng)用能更好的兼容各個(gè)瀏覽器。
b. 破壞瀏覽器前進(jìn)、后退按鈕的正常功能
在 Ajax 中，前進(jìn)和后退按鈕的功能都會(huì)失效，雖然可以通過(guò)一定的方法（添加錨點(diǎn)）來(lái)使用戶可以使用前進(jìn)和后退按鈕，但相對(duì)于傳統(tǒng)的方式卻麻煩了很多，對(duì)于用戶而言，他們經(jīng)常會(huì)碰到這種狀況，當(dāng)點(diǎn)擊一個(gè)按鈕觸發(fā)一個(gè) Ajax 交互后又覺(jué)得不想這樣做，接著就去習(xí)慣性的單擊后退按鈕，結(jié)果發(fā)生了最不愿意看到的結(jié)果，瀏覽器后退到先前的一個(gè)頁(yè)面，通過(guò) Ajax 交互得到的內(nèi)容完全消失了。
c. 對(duì)搜索引擎的支持不足
通常搜索引擎都是通過(guò)爬蟲來(lái)對(duì)互聯(lián)網(wǎng)上的數(shù)以億計(jì)的海量數(shù)據(jù)進(jìn)行搜索整理的，然而爬蟲程序現(xiàn)在還不能理解那些奇怪的 JavaScript 代碼和因此引起的頁(yè)面內(nèi)容的變化，這使得應(yīng)用 Ajax 的站點(diǎn)在網(wǎng)絡(luò)推廣上相對(duì)于傳統(tǒng)站點(diǎn)處于劣勢(shì)。
d. 開(kāi)發(fā)和調(diào)試工具的缺乏
JavaScript 是 Ajax 的重要組成部分，在目前，由于缺少很好的 JavaScript 開(kāi)發(fā)和調(diào)試工具，使很多Web開(kāi)發(fā)者對(duì)于 JavaScript 望而生畏，這對(duì)于編寫 Ajax 代碼就更加苦難了，勇士，目前許多 Web 開(kāi)發(fā)者已經(jīng)習(xí)慣使用可視化的工具，對(duì)于親自編寫代碼有畏懼感，著她在一定程度上影響了大家對(duì) Ajax 的應(yīng)用。
二、安裝Web環(huán)境—AppServ
Ajax 方法需要與 Web 服務(wù)器端進(jìn)行交互，所以需要環(huán)境，AppServe為安裝環(huán)境的工具包。
下載地址：https://www.appserv.org/en/download/
安裝：連續(xù)單機(jī) Next 按鈕，輸入網(wǎng)址、電子郵箱、密碼等常用信息即可，端口默認(rèn)為 80。
在瀏覽器輸入“http://localhost:80”，出現(xiàn)如下界面，表示安裝成功。
使用：將寫好的程序復(fù)制到安裝好后的 AppServwww 文件夾中，然后在地址欄中輸入 “http://loaclhost:80/程序文件名稱” 即可訪問(wèn)。
三、jQuery Ajax 操作函數(shù)
jQuery 庫(kù)擁有完整的 Ajax 兼容套件。其中的函數(shù)和方法允許我們?cè)诓凰⑿聻g覽器的情況下從服務(wù)器加載數(shù)據(jù)。
https://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
在上圖中，
.get() 和
.getScript() 和 $.getJSON()方法。
1、$.ajax()方法
之前有發(fā)過(guò)一篇文章 “jquery ajax-ajax()方法詳解”
具體請(qǐng)戳：https://juejin.cn/post/7019188063704350756
2、load()方法
相較于其他方法，最簡(jiǎn)單且最常用，能載入遠(yuǎn)程HTML代碼并插入DOM中。
結(jié)構(gòu)
load( url , [data] , [callback] )
參數(shù)
應(yīng)用
1）載入 HTML 文檔
首先構(gòu)建一個(gè)被 load() 方法加載并追加到頁(yè)面中的HTML文件（test.html），HTML 代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>測(cè)試</title> </head> <body> <div> <p>hello world!</p> <ul> <li>C</li> <li>C#</li> <li>C++</li> <li>Java</li> <li>.Net</li> <li>JSP</li> <li>ASP</li> <li>PHP</li> <li>Python</li> <li>ios</li> <li>Android</li> <li>Javascript</li> <li>CSS</li> <li>HTML</li> <li>XML</li> <li>VUE</li> <li>React</li> <li>Angular</li> <li>SQL</li> </ul> </div> </body> </html>
然后新建一個(gè)空白頁(yè)面（main.html），包含觸發(fā) Ajax 事件的按鈕 ，以及 id 為 “content” 的
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery/jquery-2.1.1.js"></script> <title>main</title> </head> <body> <!-- load() 方法 --> <button id="btn1">點(diǎn)擊加載</button> <h1>加載的內(nèi)容:</h1> <div id="content1"></div> </body> </html>
接下來(lái)編寫 jQuery 代碼。等 DOM 加載完以后，通過(guò)點(diǎn)擊按鈕調(diào)用 load 方法，將 test.html 中的內(nèi)容加載到 id 為 ”content“ 的元素中，代碼如下：
<script type="text/javascript"> $(function(){ // load(url)方法 $("#btn1").click(function(){ $("#content1").load("test.html")//單擊時(shí)將test.html的內(nèi)容加載到當(dāng)前頁(yè)面上 }) }) </script>
運(yùn)行結(jié)果
加載前：
加載后：
2）篩選載入的HTML文檔
上面例子是將 test.html 中的內(nèi)容全部都加載到 main.html 中 id 為 ”content“ 的元素中，如果只想加載某些內(nèi)容，可以使用 load( url selector ) 來(lái)實(shí)現(xiàn)。
注意：url 和選擇器之間有一個(gè)空格。
例如只加載 test.html 中 p 標(biāo)簽的內(nèi)容，代碼如下：
<script type="text/javascript"> $(function(){ // load(url, selector)篩選 $("#btn1").click(function(){ $("#content1").load("test.html p") }) }) </script>
運(yùn)行結(jié)果
3）傳遞方式
load() 方法傳遞方式根據(jù)參數(shù) data 來(lái)自動(dòng)指定。如果沒(méi)有參數(shù)傳遞，則采用 GET 方式，反之，則自動(dòng)轉(zhuǎn)換為 POST 方式。
// load(url,fn)方法，無(wú)參數(shù)傳遞，GET方式 $("#btn1").click(function(){ $("#content1").load("test.html", function(){ // code }) }) // load(url,fn)方法，有參數(shù)傳遞，POST方式 $("#btn1").click(function(){ $("#content1").load("test.html", {name: "peiqi", age: "18"}, function(){ // code }) })
4）回調(diào)參數(shù)
對(duì)于必須在加載完成后才能繼續(xù)的操作，load() 方法提供了回調(diào)函數(shù)（callback），該函數(shù)有3個(gè)參數(shù)，分別代表“請(qǐng)求返回的內(nèi)容”，“請(qǐng)求狀態(tài)”，“XMLHttpRequest對(duì)象”，代碼如下：
$("#content1").load("test.html p"，function（responseText，textStates，XMLHttpRequest）{ //responseText：請(qǐng)求返回的內(nèi)容 //textStates：請(qǐng)求狀態(tài)：success error notmodified timeout4種 //XMLHttpRequest：XMLHttpRequest對(duì)象 });
注意：在 load() 方法中，無(wú)論Ajax請(qǐng)求是否成功，只要請(qǐng)求完成（complete），回調(diào)函數(shù)（callback）都會(huì)被觸發(fā)。
3、 .post() 方法
load() 通常是從web服務(wù)器上獲取靜態(tài)的數(shù)據(jù)文件，如果需要傳遞一些參數(shù)給服務(wù)器中的頁(yè)面，可以使用
.post() 方法（或 $.ajax() 方法）。
注意：
.post() 方法是 jQuery 中的全局函數(shù)。
1）$.get() 方法
$.get() 方法使用 GET 方式來(lái)進(jìn)行異步請(qǐng)求。
結(jié)構(gòu)
$.get( url，[ data ]，[ callback ]，[ type ])
參數(shù)
應(yīng)用
下面是一段評(píng)論頁(yè)面的 HTML 代碼，通過(guò)該段代碼來(lái)介紹 $.get() 方法的使用。代碼如下：
<!-- $.get() 和 $.post() 方法 --> <h3>評(píng)論</h3> <p>姓名:<input type="text" name="" id="name"></p> <p>內(nèi)容:<textarea id="content2"></textarea></p> <button id="btn2">發(fā)表留言</button> <div id="msg"></div>
該段代碼生成的頁(yè)面如圖所示：
將姓名和內(nèi)容填寫好后，就可以提交評(píng)論了。
a.首先需要確定請(qǐng)求的 URL 地址。
$("#btn2").click(function(){ $.get("test.php", data參數(shù), 回調(diào)函數(shù)) })
b.提交之前，將姓名和內(nèi)容的值作為參數(shù) data 傳遞給后臺(tái)。
$("#btn2").click(function(){ $.get("test.php", {"username":$("#name").val(), "content":$("#content2").val()}, 回調(diào)函數(shù)) })
c.如果服務(wù)器接收到傳遞的 data 數(shù)據(jù)并成功返回，那么就可以通過(guò)回調(diào)函數(shù)將返回的數(shù)據(jù)顯示到頁(yè)面上。
$.get() 方法的回調(diào)函數(shù)只有兩個(gè)參數(shù)
function(){ //data：返回的內(nèi)容，可以是XML文檔，json文件，XHML片段等等 //textStatus：請(qǐng)求狀態(tài)：success error notmodified timeout 4種 }
d. data 參數(shù)代表請(qǐng)求返回的內(nèi)容，textStatus 參數(shù)代表請(qǐng)求狀態(tài)，而且回調(diào)函數(shù)只有當(dāng)數(shù)據(jù)成功（success）后才能被調(diào)用（ load() 是不管成功還是失敗都被調(diào)用 ）。
// $.get()方法 $("#btn2").click(function(){ $.get("test.php", {"username":$("#name").val(),"content":$("#content2").val()}, function(data,textStatus){ if(textStatus=="success"){ //success // code $(data).appendTo("#msg") } }, "html")//type })
e.運(yùn)行結(jié)果
2）$.post() 方法
它與 $.get() 方法的結(jié)構(gòu)和使用方式都相同，不過(guò)之間仍然有以下區(qū)別：
a. GET 方式會(huì)將參數(shù)跟在 URL 后進(jìn)行傳遞且數(shù)據(jù)會(huì)被瀏覽器緩存起來(lái)，而 POST 方式則是作為 HTTP 消息的實(shí)體內(nèi)容（也就是包裹在請(qǐng)求體中）發(fā)送給服務(wù)器，由此可見(jiàn) POST 方式的安全性高于 GET 方式。
b. GET 方式對(duì)傳輸?shù)臄?shù)據(jù)有大小限制（通常不能大于2KB），而 POST 方式理論上大小不限制。
c. GET 方式與 POST 方式傳遞的數(shù)據(jù)在服務(wù)器端的獲取不相同。在 PHP 中，GET 方式的數(shù)據(jù)可用 "_GET[]" 獲取，而 POST 方式可以用 "_POST[]" 獲取。2種方式都可用 "$_REQUEST[]" 來(lái)獲取。
d. GET 方式的傳輸速度高于 POST 方式。
由于 POST 和 GET 方式提交的所有數(shù)據(jù)都可以通過(guò) $_REQUEST[] 來(lái)獲取，因此只要改變jQuery函數(shù)，就可以將程序在 GET 請(qǐng)求和 POST 請(qǐng)求之間切換，代碼如下：
// $.post()方法 $("#btn2").click(function(){ $.post("test.php", {"username":$("#name").val(),"content":$("#content2").val()}, function(data,textStatus){ if(textStatus=="success"){ //success // code $(data).appendTo("#msg") } }, "html")//type })
另外，當(dāng) load() 方法帶有參數(shù)傳遞時(shí)，會(huì)使用 POST 方式發(fā)送請(qǐng)求。因此也可以使用 load() 方法來(lái)完成同樣的功能，代碼如下：
$("#btn2").click(function(){ $("#msg").load("test.php", { "username":$("#name").val(), "content":$("#content2").val() }); })
4、
.getJson() 方法
1）$.getScript() 方法
有時(shí)候，在頁(yè)面初次加載時(shí)就獲取所需的全部 JavaScript 文件是完全沒(méi)有必要的。雖然可以在需要哪個(gè) JavaScript 文件時(shí)，動(dòng)態(tài)創(chuàng)建
$(document.createElement("script")).attr("src", "test.js").appendTo("head"); //或者 $("<script type='text/javascript' src='test.js' />").appendTo("head");
但這種方式并不理想。jQuery 提供了 $.getScript() 方法來(lái)直接加載 js 文件，與加載一個(gè) HTML 片段一樣簡(jiǎn)單方便，并且不需要對(duì) JavaScript 文件進(jìn)行處理，JavaScript 文件會(huì)自動(dòng)執(zhí)行。
結(jié)構(gòu)
$.getScript( url , fn ); //url:請(qǐng)求地址 //fn:回調(diào)函數(shù)
應(yīng)用
新建一個(gè) nowDate.js 文件，獲取當(dāng)前日期，代碼如下：
function getNowDate(){ var date = new Date return date; }
點(diǎn)擊“獲取當(dāng)前時(shí)間”按鈕時(shí) ，顯示最新時(shí)間日期，代碼如下：
//HTML代碼 <!-- $.getScript() 方法 --> <button id="btn3">點(diǎn)擊獲取時(shí)間</button> <div id="message1"></div> //jQuery代碼 // $.getScript()方法 $("#btn3").click(function(){ $.getScript("nowDate.js", function(){ var date1 = getNowDate(); //調(diào)用nowDate.js中的getNowDate()方法獲取日期 var txtHtml= "<div>"+ date1 + "</div>"; $("#message1").html(txtHtml); }) })
運(yùn)行結(jié)果
加載前：
加載后：
2）$.getJSON() 方法
.getScript() 方法的用法相同。
結(jié)構(gòu)
$.getJSON( url , fn); //url:請(qǐng)求地址 //fn:回調(diào)函數(shù)
應(yīng)用
新建一個(gè) test.json 文件，代碼如下：
{ "helen":{ "sex":"woman", "age":18, "weight":"50kg", "height":"165cm" }, "peter":{ "sex":"man", "age":28, "weight":"65kg", "height":"185cm" } }
新建一個(gè) HTML 文件，代碼如下：
<!-- $.getJSON() 方法 --> <button id="btn4">點(diǎn)擊加載JSON文件</button> <div id="message2"></div>
當(dāng)點(diǎn)擊加載按鈕時(shí)，頁(yè)面上看不到任何效果，可以在控制臺(tái)查看，代碼如下：
// $.getJSON()方法 $("#btn4").click(function(){ $.getJSON("test.json", function(data){ console.log(data); //控制臺(tái)輸出返回的數(shù)據(jù) }) })
控制臺(tái)輸出如圖：
以上雖然函數(shù)加載了 JSON 文件（test.json），但是并沒(méi)有告知 JavaScript 對(duì)返回的數(shù)據(jù)如何處理，所以在回調(diào)函數(shù)里我們可以處理返回的數(shù)據(jù)。
通常我們需要遍歷我們得到的數(shù)據(jù)，雖然這里我們可以使用傳統(tǒng)的for循環(huán)，但是我們也可以通過(guò)
.each() 函數(shù)是以一個(gè)數(shù)組或者對(duì)象為第1個(gè)參數(shù)，以一個(gè)回調(diào)函數(shù)作為第2個(gè)參數(shù)，回調(diào)函數(shù)擁有兩個(gè)參數(shù)，第1個(gè)為對(duì)象的成員或者數(shù)組的下標(biāo)，第2個(gè)位對(duì)應(yīng)變量或內(nèi)容，代碼如下：
// $.getJSON()方法 $("#btn4").click(function(){ $.getJSON("test.json", function(data){ console.log(data); //控制臺(tái)輸出返回的數(shù)據(jù) // 對(duì)返回的數(shù)據(jù)做處理 var txtHtml = ""; $.each(data, function(index, item){ txtHtml += "<div><h4>" + index + "：</h4><ul><li>sex：" + item["sex"] + "</li><li>age：" + item["age"] + "</li><li>weight：" + item["weight"] + "</li><li>height：" + item["height"] + "</li></div>"; }) $("#message2").html(txtHtml); }) })
效果如圖：
加載前：
加載后：
【推薦學(xué)習(xí)：jQuery視頻教程、web前端視頻】
