【Javascript】AJAXを使ってJSONを読み込んで表示する

2022/11/08

AJAXを用いて同じサーバー上のJSONファイルを読み込んで表示させようと思います。

今から15年前くらいにAJAX技術が登場した時に触ったことがあるのですが、その頃に比べてずいぶん少ないコードで実現できるんだなと素直に驚きました。当時はXMLHttpRequestオブジェクトを使って長々と（たぶん50行以上）書いていたものですが、async/awaitの登場からでしょうか、今ではものの数行で書けてしまうんですね。

JSON（test.json）

JSONファイルは以下のように単純なものを用意しました。

{
  "message": "Hello Ajax"
}

HTML（index.html）

こちらがHTML。VSCodeから自動生成されたものにちょっと加えただけです。

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX Test</title>
</head>
<body>
    <div id="message"></div>
    <script src="main.js"></script>
</body>
</html>

Javascript（main.js）

以下がJavascriptのコードです。functionの前のasyncを付けることで非同期通信処理となり、awaitでその結果待ちというわけです。（昔は結果待ちのコールバック関数を指定していました）

async function getMessage(){
  const response = await fetch('./test.json');
  const data = await response.json();
  const element = document.getElementById('message');
  element.innerHTML = `<h1>${data.message}</h1>`;
}

getMessage();