PbTimes 情報誌

Ajax の基礎知識

2013/10/11

• Ajax
• JavaScript
• Programming
• jQuery

Ajax 入門

説明

Ajax とはAsynchronous JavaScript + XMLの略で、Ajaxライブラリを使用したJavaScriptのプログラミングです。
有名なライブラリは、prototype.jsやjQueryなどです。

Asynchronous とは「非同期」という意味です。
通常ブラウザとサーバーが同期してやり取りを行い処理されるのですが、このAjaxは非同期で通信を行います。
そのため、ページングすることなくサーバーへ接続し、データを取得することができます。

なまえに入っているようにデータの構造はXMLを使用するのですが、jsonなどべつのものを使用することも多くあります。

Ajaxを使用することでユーザーの利便性からしてもとても使いやすくなるのでとても便利です。

しかし欠点もある

一番やっかいなのが、互換性の問題です。
ブラウザにとても左右されやすいんです！

FireFoxだと使えるけどIEだと使えない、またIE8だと使えるけどIE7だと使える。
なんてことがしょっちゅうあります。

もう一つはプログラミングが面倒くさい点です。
JavaやPHPと違い、処理一つ一つが順番に行われる訳ではありません。
複数の処理があったとしても、一つ目の処理が完了するのを待たずにすぐ次の処理が実行されます。

これが慣れるまで気持ち悪い感じがします。
XMLデータの取得も結構やりにくいのではないかと思います。

サンプル

一番シンプルと思われるAjaxを使った以下のような処理を紹介します。

ファイルに書かれた文字列を読み込み表示

ファイルを読込む場合は、load を使用します。
[JavaScript]

function outputText(){
	$('#msg').load('data.txt');
}

HTML

<div id="msg">ここにテキストを表示。</div>
<input type="button" value="Output" onclick="outputText();">

jQueryライブラリを読み込むのもお忘れなく

>script src="jquery-1.10.2.min.js"<>/script<