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 方法主要用于更新資料，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/296370.html
標籤：JavaScript