jQuery學(xué)習(xí)筆記之 Ajax操作篇(三) - 過程處理
觀察函數(shù)
ajaxStart 和 ajaxStop 函數(shù)可以用來作為觀察函數(shù),我們可以使用觀察函數(shù)的回調(diào)函數(shù)來做相應(yīng)的處理。
當(dāng) Ajax 請求開始且尚未進(jìn)行其他傳輸時,會觸發(fā) ajaxStart 的回調(diào)函數(shù)。
當(dāng)最后一次活動請求終止時,則會執(zhí)行通過 ajaxStop 注冊的回調(diào)函數(shù)。
由于觀察函數(shù)具備全局性,所以需要使用 $(document) 來調(diào)用。我們通過使用 Ajax 方法取得一個圖片的例子來測試兩個函數(shù):
當(dāng)前頁面為:
<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> 標(biāo)簽可以跨域獲取 Javascript 文件的思路,故可以跨域獲取 JSON 數(shù)據(jù)。
JSONP 的格式是把標(biāo)準(zhǔn) JSON 文件包裝在一對圓括號中,圓括號又前置一個任意字符串。這個字符串,即所謂的 P,由請求數(shù)據(jù)的客戶端來決定。
同樣是上例的按鈕,首先我們將外域頁面 otherdomain.com/index.php 內(nèi)容設(shè)置為:
<?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ù)獲取成功。
- 揭開AJAX神秘的面紗(AJAX個人學(xué)習(xí)筆記)
- AJax 學(xué)習(xí)筆記二(onreadystatechange的作用)
- JavaScript高級程序設(shè)計 XML、Ajax 學(xué)習(xí)筆記
- jquery中ajax學(xué)習(xí)筆記一
- jquery ajax學(xué)習(xí)筆記2 使用XMLHttpRequest對象的responseXML
- jquery中ajax學(xué)習(xí)筆記3
- jquery中ajax學(xué)習(xí)筆記4
- jQuery學(xué)習(xí)筆記之 Ajax操作篇(一) - 數(shù)據(jù)加載
- jQuery學(xué)習(xí)筆記之 Ajax操作篇(二) - 數(shù)據(jù)傳遞
- Ajax學(xué)習(xí)筆記整理
相關(guān)文章
jQuery EasyUI API 中文文檔 - ValidateBox驗證框
jQuery EasyUI API 中文文檔 - ValidateBox驗證框,使用jQuery EasyUI的朋友可以參考下。2011-10-10
EasyUI Datebox 日期驗證之開始日期小于結(jié)束時間
這篇文章主要介紹了EasyUI Datebox 日期驗證之開始日期小于結(jié)束時間,需要的朋友可以參考下2017-05-05
JQuery通過AJAX從后臺獲取信息顯示在表格上并支持行選中
這篇文章主要介紹了JQuery通過AJAX從后臺獲取信息顯示在表格上并支持行選中的相關(guān)資料,需要的朋友可以參考下2015-09-09
jquery輸入數(shù)字隨機(jī)抽獎特效的簡單實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query輸入數(shù)字隨機(jī)抽獎特效的簡單實現(xiàn)代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-06-06

