Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

Java JavaScript JSP/Servlet

JavaScriptでAttributeの値を削除(Remove)する方法

投稿日:2021年4月10日 更新日:

<目次>

(1) JavaScriptでAttributeの値を削除(Remove)する方法
 (1-1) 構文
 (1-2) サンプルプログラム
  (1-2-1) サンプルプログラムの概要
  (1-2-2) JSP
  (1-2-3) JavaScript
  (1-2-4) Servlet①:setAttributeするサーブレット
  (1-2-5) Servlet②:removeAttributeするサーブレット

(1) JavaScriptでAttributeの値を削除(Remove)する方法

今回はJavaScriptでsessionオブジェクトのAttributeをクリア(Remove)する方法をご紹介します。

(1-1) 構文

方針として、Attributeをクリアする機能を持つ「Servlet」を用意し、それを画面(JSP)から直接呼び出したり、あるいはJavaScriptを経由して呼び出したり、といった形でセッションをクリアしてみます。

■データの削除(Servlet)

Servlet等でsessionオブジェクトの属性値を削除するためのServletの記述です。AttributeのクリアはHttpSessionクラスのremoveAttributeメソッドを使います。

(構文)

//# HttpSessionクラスのインスタンス生成
HttpSession session = request.getSession();
//# “finalstr”属性にセットされた値を削除する
session.removeAttribute(“[属性の名前]”);

目次にもどる

■JavaScriptからServletの呼び出し

上記のAttributeクリアするServletを画面(JSP等)から呼び出す方法はいくつかあり、例えば次のような方法があります。

●パターン①

JavaScript経由でServlet呼び出し(JSP⇒JavaScript⇒Servlet)

(図121)①

 
●パターン②
 
JSPから直接Servlet呼び出し(JSP⇒Servlet)

(図121)②

パターン①はJavaScriptを経由しているため、Servletの呼び出しをした後も処理を継続できるメリットがあり、加えてAjax等による非同期処理が可能になります(画面を部分的に更新し、その間ユーザは画面操作も可能)。
 
パターン②は直接Servletを呼び出すため、同期処理(レスポンスが全て揃ってから画面に返却され操作可能になる)の場合等で利用されます。またServletの結果をcsvで返すといった、csvダウンロードボタン等の機能にも適しています。
 
今回はパターン①で、JavaScript経由でsessionの属性値クリアのServletを呼び出す方法を紹介します。
 

(1-2) サンプルプログラム

(1-2-1) サンプルプログラムの概要

「session.removeAttribute(“[属性の名前]”);」で実際にsessionの指定した属性値がクリアされているか?を確認するための簡単なプログラムをご紹介します。

具体的にはボタンを押下する事で、sessionの属性値セット(setAttribute)したりクリア(removeAttribute)したりするプログラムです。

(動画)完成イメージ

 

●①値のセット
左のボタンを押すと、テキストに入力した値がsessionの「finalstring」という属性にセットされ、その値が画面下方に表示されます。

(図122)

●②値のクリア
右のボタンを押すと、sessionの「finalstring」という属性の値が「クリア」され、その値が画面下方に表示されます。

(図122)②

内部的には、いずれも画面(JSP)のボタンを押すとJavaScriptのメソッドが呼ばれ、そこから更にServletを呼び出し、そのServletの中でsessionの属性をセット/クリアしています。

次の節から、このサンプルを構成する各部品(JSP、JavaScript、Servlet)を順番にご紹介していきます。

目次にもどる

(1-2-2) JSP

画面自体はテキストボックス1個+ボタン2個とシンプルですが、ポイントとしては後述のJavaScriptでjQueryのgetメソッドを使うためにjQueryのライブラリ(jquery-1.10.2.js)をインポートしている点と、最後の<div id=”GetServletResponse”></div>にはサーブレットの処理結果(挨拶文等)が埋め込まれる点です。

<%@ 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>Clear session attribute example</title>

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

        <form>
                お名前を入力してください:<input type="text" id="u_name" /><br /><br />
                <input type="button" value="setAttributeボタン" onClick="SetNewAttribute()">
                <input type="button" value="clearAttributeボタン" onClick="ClearAttribute()">
        </form>
        <br /><br />
        <strong>↓↓現在Attributeにセットされている値↓↓</strong>
        <div id="GetServletResponse"></div>
</body>
</html>

(図123)①

目次にもどる

(1-2-3) JavaScript

JavaScriptではjQueryのgetメソッドを呼び出して、サーブレット(「ClearSessionAttribute」や「SetSessionAttribute」)の処理結果を受け取り、それを画面の要素の値としてセットしています。

function ClearAttribute() {
    $.get('ClearSessionAttribute'
                ,function(responseText) {
                    $('#GetServletResponse').text(responseText);
                }
    );
}

function SetNewAttribute() {
    var name = $('#u_name').val();
    $.get('SetSessionAttribute'
                ,{userName : name}
                ,function(responseText) {
                    $('#GetServletResponse').text(responseText);
                }
    );
}

(図123)②

目次にもどる

(1-2-4) Servlet①:setAttributeするサーブレット

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;
import javax.servlet.http.HttpSession;

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

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

        //# 入力値のチェック
        String name = request.getParameter("userName").trim();
        if(name == null || name.equals("")){
            name = "Guest User";
        }
        //# 挨拶の作成
        String sayhello = "### Hi ! "+name+" ###";

        //# セッション属性に値をセット
        HttpSession session = request.getSession();
        session.setAttribute("UserGreeting", sayhello);

        //# レスポンス情報に挨拶を追加
        response.setContentType("text/html");
        response.getWriter().write((String)session.getAttribute("UserGreeting"));
    }
}

(図123)③

目次にもどる

(1-2-5) Servlet②:removeAttributeするサーブレット

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;
import javax.servlet.http.HttpSession;

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

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

        //# セッション属性の値をクリア
        HttpSession session = request.getSession();
        session.removeAttribute("UserGreeting");

        //# セッション属性に空の値をセット
        session.setAttribute("UserGreeting", "*** N/A ***");

        //# レスポンス情報に空の挨拶を追加
        response.setContentType("text/html");
        response.getWriter().write((String)session.getAttribute("UserGreeting"));
    }
}

(図124)④

目次にもどる

Adsense審査用広告コード


Adsense審査用広告コード


-Java, JavaScript, JSP/Servlet

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

HTMLでテキストボックスの左端を揃える方法

<目次> (1) HTMLでテキストボックスの左端を揃える方法  (1-1) 方針&構文  (1-2) サンプルプログラム (1) HTMLでテキストボックスの左端を揃える方法 HTML画面(例は.j …

Javaの動的Webプロジェクト作成での事前設定と雛形Webプロジェクト作成

「動的Webプロジェクト」とはHTMLのような静的ページのみならず、ServletやJSPを用いてWebアプリケーション開発をする際に作成します。本記事ではEclipseにて「動的Webプロジェクト」 …

Javaでファイル読み込みを行う方法+サンプルプログラムもご紹介

<目次> (1) Javaでファイル読み込み&書き込みを行う方法  (1-1) 構文  (1-2) サンプルプログラム (1) Javaでファイル読み込み&書き込みを行う方法 (1-1) 構文 (構文 …

JSPにおけるincludeディレクティブとjsp:includeアクションの違い

<目次> (1) JSPにおけるincludeディレクティブとjsp:includeアクションの違い  (1-1) includeディレクティブ  (1-2) jsp:includeアクション  (1 …

jQueryの$(document).ready()とは?意味や使い方をご紹介

<目次> (1) jQueryの$(document).ready()とは?意味や使い方をご紹介  (1-1) 「$(document).ready()」とは?  (1-2) サンプルプログラム  ( …

  • English (United States)
  • 日本語
Top