jQuery類庫新手使用指南之AJAX方法 - 第二部分
繼續昨天的AJAX方法，今天我們將介紹另外幾種常用AJAX請求方法：
使用$.post()方法來創建POST請求
和$.get() 方法類似，$.post()可以幫助你創建HTTP的POST請求。它的語法和$.get()方法非常類似，唯一的區別就在于POST使用HTTP POST方法來傳遞。如果你不清楚HTTP POST和GET的區別，簡單來說，GET傳遞過程中的參數會直接附在URL上，并且發送的參數數據長度有限制。而POST則沒有這些限制，比較典型的使 用，例如，如果你使用表單開發登錄窗口的話，最好使用POST，因為使用GET會泄露你的密碼。
$.post()的使用如下：
$.post( "http://gbin1.com/index.jsp", gbdata, myCallback, "json" );
在前一篇文章中的演示，我們也可以使用$.post()方法來實現，如下：
在上面我已經提到過，GET發送的數據長度有限制，所以，如果你需要發送很多的表單數據，$.post()方法就是你需要使用的方法。
使用load()方法來加載頁面
使用JQuery的load()方法可以很容易的從服務器取得HTML的標簽并且方便的插入當前的頁面。如果你只是想加載頁面內容到當前的頁面，那么load()就是你需要使用的AJAX方法。
$('#gbElement').load("http://www.gbin1.com/portfolio/lastest.html");
以上代碼中，我們將加載http://www.gbin1.com/portfolio/lastest.html頁面，并且將它的內容插入當前頁面的id=gbElement元素中。
是不是很簡單？同時load方法也支持參數，如下：
var gbdata={category:"jquery"};
$('#gbElement').load("http://www.gbin1.com/portfolio/lastest.html", gbdata);
以下是一個完整的load方法例子：
<html lang="en">
<head>
<title>Load GBin1 latest posts</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$( function() {
$('#load').click( function() {
var data = { category: "root" };
$('#latest').load( "http://www.gbin1.com/portfolio/lastest.html", data );
} );
} );
</script>
</head>
<body>
<button id="load">Load latest Post</button>
<div id="latest"></div>
</body>
</html>
以上代碼中，我們實現了如下功能：
- 頁面中包含了一個按鈕和div層，這個div層用來顯示加載的頁面標簽
- 當按鈕被點擊后，將會加載gbin1最近的文章
- 這里我們向url傳遞了參數category
- 最后jQuery生成一個AJAX請求。并且將返回的頁面內容插入id=”lastest"這個div中。
load方法同樣也包含一個callback方法，如果你需要加載后執行操作，你可以調用這個回調方法。
同時，load方法還允許你只加載一個頁面中的片段，也就是加載頁面中的一個部分，比如，只加載頁面中的id=“content“的div。那么你可以如下書寫代碼：
$('#gbElement').load("http://www.gbin1.com/portfolio/lastest.html #content");
使用這個方法的好處在于你不需要加載整個頁面，你可以只加載部分頁面內容，這樣不會打擾用戶閱讀，同時也方便你在當前頁面中顯示類似”加載中“的字樣兒，提示用戶正在加載頁面。
使用$.getJSON()來取得JSON數據
這個方法可以非常方便的幫助你從服務器請求JSON數據。相當于使用$.get()方法并且數據格式參數為"JSON"。
我們可以使用這個方法調用如下：
$('#showinfo').click( function() {
var data = { site: "GBin1.com", date: "20120318" };
$.getJSON( "siteinfo.txt", data, success );
} );
大家可以看到，這個例子中使用的方法和以下$.get()非常相似，除了不需要指定數據參數格式
$('#showinfo').click( function() {
var data = { site: "GBin1.com", date: "20120318" };
$.get( "siteinfo.txt", data, success, "json" );
} );
使用$.getScript()方法來取得和運行Javascript代碼
和$.getJSON()方法類似，$.getScript()是用來取得并且執行javascript腳本的簡便方法。它和$.get()方法中設置數據參數為script一樣。包含兩個參數：
- javascript的URL
- 一個可選的回調函數用來幫助你在加載完script后執行特定的功能
這個方法對于動態的加載javascript類庫非常有效，你可以在某些頁面中需要調用某些js，而其它頁面則不需要，通過調用這個方法，能夠幫助你減少請求服務器的加載文件的次數，有效提高頁面加載速度。
這里我們使用這個例子，我們將顯示網站信息的代碼封裝到一個js中，如下：
function showsite( siteData ) {
var result = "<li>Site Name:" + siteData.site + "</li>";
result += "<li>Creation Date:" + siteData.date + "</li>";
result += "<li>Site tag: " + siteData.tag + "</li>";
result += "<li>Site pages: " + siteData.pages + "</li>";
$("#result").html(result);
}
然后我們修改showSiteInfo.html，通過$.getScripts()來調用，如下：
<!doctype html>
<html lang="en">
<head>
<title>Site Info Demo for jQuery $.get()</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
#container{
padding: 100px;
font-size: 12px;
font-family: arial;
}
#result{
padding: 10px 0;
}
#result li{
padding: 10px 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$( function() {
$.getScript( "showsite.js", function() {
$('#showinfo').click( function() {
var data = { site: "GBin1.com", date: "20120318" };
$.get( "siteinfo.txt", data, showsite, "json" );
} );
} );
} );
</script>
</head>
<body>
<div id="container">
<button id="showinfo">show info</button>
<ul id="result"></ul>
</body>
</div>
</html>
以上代碼中，我們首先調用$.getScript()方法來加載和運行showsite.js，然后在get方法中調用這個回調函數。通過這個方法來將內容顯示到對應的元素中。
注意$.getScript()方法添加了一個隨機的時間戳參數到字符串查詢中，例如：?_=1330395371668來防止瀏覽器緩存javascript。
浙公網安備 33010602011771號