jQuery學習筆記之 Ajax操作篇(三) - 過程處理
觀察函數(shù)
ajaxStart 和 ajaxStop 函數(shù)可以用來作為觀察函數(shù),我們可以使用觀察函數(shù)的回調函數(shù)來做相應的處理。
當 Ajax 請求開始且尚未進行其他傳輸時,會觸發(fā) ajaxStart 的回調函數(shù)。
當最后一次活動請求終止時,則會執(zhí)行通過 ajaxStop 注冊的回調函數(shù)。
由于觀察函數(shù)具備全局性,所以需要使用 $(document) 來調用。我們通過使用 Ajax 方法取得一個圖片的例子來測試兩個函數(shù):
當前頁面為:
<div></div> <button>load</button>
同目錄下的 test.html 內(nèi)容為:
<img src="avatar.jpg" />
點擊按鈕后希望載入圖像:
$('button').click(function() { $('div').load('test.html'); });
此時我們可以使用 ajaxStart 和 ajaxStop 函數(shù)來增加提示:
$(document).ajaxStart(function() {// alert('load a picture'); }).ajaxStop(function() { alert('show a picture'); }); $('button').click(function() { $('div').load('test.html'); });
此時點擊按鈕后,再圖像載入前先提示 load a picture,載入后提示 show a picture。
錯誤處理
最常用的方式是全局的 ajaxError 方法,以上例為例,如果我們像一個不存在的頁面發(fā)送數(shù)據(jù)請求:
$(document).ajaxError(function() {// alert('load failed!'); }); $('button').click(function() { $('div').load('noexsited.html'); });
此時點擊按鈕后:
對于非 load 方法,還可以使用 fail 方法來連綴處理:
$('button').click(function() { $.get('noexsited.html', function(data) { }).fail(function(jqXHR) { alert('status is ' + jqXHR.status); }); });
JSONP
JSONP 即 JSON with padding,填充式 JSON,利用的是 <script> 標簽可以跨域獲取 Javascript 文件的思路,故可以跨域獲取 JSON 數(shù)據(jù)。
JSONP 的格式是把標準 JSON 文件包裝在一對圓括號中,圓括號又前置一個任意字符串。這個字符串,即所謂的 P,由請求數(shù)據(jù)的客戶端來決定。
同樣是上例的按鈕,首先我們將外域頁面 otherdomain.com/index.php 內(nèi)容設置為:
<?php $data = '{ "name": "stephenlee", "sex": "male" }'; echo $_GET['callback'] .'('. $data .')';
我們使用特殊的占位符 ? 來實現(xiàn)跨域獲取 JSON 數(shù)據(jù):
$('button').click(function() { $.getJSON('otherdomain.com/index.php?callback=?', function(data) { console.log(data); }); });
數(shù)據(jù)獲取成功。
相關文章
關于jQuery對象數(shù)據(jù)緩存Cache原理以及jQuery.data詳解
網(wǎng)上有很多教你怎么使用jQuery.data(..)來實現(xiàn)數(shù)據(jù)緩存,但有兩個用戶經(jīng)常使用的data([key],[value])和jQuery.data(element,[key],[value])幾乎沒有什么文章說清楚它們兩的區(qū)別,所以我用到了,研究下分享給大家。2013-04-04jquery text(),val(),html()方法區(qū)別總結
jquery text(),val(),html()方法區(qū)別總結。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11jQuery圖片切換插件jquery.cycle.js使用示例
Cycle供了非常好的功能來幫助大家更簡單的使用插件的幻燈功能,下面是它的一個非常不錯的示例,大家可以學習下2014-06-06在jQuery1.5中使用deferred對象 著放大鏡看Promise
在那篇經(jīng)典的關于jQuery1.5中Deferred使用方法介紹的文章中(譯文見這里),有下面一段描述2011-03-03jQuery setTimeout()函數(shù)使用方法
setTimeout在以前的js中是定時執(zhí)行一個對象或函數(shù),下面我來介紹jquery中的setTimeout函數(shù)使用方法有需要了解的朋友仔細的參考參考2013-04-04