jQueryのAJAXを使用したJSP Servlet Javaの例
最近、私は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 ウェブアプリケーションプロジェクトをダウンロードする。」
