原生 JS 與 jQuery 中的 AJAX
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:”//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 方法主要用於更新數據。
