情報処理安全確保支援士 2025年 秋期 午前2 問18

Ajax（非同期通信）【午前2解説】

正解の理由

解法ステップ

1. 設問で示された動作（「地図の高速なスクロール」「入力に応じた逐次表示」）が「ページ全体の再読み込みなしに部分更新される」ことを確認する。
2. 「部分更新・非同期通信」を実現する技術を連想する（Ajax、Fetch、XHR）。
3. 選択肢を照らし合わせる：CSSは見た目、DOMは文書モデル、SAXはXMLの逐次パーサであり、非同期通信そのものを指すのはAjaxであると判断する。

選択肢別の誤答解説

• ア: Ajax
  • 画面の一部だけをサーバからの応答で更新する「非同期通信を用いた動的更新」を表す用語であり、本問の事例に該当する。
• イ: CSS
  • Cascading Style Sheets。レイアウトやスタイル指定を行う技術で、通信機能やサーバとのデータやり取りは含まれないため不適切。
• ウ: DOM
  • Document Object Model。HTML/XML文書をプログラムから操作するためのオブジェクト表現であり、表示や要素操作に関係するが「通信機能」を示す用語ではない。Ajaxと組み合わせて使われることは多いが単体では不正解。
• エ: SAX
  • Simple API for XML。ストリーム形式でXMLを逐次パースするためのAPI/方式であり、クライアントとサーバの非同期通信技術を指すものではない。

よくある誤解

• 「Ajax = XMLHttpRequestのみ」
  • 従来はXMLHttpRequestが代表的でしたが、現在はFetch APIやWebSocket、またはライブラリ（axios等）を使うことが一般的です。Ajaxは概念（非同期でのデータ取得と部分更新）を指します。
• 「DOM操作自体が通信機能」
  • DOMは表示や要素操作のための仕組みで、通信は別のAPI（XHR/Fetch）が担います。両者は組み合わせて使われますが役割は異なります。
• 「Ajaxは常にXMLを使う」
  • 名前にXMLが含まれる歴史的経緯はありますが、現代ではJSONが主流です。

補足コラム

• データ形式：JSONが主流。受け取ったJSONをパースしてDOMに反映する流れが典型。
• 非同期処理の管理：コールバック地獄を避けるため、Promiseやasync/awaitを使う。
• パフォーマンス：頻繁に送信する入力イベントなどはデバウンス（debounce）やスロットリング（throttle）で抑制する。
• セキュリティ：同一生成元ポリシーとCORS設定に注意する。

const input = document.getElementById('query');
let timerId = null;

input.addEventListener('input', (e) => {
  const q = e.target.value.trim();
  clearTimeout(timerId);
  if (q === '') {
    showSuggestions([]);
    return;
  }
  // 300ms のデバウンス
  timerId = setTimeout(async () => {
    try {
      const res = await fetch('/suggest?q=' + encodeURIComponent(q));
      if (!res.ok) throw new Error('Network response was not ok');
      const data = await res.json(); // サーバはJSONを返す想定
      showSuggestions(data);
    } catch (err) {
      console.error(err);
      showSuggestions([]);
    }
  }, 300);
});

function showSuggestions(list) {
  const box = document.getElementById('suggestions');
  box.innerHTML = '';
  list.forEach(item => {
    const li = document.createElement('div');
    li.textContent = item;
    box.appendChild(li);
  });
}

FAQ