[ 通常表示 ]  [ 簡易表示 ]  [ シンプル表示 ]

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典イメージぴよ画像「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

Ajax

pointこの用語のポイント

point実装方式の呼び名だよ

pointJavaScriptを使うよ

point非同期通信をするよ

スポンサーリンク

簡単に書くよ

Ajaxとは

JavaScriptの今風の呼び方(嘘)。
真面目に書くと

「JavaScriptを使って非同期通信してあれこれ」をふんわりと表現したもの
です。

image piyo

詳しく書くよ

順番に見ていきましょう。

ホームページを表示するときは、まずパソコンさんからWebサーバさんに「このページをちょうだいよ」なお願いを出します。

Ajax

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

Ajax2

パソコンさんがそれらのファイルを受け取ると、Webブラウザさん(ホームページを見るときに使うソフト)が受け取ったファイル達をあれこれして、画面に表示します。

Ajax3

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

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

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

Ajax4

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

Ajax5

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

Ajax6

これがホームページを見るときの一般的な流れです。
ちなみに、話を単純化するためにパソコンさんとWebサーバさんの間でやり取りしましたが、実際には、パソコンの中にいるWebブラウザさんとWebサーバさんの間でやり取りされます。
余裕がある方は「WebブラウザとWebサーバの間でやり取りしている」というのを覚えておいてください。

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

JavaScriptさんは「ホームページに動きをつけるときに使われる(簡易的な)プログラミング言語」です。
JavaScriptさんはHTMLファイルさんたちと一緒にパソコンに送り込まれ、パソコンさんの中で、お仕事をします。

Ajax7

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

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

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

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

Ajax8

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

Ajax9

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

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

Ajax10

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

Ajax11

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

Webブラウザ←→Webサーバ

のやり取りです。

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

JavaScript←→Webサーバ

のやり取りです。

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

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

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

大分、話が遠回りしましたが、この「JavaScriptさんに新しいページを貰ってきてもらおうぜー!」が「Ajax(エイジャックス)」です。
Asynchronous JavaScript + XML」の略で「Ajax」ね。
「Asynchronous」が「非同期」なので、直訳すると「非同期JavaScript+XML」でしょうか。
「JavaScriptの非同期通信を使って、XML形式のデータをWebサーバから貰ってくるぜー!そうすると、なんかいろいろできて便利だぜー!」がAjaxです。

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

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

程度ですよ、多分。

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

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


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

ちなみに「Ajax」の読みは「エイジャックス」が一般的です。
「アジャックス」と読む人もいますが、どちらが正しいかで喧嘩しないでくださいね。
個人的には「セリエA」を「セリエ・エー」と呼ぶか「セリエ・アー」と呼ぶか、くらいどちらでも良いと思っています。

image piyo2

一言でまとめるよ

まぁ「Ajax」って単語が出てきたら「JavaScriptを使って非同期通信をするんだな~」と、お考えください。

一番上に戻るよ
スポンサーリンク