トップ  eラーニング  書籍紹介  用語集

Google

言語

開発環境

Webアプリ/ミドル

データベース

OS/ネットワーク

ITスキル

海外サイト翻訳

書籍検索

用語検索

簡単なAjax-tomcat上のWebアプリ作成

動作確認した環境

アプリの構成

□tomcatホームディレクトリ
├□conf
|└◆server.xml
└□webapps
  └□test
    ├◆index.html
    └□WEB-INF
      ├□classes
      |└◆SampleServlet.class
      └◆web.xml

方針として、文字コードはUTF-8を使用する。 html、JSP、Servlet全部UTF-8に統一する。 apacheと連携する場合、「AddDefaultCharset UTF-8」を指定する。

サーバ設定&コンテキスト指定(server.xml)


<?xml version='1.0' encoding='utf-8'?>
<Server port="8005" shutdown="SHUTDOWN">

  <!--: 省略-->

  <Service name="Catalina">
    <Connector port="8080" protocol="HTTP/1.1"
               connectionTimeout="20000"
               redirectPort="8443"
               URIEncoding="UTF-8" />

    <Connector port="8009"
               protocol="AJP/1.3"
               redirectPort="8443"
               URIEncoding="UTF-8" />
    <Engine name="Catalina" defaultHost="localhost">
      <Realm className="org.apache.catalina.realm.UserDatabaseRealm"
             resourceName="UserDatabase"/>
      <Host name="localhost"  appBase="webapps"
            unpackWARs="true" autoDeploy="false"
            xmlValidation="false" xmlNamespaceAware="false">
        <Context path="/test"
                 docBase="<tomcatホームディレクトリ>/webapps/test"
                 debug="0" reloadable="true">
        </Context>
      </Host>
    </Engine>
  </Service>
</Server>

html(index.html)


<html>
<head>
<meta http-equiv="content-type"
                        content="text/html; charset=UTF-8">
<script type="text/javascript">
var xmlhttp;
/* ボタンのonclick属性に登録する関数 */
function onButtonClick() {
    // IE版のXMLHttpRequestオブジェクトを生成する。
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    // イベント発生(データ受信)時の処理を登録する。
    xmlhttp.onreadystatechange = httpHandler;
    // リクエスト先のURLや送信するデータを設定する。 
    xmlhttp.open("POST", "/test/sample");
    // サーバ側に要求を送る。
    xmlhttp.send(null);
}
/* XMLHttpRequestのonreadystatechangeに登録する関数 */
function httpHandler() {
    // サーバ側の応答内容をidがaのタグに設定する。
    document.getElementById("a").innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>
<p id="a">ここに文字列が出力します。</p>
<input type="button" value="ボタン" onclick="onButtonClick()"/>
</body>
</html>

Servlet(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 {
    private static final long serialVersionUID = 1L;
    public void doPost(HttpServletRequest req, HttpServletResponse res)
            throws IOException, ServletException {
        res.setContentType("text/plain; charset=UTF-8");
        PrintWriter out = res.getWriter();
        out.println("Hello World!!");
    }
}

コンパイル

java -classpath <tomcatホーム>/lib/servlet-api.jar:. SampleServlet.java User.java

配備記述子(web.xml)


<?xml version="1.0" encoding="UTF-8" ?>

<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
             http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
         version="2.4">
    <servlet>
        <servlet-name>sample</servlet-name>
        <servlet-class>SampleServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>sample</servlet-name>
        <url-pattern>/sample</url-pattern>
    </servlet-mapping>
</web-app>

動作確認

ブラウザより、「http://<tomcatサーバのホスト>:8080/test/index.html」へアクセス。 「ボタン」を押すと「Hello World!! 」と表示される。

戻る

Loarding…

グループサイト  zealseeds  zealseedsラーニング  zealseedsブックス  名か字  名科辞典  幸福の木の育て方

Copyright (C) 2007-2011 zealseeds. All Rights Reserved.お問合せ