Spring Boot で、簡単にJavascript 非同期通信ができる!

Spring Boot で、簡単にJavascript 非同期通信ができる!

Spring Boot で、Javascript 非同期通信のサンプルがあったので試してみた!!
一応動いたが、少し修正しないと動かなかったので、掲載してみた。

オリジナルは、
Java（Spring）で作るはじめてのAPI
ありがとう!

開発環境:
Ubuntu Mate 24.04
VSCode
openjdk-21-jdk-headless
openjdk-21-jdk
openjdk-21-jre-headless
openjdk-21-jre

プロジェクト名: spring_api
Gradle project
java version:21
Spring Web, Spring Boot DevTools, Thymeleaf

1. HelloController.java を作る。
spring_api/src/main/java/com/example/spring_api/HelloController.java

package com.example.spring_api; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.stereotype.Controller; @Controller @CrossOrigin public class HelloController { @GetMapping("/") public String showPage() { return "index"; } // 上位が、 new HelloController() を行って、メッソドコールするのか @GetMapping("/hello") @ResponseBody public Message hello(@RequestParam(name = "name") String name) { //ここに処理を記述 String message = "こんにちは。" + name + "さん！"; //Messageクラスのインスタンスを作成し、messageをセットする Message msg = new Message(message); return msg; } }

1)
http://localhost:8080/
で、index.html を thymeleaf で表示できるようにした。

2)
index.html からの javascript の非同期通信の
http://localhost:8080/hello?name=xxx
を受けて、
"こんにちは。" + name + "さん！"
を返す処理も、同時に受けられるようにした。

2. Message.java を追加する。
spring_api/src/main/java/com/example/spring_api/Message.java
package com.example.spring_api; public class Message { private String message; public Message(String message) { super(); this.message = message; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } }

3. index.html を追加する。
spring_api/src/main/resources/templates/index.html
<!DOCTYPE html> <html lang="ja" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>あいさつAPI</title> <style> form { margin: 30px 0; } </style> <script> async function connectApi() { //alert("called connectApi()"); //テキストエリアの入力値を取得 const inputValue = document.getElementById("input"); const name = inputValue.value; try { const url = "http://localhost:8080/hello?name=" + name; //例外が発生した場合は、catchへ移動 const response = await fetch(url, { method: "GET", }); if (!response.ok) { switch (response.status) { default: //不明なエラーの場合は、ステータスを含めて表示する const err_code = response.status; const err_msg = "情報を取得できませんでした。（E:" + err_code + ")"; throw new Error(err_msg); } } else { const reserved = await response.json(); //htmlのpタグ内に、受信したあいさつメッセージを表示 const message = document.getElementById("text"); message.textContent = reserved.message; } } catch (err_msg) { alert(err_msg); } } </script> </head> <body> <h1>あいさつAPI</h1> <p>名前を教えて下さい</p> <form> 名前: <input id="input" type="text" value=""/><br /> <br /> <button type="button" onclick="connectApi()">送信！</button>  <input type="reset" value="クリア" /> </form> <p id="text"></p> </body> </html>

5. run
VSCode から、Tomcat を起動する。
ブラウザーから、
localhost:8080/
にアクセスする。

サーバー側は、簡単にできるもんじゃなー。
感心する。おんちゃんが、Perl で CGI を作っていた時、
Ajax(JavaScript) で、非同期通信ができる言うのが、世に広がりはじめたばかりの頃じゃった。
Perl で、応答側の cgi を作るのも一苦労じゃったなーあ。

Spring Boot で、簡単にJavascript 非同期通信ができる!

カテゴリ:

検索

このブログ記事について

カテゴリ

月別アーカイブ

ウェブページ

サイトナビ

Spring Boot で、簡単にJavascript 非同期通信ができる!

カテゴリ:

検索

このブログ記事について

カテゴリ

月別 アーカイブ

ウェブページ

サイトナビ

月別アーカイブ