一.AJAX 簡介
AJAX 是與服務器交換數據的技術，它在不重載全部頁面的情況下，實現了對部分網頁的更新。
1.什麼是 AJAX
AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
簡短地說，在不重載整個網頁的情況下，AJAX 通過後臺加載數據，並在網頁上進行顯示。
2.關於 jQuery 與 AJAX
jQuery 提供多個與 AJAX 有關的方法。
通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部數據直接載入網頁的被選元素中。
如果沒有 jQuery，AJAX 編程還是有些難度的。 編寫常規的 AJAX 代碼並不容易，因爲不同的瀏覽器對 AJAX
的實現並不相同。這意味着您必須編寫額外的代碼對瀏覽器進行測試。不過，jQuery
團隊爲我們解決了這個難題，我們只需要一行簡單的代碼，就可以實現 AJAX 功能。
二.AJAX load() 方法
1.jQuery load() 方法
jQuery load() 方法是簡單但強大的 AJAX 方法。
load() 方法從服務器加載數據，並把返回的數據放入被選元素中。
語法:
$(selector).load(URL,data,callback);
必需的 URL 參數規定您希望加載的 URL。
可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。
可選的 callback 參數是 load() 方法完成後所執行的函數名稱。
這是示例文件（“demo_test.txt”）的內容：
<h2>jQuery AJAX 是個非常棒的功能！</h2>
<p id="p1">這是段落的一些文本。</p>
下面的例子會把文件 “demo_test.txt” 的內容加載到指定的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本內容</h2></div>
<button>獲取外部內容</button>
</body>
</html>
也可以把 jQuery 選擇器添加到 URL 參數。
下面的例子把 “demo_test.txt” 文件中 id=“p1” 的元素的內容，加載到指定的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt #p1");
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改文本</h2></div>
<button>獲取外部文本</button>
</body>
</html>
可選的 callback 參數規定當 load() 方法完成後所要允許的回調函數。回調函數可以設置不同的參數：
responseTxt - 包含調用成功時的結果內容
statusTXT - 包含調用的狀態
xhr - 包含 XMLHttpRequest 對象
下面的例子會在 load() 方法完成後顯示一個提示框。如果 load() 方法已成功，則顯示"外部內容加載成功！"，而如果失敗，則顯示錯誤消息：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部內容加載成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
</script>
</head>
<body>
<div id="div1"><h2>使用 jQuery AJAX 修改該文本</h2></div>
<button>獲取外部內容</button>
</body>
</html>
三.AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用於通過 HTTP GET 或 POST 請求從服務器請求數據。
1.HTTP 請求：GET vs. POST
兩種在客戶端和服務器端進行請求-響應的常用方法是：GET 和 POST。
GET - 從指定的資源請求數據
POST - 向指定的資源提交要處理的數據
GET 基本上用於從服務器獲得（取回）數據。註釋：GET 方法可能返回緩存數據。
POST 也可用於從服務器獲取數據。不過，POST 方法不會緩存數據，並且常用於連同請求一起發送數據。
2.jQuery $.get() 方法
$.get() 方法通過 HTTP GET 請求從服務器上請求數據。
語法：
$.get(URL,callback);
必需的 URL 參數規定您希望請求的 URL。
可選的 callback 參數是請求成功後所執行的函數名。
下面的例子使用 $.get() 方法從服務器上的一個文件中取回數據：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/try/ajax/demo_test.php",function(data,status){
alert("數據: " + data + "\n狀態: " + status);
});
});
});
</script>
</head>
<body>
<button>發送一個 HTTP GET 請求並獲取返回結果</button>
</body>
</html>
$.get() 的第一個參數是我們希望請求的 URL（“demo_test.php”）。
第二個參數是回調函數。第一個回調參數存有被請求頁面的內容，第二個回調參數存有請求的狀態。
提示： 這個 PHP 文件 (“demo_test.php”) 類似這樣：
demo_test.php 文件代碼:
<?php
echo '這是個從PHP文件中讀取的數據。';
?>
3.jQuery $.post() 方法
$.post() 方法通過 HTTP POST 請求向服務器提交數據。
語法:
$.post(URL,data,callback);
必需的 URL 參數規定您希望請求的 URL。
可選的 data 參數規定連同請求發送的數據。
可選的 callback 參數是請求成功後所執行的函數名。
下面的例子使用 $.post() 連同請求一起發送數據：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",{
name:"菜鳥教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("數據: \n" + data + "\n狀態: " + status);
});
});
});
</script>
</head>
<body>
<button>發送一個 HTTP POST 請求頁面並獲取返回內容</button>
</body>
</html>
$.post() 的第一個參數是我們希望請求的 URL (“demo_test_post.php”)。
然後我們連同請求（name 和 url）一起發送數據。
“demo_test_post.php” 中的 PHP 腳本讀取這些參數，對它們進行處理，然後返回結果。
第三個參數是回調函數。第一個回調參數存有被請求頁面的內容，而第二個參數存有請求的狀態。
提示： 這個 PHP 文件 (“demo_test_post.php”) 類似這樣：
demo_test_post.php 文件代碼:
<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '網站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$url;
?>