サーバーのデータ呼び出しなら jQuery
今となっては、ajax という言葉が適当かどうかは解りませんが、その意味する所は『画面の書き換えを最低限の通信量で動的に際限無く行う為に、データをサーバー側に置いておいて必要な時に随時呼び出す』場合の処理の名前のように思います。
その方法の実体は、XMLHttpRequest ですが、ブラウザ毎の微妙な違いを考える以上に、記述が煩雑なので、ライブラリでかつ、とても簡単でリアルな jQuery で書く事が最短距離です。
※ dataType を json にして直接オブジェクトとして取得する事も一般的です
データをテキストとして取得する事が重要である場合は、dataType を text にします。省略すると、jQuery が応答の MIME で(推測して)決定します。
dataType を script にすると Google Chrome では読み込むと同時に実行される事になります。
( 例えば alert("OK") とかを読み込むと、メッセージボックスが表示される )
※ XMLHttpRequest
Mozilla : XMLHttpRequest
XDomainRequest object
(XDomainRequest object は以前 Microsoft のサイトでしたが、mozilla.org に統合されました)
ですが、いつも使っていないと書き方を忘れてしまうし、jQuery のバージョンアップも結構頻繁なので処理の確認をしたいばあいは Google がホストしているライブラリを使うのがいいと思います。
Google Hosted Libraries
この記事を初期投稿した 2013-02-14 当時は、$.ajax を使用していましたが、昨今は FormData オブジェクト を使用してデータを POST する事ができるようになり、POST と GET を区別するように、ここでは $.get を使用しています。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function ajax_test(query_string) {
$.get({
url: "https://lightbox.sakura.ne.jp/toolbox/data/names.json?"+query_string,
cache: false,
dataType : "text"
})
.done( function( result, textStatus, jqXHR ) {
console.dir( jqXHR );
console.log( textStatus ); // success
console.log( jqXHR.status ); // 通常 200
console.log( jqXHR.statusText ); // OK
var headers = jqXHR.getAllResponseHeaders();
console.dir( headers );
// 成功した結果 : jqXHR.responseText
console.log( result );
})
.fail(function( jqXHR, textStatus ) {
console.dir( jqXHR );
console.log( textStatus ); // error
});
}
</script>
<input type="button" value="jQyery.ajax" onclick='ajax_test("a=1");'>
cache オプション(false)によって、自動的に URL に文字列が追加されて、キャッシュからの取得にならないようになっています。 .done から繋げて .fail というような書き方が今は最新である事を jQuery のサイトで確認しましたが、それぞれ .success と .error から置き換えられています。( .complete は .always )Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead..done(function(data, textStatus, jqXHR){}) dataType を text に設定しているので、data は、サーバーより取得した文字列です。textStatus には 『success』がセットされます。jqXHR は、ネイティブの XMLHttpRequest の上位セットであり、全てのメソッドやプロパティを持ちます。 .fail(function(jqXHR, textStatus, errorThrown){})textStatus には、『error』がセットされます。jqXHR.status には例えば "404" がセットされて、その場合には jqXHR.statusText に "Not Found" がセットされます。通常、404 の場合でも、何らかのテキストが送られて来るので、それが欲しい場合は jqXHR.responseText で取得できます。現在の環境では、textStatus には、『error』がセットされますが、404 でも jqXHR.status には 0 がセットされています。 .then(成功処理, 失敗処理) ここでは使用していませんが、jQuery のドキュメントでは、『jqXHR.then(function( data, textStatus, jqXHR ) {}, function( jqXHR, textStatus, errorThrown ) {});』 と書かれています。 テストは、各ブラウザの開発者ツールで(F12 で開くはずです) 結果の表示は console.log と console.dir を使っているので、ブラウザで開いて確認して下さい。 ※ 初期投稿 : 2013-02-14
タグ：jquery
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
