AJAXを使ってみよう

2023年12月24日

こんにちわ
今回はFetch APIを使ってAJAXを行い、JSONのデータをブラウザに表示する方法を解説したいと思います。

AJAXとは？

AJAX（Asynchronous JavaScript and XML）は、ウェブ開発において非同期通信を実現するための技術の一つです。

これにより、ウェブページのリロードなしにデータを取得・送信できます。

以下のような特徴があります。

非同期通信： ページの再読み込みなしにデータをサーバーから取得できます。これにより通信が後ろで行われるためページがスムーズに動作します。
DOMの動的更新： 取得したデータを利用して、ページの特定の部分だけを動的に更新できます。これにより、部分的なコンテンツの変更が可能になります。
イベント駆動： ユーザーのアクションや特定のタイミングで非同期通信を発生させることができます。これにより、リアルタイムな反応や更新を実現できます。

実際に使ってみよう

まず以下のようなdata.jsonを用意します。

{
  "message": "Hello World"
}

次にAJAXを使用し、javascriptからdata.jsonを取得したいと思います。

流れとしてはdata.jsonをリクエストし戻ってきたjsonの中身からmessageの情報を取り出します。その後メッセージの情報をDOMを使って表示します。

全体のコード

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p id="message"></p>
  <script src="/script.js"></script>
</body>
</html>

Javascript

async function displayMessage() {
  const response = await fetch('./data.json');
  const data = await response.json();
  const messageElm = document.getElementById('message');
  messageElm.innerHTML = data.message;
}

displayMessage();

階層はこのようになっています。

ファイル名
│
├── index.html
├── script.js
└── data.json

jsのコードを見ていきましょう。

const response = await fetch('./data.json');

displayMessageの中ではまずfetchというメソッドを実行し実行しその結果をresponseという変数に代入しています。

fetchがサーバーへリクエストを送り、レスポンスを受けていることになります。fetchの第一引数にはjsonへのパスを指定しましょう。

fetchはレスポンスとして受け取った情報を返すのでresponseにはサーバからの返却値が入ります。

const data = await response.json();

次の行ではjsonメソッドの実行結果をdataに代入しています。response.jsonメソッドはレスポンスに含まれるjsonをObjectに変換するので

dataにはObjectが代入されます。

const messageElm = document.getElementById('message');
 messageElm.innerHTML = data.message;

最後にdataからmessageを取り出しブラウザに表示しています。

ブラウザで確認してみましょう。

Hello worldと表示されていれば成功です！

まとめ

AJAXと聞くと身構えてしまうかもしれませんが、コード自体は意外にシンプルですよね。

これもFetch APIが登場したお陰みたいですね。

でわ！

ブログ

BLOG

AJAXとは？

実際に使ってみよう

全体のコード

まとめ