觀察函數(shù)

ajaxStart 和 ajaxStop 函數(shù)可以用來(lái)作為觀察函數(shù)，我們可以使用觀察函數(shù)的回調(diào)函數(shù)來(lái)做相應(yīng)的處理。

當(dāng) Ajax 請(qǐng)求開(kāi)始且尚未進(jìn)行其他傳輸時(shí)，會(huì)觸發(fā) ajaxStart 的回調(diào)函數(shù)。
當(dāng)最后一次活動(dòng)請(qǐng)求終止時(shí)，則會(huì)執(zhí)行通過(guò) ajaxStop 注冊(cè)的回調(diào)函數(shù)。
由于觀察函數(shù)具備全局性，所以需要使用 $(document) 來(lái)調(diào)用。我們通過(guò)使用 Ajax 方法取得一個(gè)圖片的例子來(lái)測(cè)試兩個(gè)函數(shù):
當(dāng)前頁(yè)面為：

<div></div>
<button>load</button>

同目錄下的 test.html 內(nèi)容為：

<img src="avatar.jpg" />

點(diǎn)擊按鈕后希望載入圖像：

 $('button').click(function() {
  $('div').load('test.html');
 });

此時(shí)我們可以使用 ajaxStart 和 ajaxStop 函數(shù)來(lái)增加提示：

 $(document).ajaxStart(function() {//
  alert('load a picture');
 }).ajaxStop(function() {
  alert('show a picture');
 });
 $('button').click(function() {
  $('div').load('test.html');
 });

此時(shí)點(diǎn)擊按鈕后，再圖像載入前先提示 load a picture，載入后提示 show a picture。

錯(cuò)誤處理

最常用的方式是全局的 ajaxError 方法，以上例為例，如果我們像一個(gè)不存在的頁(yè)面發(fā)送數(shù)據(jù)請(qǐng)求：

 $(document).ajaxError(function() {//
  alert('load failed!');
 });
 $('button').click(function() {
  $('div').load('noexsited.html');
 });

此時(shí)點(diǎn)擊按鈕后：

對(duì)于非 load 方法，還可以使用 fail 方法來(lái)連綴處理：

 $('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 文件包裝在一對(duì)圓括號(hào)中，圓括號(hào)又前置一個(gè)任意字符串。這個(gè)字符串，即所謂的 P，由請(qǐng)求數(shù)據(jù)的客戶端來(lái)決定。
同樣是上例的按鈕，首先我們將外域頁(yè)面 otherdomain.com/index.php 內(nèi)容設(shè)置為：

<?php
$data = '{ "name": "stephenlee", "sex": "male" }';
echo $_GET['callback'] .'('. $data .')';

我們使用特殊的占位符 ? 來(lái)實(shí)現(xiàn)跨域獲取 JSON 數(shù)據(jù)：

 $('button').click(function() {
  $.getJSON('otherdomain.com/index.php?callback=?', function(data) {
   console.log(data);
  });
 });

數(shù)據(jù)獲取成功。

最新評(píng)論