最近のブラウザで実装されている 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.
に代わります。