JavaScript で AJAX リクエストをマスターする

はじめに

このプロジェクトでは、JavaScriptを使ってAJAX（非同期JavaScriptとXML）リクエストを実装し、バックエンドサーバーからデータを取得し、その結果をWebページに表示する方法を学びます。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

HTMLを使ってWebページに検索ボックスと検索ボタンを作成する方法
検索ボタンにイベントをバインドし、入力フィールドから検索テキストを取得する方法
検索テキストをパラメータとして使って、JavaScriptを使ってバックエンドサーバーにAJAX GETリクエストを送信する方法
サーバーから返されるJSONデータを解析し、Webページに検索結果を表示する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

JavaScriptを使ってAJAX（非同期JavaScriptとXML）リクエストを実装し、バックエンドサーバーからデータを取得する
HTML要素を動的に作成して追加することで、Webページに検索結果を表示する
検索結果をユーザーにやさしい形式で整形して表示する

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/NetworkingGroup(["Networking"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/NetworkingGroup -.-> javascript/http_req("HTTP Requests") subgraph Lab Skills javascript/dom_select -.-> lab-300372{{"JS を使った AJAX リクエストの実装"}} javascript/dom_manip -.-> lab-300372{{"JS を使った AJAX リクエストの実装"}} javascript/event_handle -.-> lab-300372{{"JS を使った AJAX リクエストの実装"}} javascript/http_req -.-> lab-300372{{"JS を使った AJAX リクエストの実装"}} end

検索ボックスと検索ボタンをセットアップする

このステップでは、index.jsp ページに検索ボックスと検索ボタンを作成する方法を学びます。

/src/main/webapp/ ディレクトリにある index.jsp ファイルを開きます。
<body> セクションの中に以下のHTMLコードを追加します。

<input type="text" id="searchInput" />
<button id="searchButton" onclick="search()">Search</button>
<div id="searchResults"></div>

これにより、IDが searchInput のテキスト入力フィールドと、IDが searchButton のボタンが作成されます。ボタンには onclick 属性があり、クリックされると search() 関数が呼び出されます。3. index.jsp ファイルを保存します。

検索機能を実装する

このステップでは、検索機能を処理するためのJavaScriptコードを追加する方法を学びます。

index.jsp ファイルの <head> セクションの中に、以下のJavaScriptコードを追加します。

    <script>
        function search() {
            var searchText = document.getElementById("searchInput").value;
            console.log("Search Text:", searchText); // 検索テキストをコンソールに出力
            var xhr = new XMLHttpRequest();
            xhr.open("GET", "/UserServlet?username=" + searchText, true); // GETリクエストを送信し、URLにユーザー名をパラメータとして追加
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                var response = JSON.parse(xhr.responseText);
                displayResults(response);
                }
            };
            xhr.send();
            }

            function displayResults(results) {
            var searchResultsDiv = document.getElementById("searchResults");
            searchResultsDiv.innerHTML = "<p>Search Results:</p>";

            // resultsが配列かどうかを確認
            if (Array.isArray(results)) {
                // 結果配列の各ユーザーオブジェクトをループ処理
                results.forEach(function (user) {
                // ユーザー情報を表示する新しいdiv要素を作成
                var userDiv = document.createElement("div");
                userDiv.className = "user-info"; // スタイリング用のクラスを追加

                // 新しいdiv要素にユーザー情報を追加
                userDiv.innerHTML = `
                            <p>User ID: ${user.userId}</p>
                            <p>User Name: ${user.userName}</p>
                            <p>User Gender: ${user.userGender === 1? "Male" : "Female"}</p>
                            <p>User Age: ${user.userAge}</p>
                            <p>User Nation: ${user.userNation}</p>
                            <p>User Email: ${user.userEmail}</p>
                            <p>User Phone: ${user.userPhone}</p>
                            <p>User Address: ${user.userAddr}</p>
                        `;

                // 新しいdiv要素を検索結果divに追加
                searchResultsDiv.appendChild(userDiv);
                });
            } else {
                // resultsが配列でない場合、対応するメッセージを表示
                searchResultsDiv.innerHTML = "<p>No results found</p>";
            }
        }
    </script>

このJavaScriptコードは検索機能を処理します。ユーザーが「Search」ボタンをクリックすると、search() 関数が呼び出され、これは検索テキストをパラメータとして /UserServlet にAJAXリクエストを送信します。サーバーからの応答は、displayResults() 関数を使って解析され、searchResults divに表示されます。2. index.jsp ファイルを保存します。

これで、JavaScriptを使ったAJAXリクエストの実装が完了しました。プロジェクトを実行して検索機能をテストすることができます。

実行

最後に、以下のコマンドを使ってターミナルでコードをコンパイルして実行できます。

cd ServletAjaxProject
mvn tomcat7:run

以下の実行結果を参照できます。

✨ 解答を確認して練習

まとめ

おめでとうございます！このプロジェクトを完了しました。技術力を向上させるために、LabExでさらに多くの実験を行って練習してください。