非IT企業に勤める中年サラリーマンのIT日記

非IT企業でしかもITとは全く関係ない部署にいる中年エンジニア。唯一の趣味がプログラミングという”自称”プログラマー。

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

   

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();
 

 

実行結果

以下がブラウザで表示させた結果です。ちゃんとJSONファイルを読み込むことが出来ました。

 

スポンサーリンク

 - HTML/JavaScript