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

はじめに

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

👀 プレビュー

AJAX プロジェクトのプレビュー

🎯 タスク

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

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

🏆 成果

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

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

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

このステップでは、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

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

search functionality example

まとめ

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

JS を使った AJAX リクエストの実装