Web系開発メモ

Java, C#, HTML, CSS, JavaScript のことなどを書いてます。

JS:FetchAPIでJSONを受信

最近のブラウザで実装されている Fetch API を使って JSON を受信してみました。Fetch API は、XMLHttpRequest の代替として Ajax 通信ができたりします。

コード

/app/hello から JSON を受け取って、 #msg のテキストを入れ替える感じで書いてみました。

<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p id="msg">Loading...</p>
<script type="text/javascript">
(function() {
  fetch('/app/hello'
    ).then(res => res.json()
    ).then(json => {
      var msg = document.getElementById('msg');
      msg.textContent = json.msg;
    });
})();
</script>
</body>
</html>

動作

下のような JSON を受け取ると、

{"msg":"Hello, World."}

画面に表示されていた Loading... が、 Hello World. に代わります。