基本情報技術者 2009年 秋期 午前（科目A） 問08

Ajaxの説明はどれか。【午前2 解説】

要点まとめ

• 結論: AjaxはブラウザとWebサーバがXMLやJSONなどのデータを非同期でやり取りし、画面の一部だけを動的に再描画する仕組みです。
• 根拠: XMLHttpRequestやFetch APIを使ってHTTPで非同期通信を行い、ページ全体を再読み込みせずに部分更新できる点が特徴です。
• 差がつくポイント: 「XMLに限定されない」「独自プロトコルではない」「CORSや同一生成元制約の理解」が合否や実運用で差を生みます。

正解の理由

よくある誤解

• AjaxはXMLしか扱えないという誤解：現実にはJSONやHTMLなどを用いることが主流です。
• Ajaxは新しい通信プロトコルだという誤解：HTTPなど既存のプロトコル上で動作する仕組みです。

解法ステップ

1. 問題文のキーワードを拾う：「非同期」「ブラウザとWebサーバ」「動的に画面を再描画」。
2. 各選択肢がそのキーワードに合致するかを判定する（非同期であるか、通信対象がブラウザ⇔サーバか）。
3. 「XML」という語は歴史的特徴としては合致しても現代はJSON等も含む点を考慮する。
4. 選択肢全体を比較し、Ajaxの本質（非同期通信＋部分更新）に最も近いものを選ぶ。

選択肢別の誤答解説

• ア: HTTPを用いる点はあるが「ファイアウォールを通過できるようにした通信方式」という記述は誤りで、Ajaxの定義ではありません。
• イ: スタイルシート（CSS）の説明であり、Ajaxとは無関係です。
• ウ: ブラウザ⇔Webサーバ間の一般的な通信（HTTP）を説明しており、非同期や部分更新というAjaxの特徴が欠けています。
• エ: エ はAjaxの本質（非同期通信により動的に画面を再描画）を表しているため正解です。

補足コラム

• 歴史と現状: Ajaxは2000年代中盤に普及した概念で、名前は「Asynchronous JavaScript and XML」ですが、現在はJSONが主流です。
• 実装手段: 旧来は XMLHttpRequest を使い、近年は Fetch API と Promise/async-await による実装が一般的です。
• セキュリティ: 同一生成元ポリシー（Same-Origin Policy）やCORSの理解が重要で、サーバ側の設定がないとブラウザがクロスオリジン通信を拒否します。
• SPAとの関係: Ajaxは単一ページアプリケーション（SPA）で部分更新を実現する基盤技術の一つです。

async function loadData() {
  const res = await fetch('/api/data');
  if (!res.ok) throw new Error('通信エラー');
  const data = await res.json();
  document.getElementById('result').textContent = data.message;
}
loadData();

FAQ