系統學習 jQuery (五) AJAX

AJAX 簡單來說就是通過 http 請求加載遠程數據。jQuery 提供了方便統一的 AJAX API 以解決瀏覽器兼容問題。

常用 ajax 函數

$.ajax(url, [setting]) jQuery 底層 ajax 函數,通過 setting 可以靈活地配置 ajax 請求和回調。但多數情況下都不需要使用這個方法一項項配置,可以用 jQuery 提供地輔助函數完成常見任務。
load(url, [data], [cb]) 加載遠程數據並添加到節點中,url 是請求地址,默認發送 GET 請求,若設置了請求參數 data 則發送 POST 請求。
$.get(url, [data], [cb], [type]) 發送 GET 請求,url 是請求地址,data 是附加參數,可以是 url 參數字符串也可以是對象,type 描述返回內容的格式可以是 xml, html, script, json, text, _default,cb 請求成功後的回調函數,加載的數據通過參數傳給 cb。例如 $.get('getData.php', {id:1}, function(data){console.log(data)})
$.getJSON(url, [data], [cb]) 發 GET 獲得一個 JSON 數據。
$.getScript(url, [cb]) 發 GET 請求來加入一個 javascript。
$.post(url, [data], [cb], [type]) 與 $.get 類似,只是發 POST 請求。
ajaxStart(cb) 註冊一個全局的 ajax 開始回調,即任何 ajax 請求開始時都會調用這個函數(注意 jQuery1.8 全局 ajax 回調只能作用在 document 對象上)。
ajaxComplete(cb) 註冊一個全局的 ajax 完成回調,即任何 ajax 請求完成都會調用這個回調(注意 jQuery1.8 全局 ajax 回調只能作用在 document 對象上)。
例如想在任何 ajax 加載時都顯示一個 loading 動畫 可以寫 $(document).ajaxStart(function() {playLoadingAnima();}).ajaxComplete(function() {stopLoadingAnima();})
$.ajaxSetup(options) 設置 ajax 請求的默認設置。即修改 $.ajax 函數設置的默認值。
例如想在所有 ajax 請求頭上都加上 token 信息可以調用 $.ajaxSetup({headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
serialize(form) 將表單序列化爲字符串,即 url 參數形式,例如 name1=val1&name2=val2。
serializeArray(form) 將表單序列化爲數組,數組每一項都是 {name: '', value: ''} 形式的對象。例如 [{name: 'name1', value: 'value1'}, {name: 'name2', value: 'value2'}]
例如想通過 ajax 以 POST 方式提交一個表單可以寫:$.post('form.php', $('#form').serialize());

延遲對象

$.ajax $.get 等發送 ajax 請求的函數都會返回一個延遲對象,除了在發送請求時設置回調函數外也可以通過延遲對象來設置回調函數。
def.done(cb) 添加延遲成功時的回調
def.fail(cb) 添加延遲失敗時的回調
def.progress(cb) 添加延遲進度時的回調
def.always(cb) 添加延遲完成時的回調(不管成功或失敗都調用)
例如爲 get 請求添加成功回調也可以寫 $.get('getData.php').done(function(data) {console.log(data);}); 
延遲對象是對延遲完成的任務的一種抽象,除了用於 ajax 請求外也可以用來表達任何需要延遲完成的任務,例如本地測試時可以構造一個延遲對象來模擬網絡請求,通過 setTimeout 來讓它在一段時間後完成。
jQuery 提供了一個工具函數 $.when(def1, def2, ...) 來將多個延遲對象結合成一個延遲對象,這樣方便我們等待多個 ajax 請求加載完成後再執行回調。
例如 $.when($.get('getData1.php'), $.get('getData2.php'), $.get('getData3.php')).done(function(args1, args2, args3) {console.log('三個請求都加載完了')});

延遲對象和 AJAX 的更多用法請參考 jQuery API http://jquery.cuishifeng.cn/deferred.done.html


示例:AJAX 異步提交表單

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../lib/jquery-1.11.2/jquery.js"></script>
</head>
<body>
<form id="form" action="javascript: submit();" method="GET">
<p><input name="name1" type="text"></p>
<p><input name="name2" type="text"></p>
<p><input type="submit"></p>
</form>
<div id="content"></div>
<script>
function submit() {
	$.post('form.php', $('#form').serialize(), function(data) {
		$('#content').html(data);
	})
}
</script>
</body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章