SQLの窓

2018年02月05日


jQuery ajax テキスト取得テンプレート

サーバーのデータ呼び出しなら 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
posted by lightbox at 2018-02-05 14:10 | Ajax:jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり