jQuery - AJAX 簡(jiǎn)介與方法
jQuery -?AJAX 簡(jiǎn)介
什麼是 AJAX？
AJAX = 非同步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
簡(jiǎn)短地說(shuō)，在不重載整個(gè)網(wǎng)頁(yè)的情況下，AJAX 透過(guò)後臺(tái)載入數(shù)據(jù)，並在網(wǎng)頁(yè)上進(jìn)行顯示。
關(guān)於 jQuery 與 AJAX
jQuery 提供多個(gè)與 AJAX 相關(guān)的方法。
透過(guò) jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠(yuǎn)端伺服器上請(qǐng)求文字、HTML、XML 或 JSON - 同時(shí)您能夠?qū)⑦@些外部資料直接載入網(wǎng)頁(yè)的被選元素中。
如果沒(méi)有 jQuery，AJAX 程式設(shè)計(jì)還是有些難度的。
編寫(xiě)常規(guī)的 AJAX 程式碼並不容易，因?yàn)椴煌臑g覽器對(duì) AJAX 的實(shí)作並不相同。這意味著您必須編寫(xiě)額外的程式碼對(duì)瀏覽器進(jìn)行測(cè)試。不過(guò)，jQuery 團(tuán)隊(duì)為我們解決了這個(gè)難題，我們只需要一行簡(jiǎn)單的程式碼，就可以實(shí)作 AJAX 功能。
AJAX load() 方法
#jquery load()方法是jquery ajax中無(wú)刷新中的一個(gè)方法了，他可以實(shí)現(xiàn)直接載入頁(yè)面中的內(nèi)容放到指定ID中，也可以帶參數(shù)刷新頁(yè)面哦，下面我來(lái)跟大家介紹load()一些用法與常用見(jiàn)問(wèn)題。
語(yǔ)法:
$(selector).load(URL,data,callback);
必需的?URL?參數(shù)規(guī)定您希望載入的 URL。
可選的?data?參數(shù)規(guī)定與請(qǐng)求一同傳送的查詢(xún)字串鍵/值對(duì)集合。
可選的?callback?參數(shù)是 load() 方法完成後所執(zhí)行的函數(shù)名稱(chēng)。
範(fàn)例：
<!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>獲取外部?jī)?nèi)容</button>
</body>
</html>也可以把 jQuery 選擇器加入到 URL 參數(shù)。
下面的範(fàn)例把"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() 方法完成後所要允許的回呼函數(shù)?；睾艉瘮?shù)可以設(shè)定不同的參數(shù)：
responseTxt?- 包含呼叫成功時(shí)的結(jié)果內(nèi)容
statusTXT?- 包含呼叫的狀態(tài)xhr?- 包含
?XMLHttpRequest 物件.
?AJAX get() 和post() 方法
jQuery get() 和post() 方法用於透過(guò)HTTP GET 或POST 請(qǐng)求從伺服器請(qǐng)求數(shù)據(jù)。
HTTP 請(qǐng)求：GET vs. POST
兩種在客戶(hù)端和伺服器端進(jìn)行請(qǐng)求-回應(yīng)的常用方法是：GET 和 POST。
GET?- 從指定的資源請(qǐng)求資料POST?- 向指定的資源提交要處理的資料
GET 基本上用於從伺服器取得（取回）資料。註：GET 方法可能會(huì)傳回快取資料。
POST 也可用於從伺服器取得資料。不過(guò)，POST 方法不會(huì)快取數(shù)據(jù)，而且常用於連同請(qǐng)求一起發(fā)送數(shù)據(jù)。
jQuery $.get() 方法
$.get() 方法透過(guò) HTTP GET 請(qǐng)求從伺服器上請(qǐng)求資料。
語(yǔ)法：
$.get(URL,callback);
必要的?URL?參數(shù)規(guī)定您希望要求的 URL。
可選的?callback?參數(shù)是請(qǐng)求成功後執(zhí)行的函數(shù)名稱(chēng)。
<!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ā)送一個(gè) HTTP GET 請(qǐng)求并獲取返回結(jié)果</button>
</body>
</html>$.get() 的第一個(gè)參數(shù)是我們想要請(qǐng)求的 URL（"demo_test.php"）。
第二個(gè)參數(shù)是回呼函數(shù)。第一個(gè)回呼參數(shù)存有被請(qǐng)求頁(yè)面的內(nèi)容，第二個(gè)回呼參數(shù)存有請(qǐng)求的狀態(tài)。
提示：?這個(gè) PHP 檔案 ("demo_test.php") 類(lèi)似這樣：
<?php
echo '這是從PHP檔案讀取的資料。 ';
?>
jQuery $.post() 方法
$.post() 方法透過(guò)HTTP POST 請(qǐng)求從伺服器請(qǐng)求數(shù)據(jù)。
語(yǔ)法:
$.post(URL,data,callback);
必要的?URL?參數(shù)規(guī)定您希望要求的 URL。
可選的?data?參數(shù)規(guī)定連同請(qǐng)求發(fā)送的資料。
可選的?callback?參數(shù)是請(qǐng)求成功後執(zhí)行的函數(shù)名稱(chēng)。
下面的範(fàn)例使用$.post() 連同請(qǐng)求一起傳送資料：
<!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://m.miracleart.cn"
},
function(data,status){
alert("數(shù)據(jù): \n" + data + "\n狀態(tài): " + status);
});
});
});
</script>
</head>
<body>
<button>發(fā)送一個(gè) HTTP POST 請(qǐng)求頁(yè)面并獲取返回內(nèi)容</button>
</body>
</html>$.post() 的第一個(gè)參數(shù)是我們希望請(qǐng)求的URL ("demo_test_post.php" )。
然後我們連同請(qǐng)求（name 和 city）一起發(fā)送資料。
"demo_test_post.php" 中的 PHP 腳本讀取這些參數(shù)，對(duì)它們進(jìn)行處理，然後傳回結(jié)果。
第三個(gè)參數(shù)是回呼函數(shù)。第一個(gè)回呼參數(shù)存有被請(qǐng)求頁(yè)面的內(nèi)容，而第二個(gè)參數(shù)存有請(qǐng)求的狀態(tài)。
提示：?這個(gè) PHP 檔案 ("demo_test_post.php") 類(lèi)似這樣：
<?php $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : ''; $city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : ''; echo '網(wǎng)站名: ' . $name; echo "\n"; echo 'URL 地址: ' .$city; ?>
