[jQuery] jQuery Ajax $.getJSON

クロスドメイン環境で Ajax 通信を行う。

JSONP

Load JSON-encoded data from the server using a GET HTTP request.

• jQuery.getJSON() | jQuery API Documentation

JavaScript逆引きレシピ jQuery対応

posted with amazlet at 16.07.06

山田 祥寛
翔泳社
売り上げランキング: 187,564

Amazon.co.jpで詳細を見る

See the Pen jQuery Ajax $.getJSON by DriftwoodJP (@DriftwoodJP) on CodePen.

• jQuery： 非同期通信で取得したコンテンツをページに反映させるには？（load） – Build Insider
• HTTP GET／POSTで非同期通信を実施するには？（$.get／$.post） – Build Insider
• jQuery： JSON形式のWeb APIにアクセスするには？（$.getJSON） – Build Insider
• jQuery： 非同期通信の開始／終了／成功／失敗のタイミングで処理を実行するには？（ajaxXxxxx） – Build Insider

キャッシュの回避

JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで

posted with amazlet at 16.09.05

山田 祥寛
技術評論社
売り上げランキング: 9,381

Amazon.co.jpで詳細を見る

非同期要求を行う際に if-Modified-Since ヘッダーを追加してキャッシュを回避する。

• XMLHttpRequest.setRequestHeader() – Web APIs | MDN

var d = new Date(1970, 0, 1);
req.setRequestHeader('If-Modified-Since', d.toGMTString());
req.send(null);

jQuery.ajax() 利用時には、cache パラメータを false とする。

• Ajax | jQuery API Documentation

$.ajax({
  url: 'json.php',
  type: 'GET',
  cache: false,
  :
});

$.ajax() 以外の場合、以下

$.ajaxSetup({ cache: false });

もしくは、以下とする。

$('*').ajaxSend(function(ev, xhr, opt) {
  xhr.setRequestHeader(
    'If-Modified-Since', new Date(1970, 0, 1).toGMTString());
});

この場合、$('*') は、すべての要素を指定している。

$('*').ajaxSend() は、指定された要素セット全体に対して関連づけられるイベント（イベントリスナ）を表していることから、 グローバルイベント とも呼ばれる。
グローバルイベントを利用することで、特定の要素セットすべてに対して適用すべき処理をまとめて定義できる。
例えば $(':button').ajaxStart( ... ) では、すべてのボタンに対して ajaxStart イベントリスナを登録できる。