Ajaxによる非同期通信 (1/5)
作成:2010-04-14 09:21
更新:2010-05-12 08:07
更新:2010-05-12 08:07
■「load」で一発ロード！
現在、JavaScriptでもっとも重要な機能は何か？といえば、「Ajax」と多くの人が答えるでしょう。Ajax（JavaScript + XMLによる非同期通信）は、ページを移動することなくサーバーへ必要に応じて接続しデータを取得する手法として広く使われています。が、このAjaxという機能、非常に便利ではあるけれど問題もあります。
１．互換性の問題。Ajaxの機能を提供するオブジェクトが、Webブラウザによって微妙に違いがあります。はっきりいえば、IEのやろう……いえ、IEの旧バージョンがActiveXを使った特殊なアプローチを取っていたためです。「IEの最新版しか対応しない！」と割りきってしまえばいいのですが、まだIE6がかなり使われている現状では、ある程度、古いバージョンの対応も考えなければいけないでしょう。
２．コーディングの面倒さ。「非同期通信」というのは、通信を開始したらしっぱなし、もうすぐに次の処理に進んでしまう、後は全部すんだらまた呼んでね――といったやり方です。普通に「実行する処理を順番に書くだけ」とは違います。まぁ、何度か書いて慣れてしまえばさして面倒でもないんですが、初めての人はとっつきにくいでしょう。
３．複雑なデータの取得が面倒。Ajaxというからには、XMLのデータなどももちろん扱えますが、しかし受け取った側のJavaScriptで、XMLの内容を解析処理する方法、わかります？「えっ？ どうやるんだろうな？」という人が大半じゃないでしょうか。といって、プレーンなテキストで複雑なデータを送って、受け取ってからデータを分析するのもまた大変です。
こうしたことを乗り越えて、「Ajax、自由自在に使えます」となるまでには、けっこうな道程があります。こういう面倒くさいことこそ、ライブラリの出番です。jQueryに用意されている機能を使えば、Ajaxも実にシンプルに使うことができます。
まず、もっともシンプルな使い方、「サーバーからテキストデータを受け取って指定のエレメントに表示する」ということをやってみましょう。以下に簡単なサンプルコードをあげておきましょう。Webページと同じ場所に「data.txt」というテキストファイルを用意しておいてください。ボタンを押すと、サーバーからこのファイルの中身を受け取って、<div>タグに表示します。――ここでのAjax処理は、doActionにあるわずか１行の文だけです。
jQueryオブジェクトに用意されている「load」は、引数に指定したアドレスにアクセスしてデータを受け取り、それをこのjQueryオブジェクトのエレメントに表示する、ということを行います。とりあえずloadだけ覚えておけば、今すぐにでもAjaxが使えるようになるのです。
１．互換性の問題。Ajaxの機能を提供するオブジェクトが、Webブラウザによって微妙に違いがあります。はっきりいえば、IEのやろう……いえ、IEの旧バージョンがActiveXを使った特殊なアプローチを取っていたためです。「IEの最新版しか対応しない！」と割りきってしまえばいいのですが、まだIE6がかなり使われている現状では、ある程度、古いバージョンの対応も考えなければいけないでしょう。
２．コーディングの面倒さ。「非同期通信」というのは、通信を開始したらしっぱなし、もうすぐに次の処理に進んでしまう、後は全部すんだらまた呼んでね――といったやり方です。普通に「実行する処理を順番に書くだけ」とは違います。まぁ、何度か書いて慣れてしまえばさして面倒でもないんですが、初めての人はとっつきにくいでしょう。
３．複雑なデータの取得が面倒。Ajaxというからには、XMLのデータなどももちろん扱えますが、しかし受け取った側のJavaScriptで、XMLの内容を解析処理する方法、わかります？「えっ？ どうやるんだろうな？」という人が大半じゃないでしょうか。といって、プレーンなテキストで複雑なデータを送って、受け取ってからデータを分析するのもまた大変です。
こうしたことを乗り越えて、「Ajax、自由自在に使えます」となるまでには、けっこうな道程があります。こういう面倒くさいことこそ、ライブラリの出番です。jQueryに用意されている機能を使えば、Ajaxも実にシンプルに使うことができます。
まず、もっともシンプルな使い方、「サーバーからテキストデータを受け取って指定のエレメントに表示する」ということをやってみましょう。以下に簡単なサンプルコードをあげておきましょう。Webページと同じ場所に「data.txt」というテキストファイルを用意しておいてください。ボタンを押すと、サーバーからこのファイルの中身を受け取って、<div>タグに表示します。――ここでのAjax処理は、doActionにあるわずか１行の文だけです。
$('#message').load('data.txt');たったこれだけ！ これで、サーバーにアクセスしてdata.txtの内容を送ってもらい、それを<div id="message">タグのinnerHTMLに設定する――という一連の作業をすべてやってくれるのです。jQueryオブジェクトに用意されている「load」は、引数に指定したアドレスにアクセスしてデータを受け取り、それをこのjQueryオブジェクトのエレメントに表示する、ということを行います。とりあえずloadだけ覚えておけば、今すぐにでもAjaxが使えるようになるのです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
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>
※関連コンテンツ