jQueryのAJAXを使用したJSP Servlet Javaの例

1年 ago

結衣, 春花

2 minutes

最近、私はJava JSP Servletベースのウェブアプリケーションにおいて、Ajaxは非常に一般的です。最近私はjQueryのメソッドについてたくさん書いてきました。今日は、Java Servlet JSPベースのウェブアプリケーションで簡単にAjax呼び出しを実行し、レスポンスを処理するための重要なjQuery機能の一つについて説明します。

Ajax JSP Servlet の例

「Dynamic Web Project」を作成するためにEclipse IDEを使用していますが、他のIDEでも構いません。私たちの主要な焦点は、JSPからサーブレットへのjQueryとAJAX呼び出しです。下の画像は最終的なプロジェクトの構造を示しています。

以下のAjaxサーブレットコードを日本語で述べ直す：

アジャックスサーブレットのコード

リクエストからユーザー名を取得し、挨拶文を作成してプレーンテキストとして返す非常にシンプルなサーブレットを持っています。

package com.scdev.servlets;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/GetUserServlet")
public class GetUserServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		String userName = request.getParameter("userName").trim();
		if(userName == null || "".equals(userName)){
			userName = "Guest";
		}
		
		String greetings = "Hello " + userName;
		
		response.setContentType("text/plain");
		response.getWriter().write(greetings);
	}

}

Servlet-3のアノテーションを使って設定していることに注意してください。XMLベースの設定が好みの場合は、web.xmlファイルで行うこともできます。私たちは、jQuery AJAXのサポートを使用して、このサーブレットを非同期に呼び出します。

アジャックス JSP ページ

以下は、私たちのJSPページのコードです。入力フィールドがあり、ユーザー名を入力することができます。フォーカスが外れると、jQueryのAJAXメソッドが実行され、私たちのServletを呼び出してレスポンスを処理します。index.jspのコードです。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery, Ajax and Servlet/JSP integration example</title>

<script src="https://code.jquery.com/jquery-1.10.2.js"
	type="text/javascript"></script>
<script src="js/app-ajax.js" type="text/javascript"></script>
</head>
<body>

	<form>
		Enter Your Name: <input type="text" id="userName" />
	</form>
	<br>
	<br>

	<strong>Ajax Response</strong>:
	<div id="ajaxGetUserServletResponse"></div>
</body>
</html>

JSPページには2つのJSファイルが含まれていることに気付いてください。1つ目はjQueryのJSライブラリであり、もう1つはajax呼び出しのためのJSコードが含まれています。私はcode.jquery.comのURLからjQuery JSをインクルードしていますが、ダウンロードしてJSファイルと一緒に保管することもできます。JSPのコードは非常にシンプルです。私たちはAJAX呼び出しの応答からjQueryを使ってajaxGetUserServletResponseのコンテンツを埋めることになります。

jQueryのAJAXのJavaScriptファイル

以下は、jQueryのAJAXリクエストのための私たちのJavaScriptファイルのコードです。app-ajax.jsのコードです。

$(document).ready(function() {
        $('#userName').blur(function(event) {
                var name = $('#userName').val();
                $.get('GetUserServlet', {
                        userName : name
                }, function(responseText) {
                        $('#ajaxGetUserServletResponse').text(responseText);
                });
        });
});

以下に示すように、私たちはajax（）メソッドを使用してjQuery AJAXコールも行うことができます。上記はajax（）メソッドを使用するための短縮形のアプローチです。

$(document).ready(function() {
	$('#userName').blur(function() {
		$.ajax({
			url : 'GetUserServlet',
			data : {
				userName : $('#userName').val()
			},
			success : function(responseText) {
				$('#ajaxGetUserServletResponse').text(responseText);
			}
		});
	});
});

以下は、jQueryのajax()メソッドの構文です。上記のコードと関連付けてみてください。そうすれば、何が起こっているか理解できるでしょう。

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

私たちのjQuery Ajax JSP Servletのサンプルアプリケーションは準備完了です。お好きなサーブレットコンテナにビルドしてデプロイしてください。以下の画像は、私たちのサーブレットが呼び出されていることを確認するためにChromeの開発者ツールを使用しています。

Ajax JSP Servletの例の要約

次のチュートリアルでは、jQueryのAJAXサポートの基礎とJavaウェブアプリケーションとの統合方法を学びました。今後のチュートリアルでは、どんなウェブアプリケーションでも使用できるjQueryのさらなる機能について学びます。最終プロジェクトは以下のリンクからダウンロードできます。

以下の文を日本語で表現する。

「jQuery AJAX Java ウェブアプリケーションプロジェクトをダウンロードする。」