AJAX是與服務(wù)器交換數(shù)據(jù)的技術(shù)，能讓我們?cè)诓恢匦录虞d整個(gè)網(wǎng)頁(yè)的情況下，實(shí)現(xiàn)對(duì)部分網(wǎng)頁(yè)的更新。
AJAX = 異步 JavaScript 和 XML (Asynchronous JavaScript and XML)。
編寫常規(guī)的AJAX比較繁瑣，需要針對(duì)不同瀏覽器進(jìn)行測(cè)試，jQuery提供了多個(gè)與AJAX有關(guān)的方法，讓我們可以通過簡(jiǎn)單的幾行代碼實(shí)現(xiàn)AJAX功能。
jQuery load()方法
load()方法從服務(wù)器加載數(shù)據(jù)，并將返回的數(shù)據(jù)放入指定的元素中。
語法
$(selector).load(URL,data,callback);
參數(shù)說明
URL:必須參數(shù)，指定需要加載的URL。
data:可選參數(shù)，與請(qǐng)求一同發(fā)送的查詢字符串鍵值對(duì)集合。
callback:可選參數(shù)，load()方法完成后執(zhí)行的函數(shù)名稱。
示例
在load()方法完成后彈出一個(gè)提示框，load()方法成功，顯示“我不內(nèi)容加載成功”，失敗，則顯示錯(cuò)誤提示。
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部?jī)?nèi)容加載成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
動(dòng)手試一試：在線練習(xí)
jQuery get()和post()方法
jQuery通過get()和post()方法通過GET或POST請(qǐng)求從服務(wù)器請(qǐng)求數(shù)據(jù)。
get()語法
通過GET請(qǐng)求從服務(wù)器請(qǐng)求數(shù)據(jù):$.get(URL,callback);
URL:必選參數(shù)，指定請(qǐng)求的URL。
callback:可選參數(shù)，請(qǐng)求成功后執(zhí)行的函數(shù)名。
示例
$("button").click(function(){
$.get("demo_test.php",function(data,status){
//data回調(diào)參數(shù)存有被請(qǐng)求頁(yè)面的內(nèi)容，status回調(diào)參數(shù)存有請(qǐng)求的狀態(tài)。
alert("數(shù)據(jù): " + data + "\n狀態(tài): " + status);
});
});
附上demo_test.php 文件代碼:
<?php
echo '這是個(gè)從PHP文件中讀取的數(shù)據(jù)。';
?>
動(dòng)手試一試：在線練習(xí)
post()語法
通過POST請(qǐng)求從服務(wù)器請(qǐng)求輸出:$.post(URL,data,callback);
URL:必選參數(shù)，指定請(qǐng)求的URL。
data:可選參數(shù)，連同請(qǐng)求發(fā)送的數(shù)據(jù)。
callback:可選參數(shù)，請(qǐng)求成功后執(zhí)行的函數(shù)名。
示例
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鳥教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("數(shù)據(jù): \n" + data + "\n狀態(tài): " + status);
});
});
$.post()的第一個(gè)參數(shù)，請(qǐng)求的URL("demo_test_post.php")。
第二個(gè)參數(shù)，連同請(qǐng)求一起發(fā)送的name和url。
第三個(gè)參數(shù)，回調(diào)函數(shù)，兩個(gè)回調(diào)參數(shù)，date存有被請(qǐng)求頁(yè)面內(nèi)容，status存有請(qǐng)求狀態(tài)。
附上demo_test_post.php 文件代碼:
<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '網(wǎng)站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$url;
?>
動(dòng)手試一試：在線練習(xí)
