jQuery - AJAX 簡介和方法
jQuery - AJAX 簡介
什么是 AJAX？
AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
簡短地說，在不重載整個網(wǎng)頁的情況下，AJAX 通過后臺加載數(shù)據(jù)，并在網(wǎng)頁上進(jìn)行顯示。
關(guān)于 jQuery 與 AJAX
jQuery 提供多個與 AJAX 有關(guān)的方法。
通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠(yuǎn)程服務(wù)器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁的被選元素中。
如果沒有 jQuery，AJAX 編程還是有些難度的。
編寫常規(guī)的 AJAX 代碼并不容易，因為不同的瀏覽器對 AJAX 的實現(xiàn)并不相同。這意味著您必須編寫額外的代碼對瀏覽器進(jìn)行測試。不過，jQuery 團(tuán)隊為我們解決了這個難題，我們只需要一行簡單的代碼，就可以實現(xiàn) AJAX 功能。
AJAX load() 方法
jquery load()方法是jquery ajax中無刷新中的一個方法了，他可以實現(xiàn)直接加載頁面中的內(nèi)容放到指定ID中，也可以帶參數(shù)刷新頁面哦，下面我來給大家介紹load()一些用法與常用見問題。
語法:
$(selector).load(URL,data,callback);
必需的 URL 參數(shù)規(guī)定您希望加載的 URL。
可選的 data 參數(shù)規(guī)定與請求一同發(fā)送的查詢字符串鍵/值對集合。
可選的 callback 參數(shù)是 load() 方法完成后所執(zhí)行的函數(shù)名稱。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("");});
});
</script>
</head>
<body>
<div id="div1">
<h2>使用 jQuery AJAX 修改文本內(nèi)容</h2>
</div>
<button>獲取外部內(nèi)容</button>
</body>
</html>也可以把 jQuery 選擇器添加到 URL 參數(shù)。
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的內(nèi)容，加載到指定的 <div> 元素中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/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 參數(shù)規(guī)定當(dāng) load() 方法完成后所要允許的回調(diào)函數(shù)?；卣{(diào)函數(shù)可以設(shè)置不同的參數(shù)：
responseTxt - 包含調(diào)用成功時的結(jié)果內(nèi)容
statusTXT - 包含調(diào)用的狀態(tài)xhr - 包含
XMLHttpRequest 對象.
AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用于通過 HTTP GET 或 POST 請求從服務(wù)器請求數(shù)據(jù)。
HTTP 請求：GET vs. POST
兩種在客戶端和服務(wù)器端進(jìn)行請求-響應(yīng)的常用方法是：GET 和 POST。
GET - 從指定的資源請求數(shù)據(jù)POST - 向指定的資源提交要處理的數(shù)據(jù)
GET 基本上用于從服務(wù)器獲得（取回）數(shù)據(jù)。注釋：GET 方法可能返回緩存數(shù)據(jù)。
POST 也可用于從服務(wù)器獲取數(shù)據(jù)。不過，POST 方法不會緩存數(shù)據(jù)，并且常用于連同請求一起發(fā)送數(shù)據(jù)。
jQuery $.get() 方法
$.get() 方法通過 HTTP GET 請求從服務(wù)器上請求數(shù)據(jù)。
語法：
$.get(URL,callback);
必需的 URL 參數(shù)規(guī)定您希望請求的 URL。
可選的 callback 參數(shù)是請求成功后所執(zhí)行的函數(shù)名。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/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("數(shù)據(jù): " + data + "\n狀態(tài): " + status);
});
});
});
</script>
</head>
<body>
<button>發(fā)送一個 HTTP GET 請求并獲取返回結(jié)果</button>
</body>
</html>$.get() 的第一個參數(shù)是我們希望請求的 URL（"demo_test.php"）。
第二個參數(shù)是回調(diào)函數(shù)。第一個回調(diào)參數(shù)存有被請求頁面的內(nèi)容，第二個回調(diào)參數(shù)存有請求的狀態(tài)。
提示： 這個 PHP 文件 ("demo_test.php") 類似這樣：
<?php
echo '這是個從PHP文件中讀取的數(shù)據(jù)。';
?>
jQuery $.post() 方法
$.post() 方法通過 HTTP POST 請求從服務(wù)器上請求數(shù)據(jù)。
語法:
$.post(URL,data,callback);
必需的 URL 參數(shù)規(guī)定您希望請求的 URL。
可選的 data 參數(shù)規(guī)定連同請求發(fā)送的數(shù)據(jù)。
可選的 callback 參數(shù)是請求成功后所執(zhí)行的函數(shù)名。
下面的例子使用 $.post() 連同請求一起發(fā)送數(shù)據(jù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",{
name:"php中文網(wǎng)",
url:"http://ipnx.cn"
},
function(data,status){
alert("數(shù)據(jù): \n" + data + "\n狀態(tài): " + status);
});
});
});
</script>
</head>
<body>
<button>發(fā)送一個 HTTP POST 請求頁面并獲取返回內(nèi)容</button>
</body>
</html>$.post() 的第一個參數(shù)是我們希望請求的 URL ("demo_test_post.php")。
然后我們連同請求（name 和 city）一起發(fā)送數(shù)據(jù)。
"demo_test_post.php" 中的 PHP 腳本讀取這些參數(shù)，對它們進(jìn)行處理，然后返回結(jié)果。
第三個參數(shù)是回調(diào)函數(shù)。第一個回調(diào)參數(shù)存有被請求頁面的內(nèi)容，而第二個參數(shù)存有請求的狀態(tài)。
提示： 這個 PHP 文件 ("demo_test_post.php") 類似這樣：
<?php $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : ''; $city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : ''; echo '網(wǎng)站名: ' . $name; echo "\n"; echo 'URL 地址: ' .$city; ?>
