「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

最初に留意事項です。
「Ajax（エイジャックス）」と言われて「あぁ、アレのことね」と分かる方は最後まで読む必要ありません。
Ajaxの正式名称（？）が「Asynchronous JavaScript ＋ XML」です。
「Asynchronous JavaScript ＋ XML」を省略したのが「Ajax」ね。



※「Asynchronous JavaScript ＋ XML」を何となく日本語にすると「非同期JavaScript＋XML」となります。[詳細]

以上が「Ajax」の意味を知っている人向けの説明です。

「Ajaxって何？美味しいの？」な人は、このまま読み進めてください。
用語の中身について説明します。



それでは、いってみましょう。
まずは予備知識として

・ホームページが表示される流れ
・JavaScript
・XML

について簡単に説明します。
「そんなの説明されなくても知ってるよ！」な人は適当に読み飛ばしてください。

あなたがホームページを見ようとすると、まず、ホームページを見るときに使うソフト（Webブラウザ）からホームページのファイルが置いてあるコンピュータ（Webサーバ）に対して「このページをおくれ」と お願いが出されます。



そのお願いに対して、WebサーバさんからWebブラウザさんに「ほれ、そのページだよ」と お返事がきます。



お返事を受け取ったWebブラウザさんは、受け取った内容（ホームページのファイル）を画面上に表示してくれます。



これが、ホームページが表示されるときの流れです。

JavaScriptは「ホームページに動きをつけるときに使われる（簡易的な）プログラミング言語」です。
ホームページを作るときの技術のひとつとして、HTMLやCSSとセットで出てくることが多いです。

XMLは「ファイルの書き方ルールのひとつ」です。
例えば

<?xml version="1.0" encoding="Shift_JIS" ?>
<staff>
    <member>
        <name>ピヨ太</name>
        <position>社長</position>
        <age>40代のおっさん</age>
    </member>
    <member>
        <name>ピヨ子</name>
        <position>営業部長</position>
        <age>永遠の美少女</age>
    </member>
</staff>

みたいな書き方を「XML」と言います。
XMLの詳細が知りたい方は、用語「XML」の説明を ご覧ください。



今回は「やり取りするデータの形式はXML形式だよ」という説明で出てくるだけです。
細かい部分は知らなくても大丈夫です。

以上を踏まえて、本題に入ります。

繰り返しになりますが、ホームページを表示するときには、まずパソコンさん（の中にいるWebブラウザさん）からWebサーバさんに「このページをおくれ」と お願いが出されます。



そのお願いに対して、Webサーバさんからパソコンさんに「ほれ、そのページだよ」と お返事がきます。
お返事には、ホームページを表示するために必要なHTMLファイルやCSSファイル、画像ファイルやJavaScriptファイルなどがくっついています。



パソコンさんがそれらのファイルを受け取ると、受け取ったファイルたちをWebブラウザさんがあれこれして画面に表示します。



これで無事にホームページが表示されました。

ここでピヨ太君がページ上にあるボタンを押したとしましょう。
このボタンはリンクと同じです。
押すと別のページに移動します。

押すと別のページに移動するボタンを押すと、パソコンさんからWebサーバさんに「今度はこのページをちょうだいよ」なお願いが行きます。
「移動先のページのファイルをくれよ」と依頼を出すのです。



その後の流れは先程と同じです。
Webサーバさんからパソコンさんに「ほれ、これがそのページだよ」と お返事がきます。
そのお返事には、移動先のページを表示するために必要なHTMLファイルやCSSファイル、画像ファイルやJavaScriptファイルなどがくっついています。



パソコンさんがそれらのファイルを受け取ると、受け取ったファイルたちをWebブラウザさんがあれこれして画面に表示します。
このとき、さっきまで表示していた画面の内容は消えます。
新しく受け取ったファイルをあれこれした画面で置き換わっちゃうのです。



これがホームページを見るときの一般的な流れです。

さて、ここでJavaScriptさんに登場してもらいましょう。

JavaScriptさん（正確には、中身がJavaScriptさんで書かれたファイル）はHTMLファイルさんたちと一緒にパソコンに送り込まれ、パソコンさんの中でお仕事をします。



実は、このJavaScriptさん、ちょっと特殊な能力を持っていましてね。
人間様には見えないところで、こっそりWebサーバさんとやり取りできるのです。
しかも、他の処理の邪魔をしないようにすることが可能です。
専門用語で「非同期通信」と呼ばれる形でWebサーバさんとやり取りできます。

この力を使うと、例えばこんなことができます。

先程と同じようにピヨ太君がページ上にあるボタンを押しました。
このボタンは、押すと別のページに移動するボタン……みたいなものですが、ちょっと違います。
JavaScriptさんがWebサーバさんに「おい、新しいページをくれよ」と、お願いを出してくれるボタンです。

このボタンを押すと、JavaScriptさんからWebサーバさんに「このページをちょうだいよ」なお願いが行きます。



そうすると、WebサーバさんからJavaScriptさんに「ほれ、これがそのページだよ」と お返事がきます。



なんか、さっきと同じっぽいですね。
何が違うのでしょう？

先程の例では、Webブラウザさんが受け取ったファイルたちをあれこれして画面に表示しました。
そのため画面全体が新しいページの内容に置き換わりましたよね。



今度はファイルを受け取ったのはJavaScriptさんです。
この受け取ったファイルの中身をどうするかはJavaScriptさんに委ねられます。
後は作り方次第ですが、例えば新しく受け取ったファイルの中身を今表示している画面に表示することもできます。
画面全体を再表示することなく、今表示している内容を新しいページの内容に書き換えられるのです。



最初の例では、Webサーバさんから新しいページをもらってくる作業をWebブラウザさんがやりました。

Webブラウザ←→Webサーバ

のやり取りです。



後の例では、Webサーバさんから新しいページをもらってくる作業をJavaScriptさんがやりました。

JavaScript←→Webサーバ

のやり取りです。



Webブラウザさんが新しいページをもらってきたときは、ページ全体を書き換えなくてはいけませんでした。
画面上の古い内容を全部消して新しい内容で置き換えることになります。



JavaScriptさんが新しいページをもらってきたときは、JavaScriptさん次第です。
ページの一部だけを書き換えることもできますし、全体を書き換えることもできます。



なんか、JavaScriptさんに新しいページをもらってきてもらった方が、いろいろ融通が利きそうですね。

大分、話が遠回りしましたが、この

JavaScriptさんに新しいページをもらってきてもらおうぜー！

が「Asynchronous JavaScript ＋ XML」です。
上でも書きましたが、一般的には「Ajax」と表現されます。
※本ページでも以降は「Ajax」と表現します。

Asynchronous（エイシンクロナス）の意味は「非同期」です。
ちょっと小難しい言い方をすると「JavaScriptの非同期通信を使って、XML形式のデータをWebサーバからもらってくるぜー！そうすると、なんかいろいろできて便利だぜー！」がAjaxです。

「Ajax」自体が何かの技術や言語を指すわけでは ありません。
ご注意ください。
あくまで実装方式の呼び名です。
ノリとしては

JavaScriptで非同期通信できたよね？それを使って、XML形式のデータをサーバとやり取りしたら、なんかいろいろできるんじゃね？良いね！でも「JavaScriptで非同期通信してXMLデータを～」って、なんか長ったらしくて呼びにくいな。よし！「JavaScriptで非同期通信してXMLデータを～」のことを「Ajax」って呼ぶことにしよう！

程度ですよ、多分。

とはいえ、そこまで細かく考えて「Ajax」っていう表現を使っている人は多くないと思いますけどね。

・JavaScriptを使うぜ！
・サーバと非同期通信するぜ！

さえ押さえておけば事足りると思います。