AjaxとServletの連携

AjaxServlet を連携するやり方について紹介します。尚、サーブレットコンテナは Jetty を用いています。


ファイルの配置

まず、Jetty のzipファイルをダウンロードし、適当な場所(ここでは D:\sdk)で解凍します。 次に webappsフォルダの直下に好きな名前のフォルダ(ここでは webapp)を作成し、更にその下にWEB-INFフォルダを作成し、その中に web.xml を入れて下さい。

  D:\sdk\jetty\webapps\webapp\SampleAjax.htm
  D:\sdk\jetty\webapps\webapp\WEB-INF\web.xml
  D:\sdk\jetty\webapps\webapp\WEB-INF\classes\SampleServlet.class

注)web.xml、SampleAjax.htm は、UTF-8 で保存してください!


 

D:\sdk\jetty\webapps\webapp\WEB-INF\web.xml

<web-app>
  <servlet>
    <servlet-name>sampleservlet</servlet-name>
    <servlet-class>SampleServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>sampleservlet</servlet-name>
    <url-pattern>sampleservlet</url-pattern>
  </servlet-mapping>
</web-app>
 

注)SampleServlet1.class、SampleServlet2.class のように、サーブレットが複数ある場合は、<web-app>・・・</web-app>の中に複数記述してください。


1.Ajaxのみのサンプル(Servletなし)

 

D:\sdk\jetty\webapps\webapp\SampleAjax.htm

<html>
<body>

<form name="io">
  <input type="button" value="実行" onClick="get()">
  <textarea id="output" cols="50" rows="5"></textarea>
</form>

<script>
function get() {
  xhr = new XMLHttpRequest();
  xhr.onload = setResponseText;
  xhr.open("GET", "/webapp/hello.txt", true);
  xhr.send();
}
</script>

<script>
function setResponseText() {
  document.getElementById("output").innerHTML = xhr.responseText;
}
</script>

</body>
</html>
 

 

D:\sdk\jetty\webapps\webapp\hello.txt

Hello Ajax!
Hello Ajax!
Hello Ajax!
Hello Ajax!
Hello Ajax!
 

2.AjaxServletを使ったサンプル(XMLHttpRequest版)

 

D:\sdk\jetty\webapps\webapp\SampleAjax.htm

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Ajax</title>
</head>
<body>

<form name="io">
  <input type="button" name="request" value="実行">
  <input type="text" name="input1">
  <input type="text" name="input2">
  <input type="text" name="input3">
  <output name="output"></output>
</form>

<script>
document.io.request.addEventListener("click", function () {
  var url = "/webapp/sampleservlet";
  var value1 = document.io.input1.value;
  var value2 = document.io.input2.value;
  var value3 = document.io.input3.value;
  var request = "input1" + "=" + value1 + "&" + "input2" + "=" + value2 + "&" + "input3" + "=" + value3;
  var show = function (response) {document.io.output.innerHTML = response["key1"] + "," + response["key2"] + "," + response["key3"];};
  post(url, request, show);
});
</script>

<script>
function post(url, request, callback) {
  var xhr = new XMLHttpRequest();
  xhr.addEventListener("load", function (event) {
    if (event.target.status == 200) {
      callback(JSON.parse(xhr.responseText));
    }
    delete xhr;
  });
  xhr.open("post", url, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send(request);
}
</script>

</body>
</html>
 

3.AjaxServletを使ったサンプル(jQuery版)

 

D:\sdk\jetty\webapps\webapp\SampleAjax.htm

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Ajax</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>

<form>
  <input type="button" id="request" value="実行">
  <input type="text" id="input1">
  <input type="text" id="input2">
  <input type="text" id="input3">
  <output id="output"></output>
</form>

<script>
$("#request").on("click", function () {
  var url = "/webapp/sampleservlet";
  var request = {};
  request["input1"] = $("#input1").val();
  request["input2"] = $("#input2").val();
  request["input3"] = $("#input3").val();
  var show = function (response) {$("#output").text(response["key1"] + "," + response["key2"] + "," + response["key3"]);};
  $.post(url, request, show);
});
</script>

</body>
</html>
 

4.Servletのサンプル(共通)

上記のXMLHttpRequest版及びjQuery版に共通のServletサンプルです。
尚、SampleServlet.java において、サーブレットからクライアントに送信するデータ形式(setContentType)を application/json にしています。

 

D:\sdk\jetty\webapps\webapp\WEB-INF\src\SampleServlet.java

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

public class SampleServlet extends HttpServlet {
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
    response.setContentType("application/json");
    String parameter1 = request.getParameter("input1");
    String parameter2 = request.getParameter("input2");
    String parameter3 = request.getParameter("input3");
    PrintWriter out = response.getWriter();
    out.println("{" + "\"key1\"" + ":" + "\"" + parameter1 + "\"" + "," + "\"key2\"" + ":" + "\"" + parameter2 + "\"" + "," + "\"key3\"" + ":" + "\"" + parameter3 + "\"" + "}");
    out.close();
  }
}
 

 

Servletコンパイル方法

下記のバッチファイルをダブルクリックして SampleServlet.javaコンパイルします。

javac0.bat(ファイル名をjavac.batにすると暴走します)

set JAVA_HOME=D:\sdk\jdk
set path=%JAVA_HOME%\bin
javac -cp D:\sdk\jetty\lib\servlet-api-3.1.jar *.java
pause
 


コンパイルしたファイル(Servlet.class)を下記のフォルダに入れてください。

D:\sdk\jetty\webapps\webapp\WEB-INF\classes

 


Webサーバの起動方法

下記のバッチファイルをダブルクリックすると Jetty が起動します。

jetty.bat

set JAVA_HOME=D:\sdk\jdk
set path=%JAVA_HOME%\bin
cd /d D:\sdk\jetty
java -jar start.jar


Webサーバへのアクセス方法

WebブラウザのURLに以下のように入力すれば、Webサーバにアクセスすることができます。


http://localhost:8080/webapp/SampleAjax.htm


参考サイト