jQuery学習メモ - Ajaxの操作(3) - 処理処理_jquery

観測機能

観測関数としてajaxStart関数とajaxStop関数を使用することができ、観測関数のコールバック関数を利用して対応する処理を行うことができます。

ajaxStart のコールバック関数は、Ajax リクエストが開始され、他の送信が行われていないときにトリガーされます。
最後のアクティブなリクエストが終了すると、ajaxStop を通じて登録されたコールバック関数が実行されます。
観察関数はグローバルであるため、$(document) を使用して呼び出す必要があります。 Ajax メソッドを使用して 2 つの関数をテストし、画像の例を取得します。 現在のページは:

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

同じディレクトリ内の test.html の内容は次のとおりです:

<img src="avatar.jpg" />

ボタンをクリックした後に画像をロードしたい:

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

この時点で、ajaxStart 関数と ajaxStop 関数を使用してプロンプトを追加できます。

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

この時点でボタンをクリックすると、画像をロードする前に画像のロードを促すメッセージが表示され、ロード後に画像が表示されます。

エラー処理

最も一般的に使用されるメソッドは、グローバル ajaxError メソッドです。例として、存在しないページにデータ リクエストを送信するとします。

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

この時点でボタンをクリックした後:

非ロードメソッドの場合、連結処理にfailメソッドを使用することもできます:

 $('button').click(function() {
  $.get('noexsited.html', function(data) {

  }).fail(function(jqXHR) {
   alert('status is ' + jqXHR.status);
  });
 });

JSONP

JSONP はパディング付きの JSON であり、3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを使用してドメイン間で Javascript ファイルを取得するため、JSON データをドメイン間で取得できます。

JSONP の形式は、標準の JSON ファイルを一組のかっこで囲み、その前に任意の文字列を付けます。 P と呼ばれるこの文字列は、データを要求するクライアントによって決定されます。

上の例と同じボタンで、まず外部ドメイン ページ otherdomain.com/index.php のコンテンツを次のように設定します:

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

JSON データのクロスドメイン取得を実現するには、特別なプレースホルダー ? を使用します。

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

データ取得に成功しました。