Ajax（Asynchronous JavaScript and XML）

分類: テクノロジ系アルゴリズムとプログラミング
出る試験: 基本情報応用情報
重要度: ★★★☆☆

ページ全体を読み込み直さず、裏で通信して必要な部分だけを書き換える作り方。

もう少し詳しい説明

Ajaxは、ページ全体を読み込み直さずに、必要な部分だけを書き換える作り方です。言語ではなく、既にある技術の組み合わせ方を指します。

名前は Asynchronous JavaScript and XML の頭文字で、2005年に Jesse James Garrett が記事で使ったことから広まりました。

先に言葉を2つ説明します

ブラウザは、Google Chrome、Microsoft Edge、Safari など、Webページを見るソフトです。手元のパソコンやスマートフォンで動いています。

サーバは、要求を受け取って、応えを返す側の機械です。Webページの中身は、このサーバに置かれています。

ブラウザが「このページをください」と頼み、サーバが送り返す。 これがWebの基本の形で、このページの話はすべてこのやり取りの中で起きます。

何が変わったのか

それまでのWebページは、少しでも表示を変えるならページ全体を受け取り直す作りでした。

利用者がボタンを押す
ブラウザ（Webページを見るソフト）がサーバ（応えを返す側の機械）に要求を送る
サーバがページ全体を作って送り返す
ブラウザが画面を作り直す

変わるのが一部分でも、関係ない部分まで全部送り直します。待っているあいだ画面はいったん白くなり、操作もできません。

Ajaxでは、2〜3が裏側で行われます。

送るのは必要なデータだけ
返ってくるのも必要なデータだけ
待っているあいだも、画面は消えず、操作もできる
届いたら、書き換えるのはその部分だけ

「非同期」の意味

Asynchronous は非同期と訳します。意味は、返事を待たずに先へ進むことです。

同期だと、要求を出したら返事が来るまで何もできません。非同期なら、要求を出したあとも画面は動き続け、返事が届いた時点で、そのとき決めておいた処理が走ります。

利用者から見ると「待たされない」、作る側から見ると「届いてから書き換える処理を先に用意しておく」ということになります。

組み合わせている技術

Ajaxは、次のものを組み合わせて作ります。

役割	使うもの
中身と見せ方	HTML（ページの中身と構造を書く言葉）、CSS（見た目を指定する言葉）
画面を書き換える	DOM
裏で通信する	XMLHttpRequest
全体をつなぐ	JavaScript

表に出てくるものを補っておきます。

HTML（HyperText Markup Language）… Webページの中身と構造を書く言語。見出し・段落・表などを札で囲んで書く
CSS（Cascading Style Sheets）… その見た目（色・大きさ・配置）を決める言語
DOM（Document Object Model、ドム）… ブラウザが読み込んだページを、枝分かれする木の形として扱う仕組み。木の形については、このすぐ下で説明します
XMLHttpRequest … JavaScriptから裏で通信するための部品。XMLHttpRequestという名前にXMLと入っていますが、XML以外のデータもやり取りできます
JavaScript … ブラウザの中で動くプログラム言語（人がプログラムを書くための言葉）。上の3つを操作して、全体をつなぐ

どれも新しく作られたものではありません。 すでにブラウザにあったものを組み合わせたら、今までと違う使い心地になった、というのがAjaxの正体です。

裏で通信する部分は、いまは Fetch API（XMLHttpRequestより新しい、通信のための部品）が使われることが増えています。

DOMの「木」とは

ここでいう木は、植物のことではなく、データの並べ方の形を指す呼び名です。実際のHTMLで見てください。

<body>
  <h1>おしらせ</h1>
  <ul>
    <li>1件目</li>
    <li>2件目</li>
  </ul>
</body>

<body> の中に <h1> と <ul> があり、<ul> の中に <li> が2つ入っています。この「中に入っている」という関係を線でつないでいくと、1つの出発点から枝が分かれていく形になります。この形を木と呼びます。

線でつないで書くと、こうなります。

body
├ h1（おしらせ）
└ ul
  ├ li（1件目）
  └ li（2件目）

木での呼び方	上の例では
根（いちばん上の、ただ1つ）	`<body>`
枝（上下のつながり）	「中に入っている」という関係
葉（それ以上、下へ枝が出ていないところ）	`<li>1件目</li>` のように、中にタグが入っていないもの

木なのに、根がいちばん上にあります。コンピュータの世界では、上から下へ枝を伸ばして書くのが決まりなので、さかさまに見えるのがふつうの姿です。

DOMは、この木をJavaScriptから触れるようにしたものです。「<ul> の2つ目の <li> の文字を書き換える」のように、木の中の1か所だけを指して差し替えられます。差し替えた部分だけが画面に出し直されるので、ページ全体を作り直す必要がありません。Ajaxが「必要な部分だけを書き換える」と言えるのは、この仕組みがあるからです。

木そのものについては、木構造（1つの根から枝が分かれていくデータ構造。上下の関係を持たせたいときに使う）で詳しく説明しています。

正式名称の最後にXMLとあるが

Ajaxの正式名称は Asynchronous JavaScript and XML で、最後の語がXMLです。しかし、ブラウザとサーバのあいだでやり取りするデータが、XMLである必要はありません。

実際、いまブラウザとサーバのあいだで行き来しているデータは、ほとんどがJSON（JavaScript Object Notation。{"名前": "値"} のように、名前と値の組でデータを書く書き方）です。

XML（Extensible Markup Language。<名前>値</名前> のように、札で囲んでデータを書く書き方）より短く書けるので、通信量が少なくて済みます。HTMLの断片やただの文字列が返ることもあります。

「非同期である必要も、厳密にはない」という点まで含めて、正式名称が実態に追いついていない用語です。試験では正式名称が問われることがあるので、4つの語の並びは覚えておいてください。

何に使われているのか

地図を指で動かすと、はみ出した部分が後から表示される。検索窓に文字を入れると、候補がその場で出てくる。入力の誤りが、送信ボタンを押す前に赤く出る。

どれもAjaxです。 いまのWebアプリケーションで「ページが切り替わらずに動く」部分は、ほぼこの仕組みで作られています。

注意点もあります。受け取ったデータをそのまま画面に差し込むと、中に書かれたタグが、ただの文字ではなく命令として解釈されてしまいます。

タグは、<p> や <script> のように、HTMLで意味を表すための札です。もし <script> と書かれた文字がそのまま差し込まれると、ブラウザはそれをプログラムとして実行してしまいます。

これを悪用するのがクロスサイトスクリプティング（他人のサイトに悪意のあるプログラムを仕込み、見に来た人のブラウザで動かす攻撃）です。備えは、ページ全体を作り直す場合と同じように必要です。

試験ではこう出る

科目A（旧・午前）で出ます。いちばん多いのは、Ajaxで何ができるかを選ばせる問題です。「ページ全体を再読み込みすることなく、一部だけを更新できる」という表現が答えになります。

次に多いのが、正式名称と、使っている技術です。XMLHttpRequest（裏で通信するための部品）という名前は、そのまま選択肢に出てきます。

非同期という語の意味も問われます。「返事を待たずに、ほかの処理を進められる」という向きで答えてください。待ってから進むのが同期です。

応用情報では、Ajaxを使う画面の設計や、通信回数が増えることによるサーバ（応えを返す側の機械）側の負荷まで広がります。一度に全部送るより通信の回数は増えるという、裏側のことも押さえておくと答えやすくなります。

ミニクイズ

Ajaxを用いることによって実現できることとして、最も適切なものはどれか。

正解は 1番：ページ全体を読み込み直すことなく、表示の一部だけを更新できる

Ajaxは、ブラウザが裏側でサーバと通信し、受け取ったデータで画面の必要な部分だけを書き換える作り方です。従来は、少し表示を変えるだけでもページ全体を受け取り直して画面が一度白くなっていました。待たされず、通信量も少なくて済むので、地図を動かす操作や入力候補の表示などが滑らかになります。サーバ側のプログラムをブラウザで動かすものではありません。通信の暗号化（中身を他人には読めない形に変えること）はTLS（通信を暗号化するための決まりごと）、同時更新の矛盾を防ぐのは排他制御（同じものを2つの処理が同時に書き換えないよう、順番に1つずつ使わせること）の役目で、どちらもAjaxとは別の仕組みです。

間違えた用語の復習リストを見る →

この分野をまとめて解く → アルゴリズムとプログラミングのミニテスト（全44問）

最終更新：2026-10-09