聊聊jQuery中的Ajax，詳解其主要方法
- 青灯夜游轉載
- 2022-03-15 11:12:033029瀏覽
這篇文章帶大家了解一下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
相較於其他方法，最簡單且最常用，能載入遠端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>加载的内容:</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>评论</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中文網其他相關文章！