這篇文章帶大家了解一下jQuery中的Ajax，聊聊Ajax 的優勢與不足，並深入了解一下Ajax的主要方法，希望對大家有所幫助！
序言
這篇文章參考並引用《尖銳的JQuery》，對 jQuery-Ajax 及其主要方法進行詳解。
一、Ajax 的優勢與不足
1、Ajax 的優勢
a. 不需要任何瀏覽器外掛程式
不需要任何瀏覽器插件，就可以被大多數瀏覽器所支援，使用者只需要允許JavaScript 在瀏覽器上執行。
b. 優秀的使用者體驗。
最大的優點，能在不刷新整個頁面的前提下更新數據，這使得 Web 應用程式能迅速回應使用者的操作。
c. 提高Web 程式的效能
與傳統模式相比，Ajax 模式在效能上最大差異就是在於傳輸資料的方式，在傳統模式中，資料提交是透過表單（from）來實現的，而資料獲取的是靠全面刷新網頁來說獲取整頁的內容，Ajax 的模式只是透過XMLHttpRequest 物件來向伺服器端提交需要提交的數據，即按需發送。
d. 減輕伺服器和寬頻的負擔
Ajax 的工作的原理相當於在用戶和伺服器之間加了一個中間層，是用戶操作與伺服器響應異步化，他在客戶端創建Ajax 引擎，把傳統方式下的一些伺服器負擔的工作轉移到客戶端，便於客戶端資源來處理，減輕伺服器和寬頻的負擔。
2、Ajax 的不足
a.瀏覽器對 XMLHttpRequest 物件的支援度不足
Ajax 的不足之一首先來自於瀏覽器，IE5. 0 及以後的版本才支援XMLHttpRequest 物件（現階段大部分用戶端都在IE6以上），Mozilla，Netscape 等瀏覽器支援XMLHttpRequest 則更在其後，為了使得Ajax 應用能在各個瀏覽器中正常運行，程序員必須花費大量的精力編碼以兼顧各個瀏覽器之間的差別，來讓Aajx 應用能更好的兼容各個瀏覽器。
b. 破壞瀏覽器前進、後退按鈕的正常功能
在Ajax 中，前進和後退按鈕的功能都會失效，雖然可以通過一定的方法（添加錨點）來使用戶可以使用前進和後退按鈕，但相對於傳統的方式卻麻煩了很多，對於用戶而言，他們經常會碰到這種狀況，當點擊一個按鈕觸發一個Ajax 交互後又覺得不想這樣做，接著就去習慣性的點擊後退按鈕，結果發生了最不願意看到的結果，瀏覽器後退到先前的一個頁面，透過Ajax 互動得到的內容完全消失了。
c. 對搜尋引擎的支援不足
通常搜尋引擎都是透過爬蟲來對網路上的數以億計的海量資料進行搜尋整理的，然而爬蟲程序現在還不能理解那些奇怪的JavaScript 程式碼和因此引起的頁面內容的變化，這使得應用Ajax 的網站在網路推廣上相對於傳統網站處於劣勢。
d. 開發和調試工具的缺乏
JavaScript 是Ajax 的重要組成部分，在目前，由於缺少很好的JavaScript 開發和調試工具，使很多Web開發者對於JavaScript 望而生畏，這對於編寫Ajax 程式碼就更加苦難了，勇士，目前許多Web 開發者已經習慣使用視覺化的工具，對於親自編寫程式碼有畏懼感，著她在一定程度上影響了大家對Ajax 的應用。
二、安裝Web環境---AppServ
Ajax 方法需要與 Web 伺服器端進行交互，所以需要環境，AppServe為安裝環境的工具包。
下載位址：https://www.appserv.org/en/download/
安裝：連續單機Next 按鈕，輸入網址、電子郵箱、密碼等常用資訊即可，端口預設為80。
在瀏覽器輸入“http://localhost:80”，出現以下介面，表示安裝成功。
使用：將寫好的程式複製到安裝好後的AppServ\www 資料夾中，然後在網址列中輸入「http://loaclhost:80/程式檔案名稱” 即可存取。
三、jQuery Ajax 操作函數
jQuery 函式庫擁有完整的 Ajax 相容套件。其中的函數和方法允許我們在不刷新瀏覽器的情況下從伺服器載入資料。
https://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
在上圖中，oad)法，
第
3
#層
是
.getScript() 和$.getJSON()方法。
1、$.ajax()方法之前有發過一篇文章「jquery ajax-ajax()方法詳解」
#具體請戳：https:/ /juejin.cn/post/7019188063704350756
2、load()方法
相較於其他方法，最簡單且最常用，能載入遠端HTML程式碼並插入DOM。
結構load( url , [data] , [callback] )
1）載入HTML 文件
先建構一個被load() 方法載入並追加到頁面中的HTML檔案（test.html），HTML 程式碼如下： 
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</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>然後新建一個空白頁面（main.html），包含觸發Ajax 事件的按鈕，以及id 為「content」 的用來顯示追加到的HTML內容（test.html ），其程式碼如下：
<!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">点击加载</button> <h1 id="加载的内容">加载的内容:</h1> <div id="content1"></div> </body> </html>###接下來編寫jQuery 程式碼。等DOM 載入完以後，點選按鈕呼叫load 方法，將test.html 中的內容載入到id 為」content「 的元素中，程式碼如下：###
<script type="text/javascript">
$(function(){
// load(url)方法
$("#btn1").click(function(){
$("#content1").load("test.html")//单击时将test.html的内容加载到当前页面上
})
})
</script>######執行結果#### #####載入前：###############載入後：###
2）筛选载入的HTML文档
上面例子是将 test.html 中的内容全部都加载到 main.html 中 id 为 ”content“ 的元素中，如果只想加载某些内容，可以使用 load( url selector ) 来实现。
注意：url 和选择器之间有一个空格。
例如只加载 test.html 中 p 标签的内容，代码如下：
<script type="text/javascript">
$(function(){
// load(url, selector)筛选
$("#btn1").click(function(){
$("#content1").load("test.html p")
})
})
</script>运行结果
3）传递方式
load() 方法传递方式根据参数 data 来自动指定。如果没有参数传递，则采用 GET 方式，反之，则自动转换为 POST 方式。
// load(url,fn)方法，无参数传递，GET方式
$("#btn1").click(function(){
$("#content1").load("test.html", function(){
// code
})
})
// load(url,fn)方法，有参数传递，POST方式
$("#btn1").click(function(){
$("#content1").load("test.html", {name: "peiqi", age: "18"}, function(){
// code
})
})4）回调参数
对于必须在加载完成后才能继续的操作，load() 方法提供了回调函数（callback），该函数有3个参数，分别代表“请求返回的内容”，“请求状态”，“XMLHttpRequest对象”，代码如下：
$("#content1").load("test.html p"，function（responseText，textStates，XMLHttpRequest）{
//responseText：请求返回的内容
//textStates：请求状态：success error notmodified timeout4种
//XMLHttpRequest：XMLHttpRequest对象
});注意：在 load() 方法中，无论Ajax请求是否成功，只要请求完成（complete），回调函数（callback）都会被触发。
3、.post() 方法
load() 通常是从web服务器上获取静态的数据文件，如果需要传递一些参数给服务器中的页面，可以使用 .post() 方法（或 $.ajax() 方法）。
注意：.post() 方法是 jQuery 中的全局函数。
1）$.get() 方法
$.get() 方法使用 GET 方式来进行异步请求。
结构
$.get( url，[ data ]，[ callback ]，[ type ])
参数
应用
下面是一段评论页面的 HTML 代码，通过该段代码来介绍 $.get() 方法的使用。代码如下：
<!-- $.get() 和 $.post() 方法 --> <h3 id="评论">评论</h3> <p>姓名:<input type="text" name="" id="name"></p> <p>内容:<textarea id="content2"></textarea></p> <button id="btn2">发表留言</button> <div id="msg"></div>
该段代码生成的页面如图所示：
将姓名和内容填写好后，就可以提交评论了。
a.首先需要确定请求的 URL 地址。
$("#btn2").click(function(){
$.get("test.php", data参数, 回调函数)
})b.提交之前，将姓名和内容的值作为参数 data 传递给后台。
$("#btn2").click(function(){
$.get("test.php", {"username":$("#name").val(), "content":$("#content2").val()}, 回调函数)
})c.如果服务器接收到传递的 data 数据并成功返回，那么就可以通过回调函数将返回的数据显示到页面上。
$.get() 方法的回调函数只有两个参数
function(){
//data：返回的内容，可以是XML文档，json文件，XHML片段等等
//textStatus：请求状态：success error notmodified timeout 4种
}d. data 参数代表请求返回的内容，textStatus 参数代表请求状态，而且回调函数只有当数据成功（success）后才能被调用（ load() 是不管成功还是失败都被调用 ）。
// $.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.运行结果
2）$.post() 方法
它与 $.get() 方法的结构和使用方式都相同，不过之间仍然有以下区别：
a. GET 方式会将参数跟在 URL 后进行传递且数据会被浏览器缓存起来，而 POST 方式则是作为 HTTP 消息的实体内容（也就是包裹在请求体中）发送给服务器，由此可见 POST 方式的安全性高于 GET 方式。
b. GET 方式对传输的数据有大小限制（通常不能大于2KB），而 POST 方式理论上大小不限制。
c. GET 方式与 POST 方式传递的数据在服务器端的获取不相同。在 PHP 中，GET 方式的数据可用 "\_GET\[\]" 获取，而 POST 方式可以用 "_POST[]" 获取。2种方式都可用 "$_REQUEST[]" 来获取。
d. GET 方式的传输速度高于 POST 方式。
由于 POST 和 GET 方式提交的所有数据都可以通过 $_REQUEST[] 来获取，因此只要改变jQuery函数，就可以将程序在 GET 请求和 POST 请求之间切换，代码如下：
// $.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
})另外，当 load() 方法带有参数传递时，会使用 POST 方式发送请求。因此也可以使用 load() 方法来完成同样的功能，代码如下：
$("#btn2").click(function(){
$("#msg").load("test.php", {
"username":$("#name").val(),
"content":$("#content2").val()
});
})4、.getJson() 方法
1）$.getScript() 方法
有时候，在页面初次加载时就获取所需的全部 JavaScript 文件是完全没有必要的。虽然可以在需要哪个 JavaScript 文件时，动态创建
$(document.createElement("script")).attr("src", "test.js").appendTo("head");
//或者
$("<script type='text/javascript' src='test.js' />").appendTo("head");但这种方式并不理想。jQuery 提供了 $.getScript() 方法来直接加载 js 文件，与加载一个 HTML 片段一样简单方便，并且不需要对 JavaScript 文件进行处理，JavaScript 文件会自动执行。
结构
$.getScript( url , fn ); //url:请求地址 //fn:回调函数
应用
新建一个 nowDate.js 文件，获取当前日期，代码如下：
function getNowDate(){
var date = new Date
return date;
}点击“获取当前时间”按钮时 ，显示最新时间日期，代码如下：
//HTML代码
<!-- $.getScript() 方法 -->
<button id="btn3">点击获取时间</button>
<div id="message1"></div>
//jQuery代码
// $.getScript()方法
$("#btn3").click(function(){
$.getScript("nowDate.js", function(){
var date1 = getNowDate(); //调用nowDate.js中的getNowDate()方法获取日期
var txtHtml= "<div>"+ date1 + "</div>";
$("#message1").html(txtHtml);
})
})运行结果
加载前：
加载后：
2）$.getJSON() 方法
.getScript() 方法的用法相同。
结构
$.getJSON( url , fn); //url:请求地址 //fn:回调函数
应用
新建一个 test.json 文件，代码如下：
{
"helen":{
"sex":"woman",
"age":18,
"weight":"50kg",
"height":"165cm"
},
"peter":{
"sex":"man",
"age":28,
"weight":"65kg",
"height":"185cm"
}
}新建一个 HTML 文件，代码如下：
<!-- $.getJSON() 方法 --> <button id="btn4">点击加载JSON文件</button> <div id="message2"></div>
当点击加载按钮时，页面上看不到任何效果，可以在控制台查看，代码如下：
// $.getJSON()方法
$("#btn4").click(function(){
$.getJSON("test.json", function(data){
console.log(data); //控制台输出返回的数据
})
})控制台输出如图：
以上虽然函数加载了 JSON 文件（test.json），但是并没有告知 JavaScript 对返回的数据如何处理，所以在回调函数里我们可以处理返回的数据。
通常我们需要遍历我们得到的数据，虽然这里我们可以使用传统的for循环，但是我们也可以通过 .each() 函数是以一个数组或者对象为第1个参数，以一个回调函数作为第2个参数，回调函数拥有两个参数，第1个为对象的成员或者数组的下标，第2个位对应变量或内容，代码如下：
// $.getJSON()方法
$("#btn4").click(function(){
$.getJSON("test.json", function(data){
console.log(data); //控制台输出返回的数据
// 对返回的数据做处理
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);
})
})效果如图：
加载前：
加载后：
【推荐学习：jQuery视频教程、web前端视频】
以上是聊聊jQuery中的Ajax，詳解其主要方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。
JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。
超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AMJavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。
使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。 首先，什麼是多租戶SaaS應用程序？ 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務
如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫
JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AMJavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。
JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AMJavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AMJavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
WebStorm Mac版
好用的JavaScript開發工具
Dreamweaver CS6
視覺化網頁開發工具
