PC | mobile ver.20170108.

 libro ~入門ドキュメント・サイト~

初心者のためのjQueryプログラミング入門:

Ajaxによる非同期通信 (1/5)

作成:2010-04-14 09:21
更新:2010-05-12 08:07
■「load」で一発ロード!
現在、JavaScriptでもっとも重要な機能は何か?といえば、「Ajax」と多くの人が答えるでしょう。Ajax(JavaScript + XMLによる非同期通信)は、ページを移動することなくサーバーへ必要に応じて接続しデータを取得する手法として広く使われています。が、このAjaxという機能、非常に便利ではあるけれど問題もあります。

1.互換性の問題。Ajaxの機能を提供するオブジェクトが、Webブラウザによって微妙に違いがあります。はっきりいえば、IEのやろう……いえ、IEの旧バージョンがActiveXを使った特殊なアプローチを取っていたためです。「IEの最新版しか対応しない!」と割りきってしまえばいいのですが、まだIE6がかなり使われている現状では、ある程度、古いバージョンの対応も考えなければいけないでしょう。

2.コーディングの面倒さ。「非同期通信」というのは、通信を開始したらしっぱなし、もうすぐに次の処理に進んでしまう、後は全部すんだらまた呼んでね――といったやり方です。普通に「実行する処理を順番に書くだけ」とは違います。まぁ、何度か書いて慣れてしまえばさして面倒でもないんですが、初めての人はとっつきにくいでしょう。

3.複雑なデータの取得が面倒。Ajaxというからには、XMLのデータなどももちろん扱えますが、しかし受け取った側のJavaScriptで、XMLの内容を解析処理する方法、わかります?「えっ? どうやるんだろうな?」という人が大半じゃないでしょうか。といって、プレーンなテキストで複雑なデータを送って、受け取ってからデータを分析するのもまた大変です。

こうしたことを乗り越えて、「Ajax、自由自在に使えます」となるまでには、けっこうな道程があります。こういう面倒くさいことこそ、ライブラリの出番です。jQueryに用意されている機能を使えば、Ajaxも実にシンプルに使うことができます。

まず、もっともシンプルな使い方、「サーバーからテキストデータを受け取って指定のエレメントに表示する」ということをやってみましょう。以下に簡単なサンプルコードをあげておきましょう。Webページと同じ場所に「data.txt」というテキストファイルを用意しておいてください。ボタンを押すと、サーバーからこのファイルの中身を受け取って、<div>タグに表示します。――ここでのAjax処理は、doActionにあるわずか1行の文だけです。
$('#message').load('data.txt');
たったこれだけ! これで、サーバーにアクセスしてdata.txtの内容を送ってもらい、それを<div id="message">タグのinnerHTMLに設定する――という一連の作業をすべてやってくれるのです。

jQueryオブジェクトに用意されている「load」は、引数に指定したアドレスにアクセスしてデータを受け取り、それをこのjQueryオブジェクトのエレメントに表示する、ということを行います。とりあえずloadだけ覚えておけば、今すぐにでもAjaxが使えるようになるのです。


 

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

<html>
	<head>
		<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
		<script src="jquery-1.4.2.min.js"></script>
		<script type="text/javascript">
		<!--
		function doAction(){
			$('#message').load('data.txt');
		}
		//-->
		</script>
	</head>
	<body>
		<H1>TEST.</H1>
		<div class="msg" id="message">テキストをここに表示します。</div>
		<input type="button" value="click" onclick="doAction();">
	</body>
</html>



 


「初心者のためのjQueryプログラミング入門」に戻る



※その他のコンテンツ