AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和 XML）。
AJAX 最大的優點是在不重新載入整個頁面的情況下，可以與伺服器交換資料並更新部分網頁內容。運用 XMLHttpRequest 或新的 Fetch API 與網頁伺服器進行非同步資料交換；AJAX 是一種用於建立快速動態網頁的技術。
AJAX是基於現有的Internet標準，並且聯合使用它們：
XMLHttpRequest 物件 (非同步的與伺服器交換資料)；
JavaScript/DOM (資訊顯示/互動)；
CSS (給資料定義樣式)；
XML (作為轉換資料的格式)。
AJAX應用程式與瀏覽器和平臺無關的。
一、AJAX 工作原理
XMLHttpRequest 是 AJAX 的基礎。XMLHttpRequest 用於在後臺與伺服器交換資料。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。
二、原生 JS 中的 AJAX
1、建立 XMLHttpRequest 物件
為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支援 XMLHttpRequest 物件。如果支援，則建立 XMLHttpRequest 物件。如果不支援，則建立 ActiveXObject ：
var xmlhttp;
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼
xmlhttp=new XMLHttpRequest();
}
else {
// IE6, IE5 瀏覽器執行程式碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2、AJAX - 向伺服器傳送請求
如需將請求傳送到伺服器，我們使用XMLHttpRequest物件的open()和send()方法：
open(method,url,async)
規定請求的型別、URL 以及是否非同步處理請求。
- method：請求的型別；GET 或 POST
- url：檔案在伺服器上的位置
- async：true（非同步）或 false（同步）
send(string)
將請求傳送到伺服器。
string：僅用於 POST 請求
3、GET 還是 POST？
與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。然而，在以下情況中，請使用 POST 請求：
- 無法使用快取檔案（更新伺服器上的檔案或資料庫）
- 向伺服器傳送大量資料（POST 沒有資料量限制）
- 傳送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠
(1）GET 請求
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();//如果希望通過 GET 方法傳送資訊，請向 URL 新增資訊。
(2) POST 請求
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
如果需要像 HTML 表單那樣 POST 資料，要使用 setRequestHeader() 來新增 HTTP 頭,然後在 send() 方法中規定您希望傳送的資料：
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
setRequestHeader(header,value)：向請求新增 HTTP 頭。
- header: 規定頭的名稱
- value: 規定頭的值
open() 方法的url引數是伺服器上檔案的地址。該檔案可以是任何型別的檔案，比如 .txt 和 .xml，或者伺服器指令碼檔案，比如 .asp 和 .php （在傳回響應之前，能夠在伺服器上執行任務）。
4、非同步 - True 或 False？
XMLHttpRequest 物件如果要用於 AJAX 的話，其 open() 方法的 async 引數必須設定為 true。
(1) Async=true
當使用 async=true 時，請規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函式：
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
(2) Async = false
如需使用 async=false，請將 open() 方法中的第三個引數改為 false,不推薦使用 async=false，但是對於一些小型的請求，也是可以的。JavaScript 會等到伺服器響應就緒才繼續執行。如果伺服器繁忙或緩慢，應用程式會掛起或停止。
注意：當使用 async=false 時，不要編寫 onreadystatechange 函式,把程式碼放到 send() 語句後面即可
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
5、AJAX - 伺服器響應
如需獲得來自伺服器的響應，請使用 XMLHttpRequest 物件的 responseText 或 responseXML 屬性。
|
responseText |
獲得字串形式的響應資料。 |
|
responseXML |
獲得 XML 形式的響應資料。 |
如果來自伺服器的響應是 XML，而且需要作為 XML 物件進行解析，請使用 responseXML 屬性。
6、onreadystatechange 事件
每當 readyState 改變時，就會觸發 onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態資訊。
在 onreadystatechange 事件中，我們規定當伺服器響應已做好被處理的準備時所執行的任務。
當 readyState 等於 4 且狀態為 200 時，表示響應已就緒：
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
注意：onreadystatechange 事件被觸發 4 次（0 - 4）, 分別是： 0-1、1-2、2-3、3-4，對應著 readyState 的每個變化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執行程式碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改該文字內容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改內容</button>
</body>
</html>
三、jQuery 中的 AJAX
通過 jQuery AJAX 方法，能夠使用 HTTP Get 和 HTTP Post 從遠端伺服器上請求文字、HTML、XML 或 JSON - 同時能夠把這些外部資料直接載入網頁的被選元素中。
1、jQuery load() 方法
load() 方法從伺服器載入資料，並把返回的資料放入被選元素中。
語法:
$(selector).load(URL,data,callback);
必需的URL引數規定希望載入的 URL。
可選的data引數規定與請求一同傳送的查詢字串鍵/值對集合。
可選的callback引數是 load() 方法完成後所執行的函式名稱。
也可以把 jQuery 選擇器新增到 URL 引數。
eg $("#div1").load("demo_test.txt #p1");
可選的 callback 引數規定當 load() 方法完成後所要允許的回撥函式。回撥函式可以設定不同的引數：
- responseTxt- 包含呼叫成功時的結果內容
- statusTXT- 包含呼叫的狀態
- xhr- 包含 XMLHttpRequest 物件
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部內容載入成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
2、jQuery $.get() 方法
$.get() 方法通過 HTTP GET 請求從伺服器上請求資料。
語法：
$.get(URL,callback);
必需的URL引數規定希望請求的 URL。
可選的callback引數是請求成功後所執行的函式名。
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("資料: " + data + "\n狀態: " + status);
});
});
第二個引數是回撥函式。第一個回撥引數存有被請求頁面的內容，第二個回撥引數存有請求的狀態。
3、jQuery $.post() 方法
$.post() 方法通過 HTTP POST 請求向伺服器提交資料。
語法:
$.post(URL,data,callback);
必需的URL引數規定您希望請求的 URL。
可選的data引數規定連同請求傳送的資料。
可選的callback引數是請求成功後所執行的函式名。
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鳥教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("資料: \n" + data + "\n狀態: " + status);
});
});
4、GET 和 POST 方法的區別：
1、傳送的資料數量
在 GET 中，只能傳送有限數量的資料，因為資料是在 URL 中傳送的。
在 POST 中，可以傳送大量的資料，因為資料是在正文主體中傳送的。
2、安全性
GET 方法傳送的資料不受保護，因為資料在 URL 欄中公開，這增加了漏洞和黑客攻擊的風險。
POST 方法傳送的資料是安全的，因為資料未在 URL 欄中公開，還可以在其中使用多種編碼技術，這使其具有彈性。
3、加入書籤中
GET 查詢的結果可以加入書籤中，因為它以 URL 的形式存在；而 POST 查詢的結果無法加入書籤中。
4、編碼
在表單中使用 GET 方法時，資料型別中只接受 ASCII 字元。
在表單提交時，POST 方法不繫結表單資料型別，並允許二進位制和 ASCII 字元。
5、可變大小
GET 方法中的可變大小約為 2000 個字元。
POST 方法最多允許 8 Mb 的可變大小。
6、快取
GET 方法的資料是可快取的，而 POST 方法的資料是無法快取的。
7、主要作用
GET 方法主要用於獲取資訊。而 POST 方法主要用於更新資料。