jspファイルでのjavascriptの読み込みについて

eclipseの動的Webプロジェクトを使用して、Webシステムを作成したいです。
jspファイルの中にjsファイルを読み込む文言を記述した後
サーブレットファイルにjspを呼び出すという処理を書いて、Tomcatサーバーで実行してみると
jsファイルを読み込むことができません。
jspファイルを右クリックして直接実行した場合の読み込みはできていて、
サーブレットファイルを実行してみた時は読み込むことができません。
どちらも同じくjspファイルの内容が表示されているのにjspとサーブレットファイルから実行した時
の結果が違うのは何故でしょうか？
教えていただけると嬉しいです。

Failed to load resource: the server responded with a status of 404 ()

Chromeのデベロッパーツールに出ているエラーメッセージは上記のような表示となっています。

該当のソースコード

jsp
1<%@ page language="java" contentType="text/html; charset=UTF-8"
2    pageEncoding="UTF-8"%>
3<!DOCTYPE html>
4<html>
5<head>
6<meta charset="UTF-8">
7<title>hoge</title>
8</head>
9<body>
10<script type="text/javascript" charset="UTF-8" src="../js/hoge.js"></script>
11<%= new java.util.Date() %>
12
13</body>
14</html>

servlet
1package servlet;
2
3import java.io.IOException;
4
5import javax.servlet.RequestDispatcher;
6import javax.servlet.ServletException;
7import javax.servlet.annotation.WebServlet;
8import javax.servlet.http.HttpServlet;
9import javax.servlet.http.HttpServletRequest;
10import javax.servlet.http.HttpServletResponse;
11
12/**
13 * Servlet implementation class hogeServlet
14 */
15@WebServlet("/hogeServlet")
16public class hogeServlet extends HttpServlet {
17	private static final long serialVersionUID = 1L;
18
19    /**
20     * @see HttpServlet#HttpServlet()
21     */
22    public hogeServlet() {
23        super();
24        // TODO Auto-generated constructor stub
25    }
26
27	/**
28	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
29	 */
30	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
31
32		String view = "jsp/hoge.jsp";
33	    RequestDispatcher dispatcher = request.getRequestDispatcher(view);
34
35	    dispatcher.forward(request, response);
36
37	/**
38	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
39	 */
40	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
41		// TODO Auto-generated method stub
42		doGet(request, response);
43	}
44
45}

補足情報（フォルダ階層）

各ファイルが置いてあるフォルダ構成は以下の状態です。

hogeProject(プロジェクト）
│
├ src
│　└ servlet(パッケージ)
│　　　　└ hogeServlet.java
│
├ WebContent
│ ├ js
│ │ └ hoge.js
│ │
│ ├ jsp
│ │ └ hoge.jsp
│ │
│ ├ META-INF
│ │
│ ├ WEB-INF

宜しくお願い致します。

回答2件

ベストアンサー

もっともよくある解決法としては、相対パスではなく、コンテキストパスを取得して、そこからのパスを正確に書くことです。

html
1<script src="${pageContext.request.contextPath}/js/hoge.js"></script>

理由としては、サーブレットが @WebServlet("/hogeServlet") で動作→ ( http://127.0.0.1:8080/コンテキストパス/hogeServlet ) そこから、JSPへフォワードしていることから、

つまり表示しているJSPは、
サーブレット経由からは http://127.0.0.1:8080/コンテキストパス/hogeServlet で表示しているので、

../js/hoge.js の場合は、 http://127.0.0.1:8080/コンテキストパス/hogeServlet からの../js/hoge.js となり
http://127.0.0.1:8080/js/hoge.js になってしまいます。

投稿2018/11/13 13:05

A-pZ

総合スコア12007

回答へのコメント

mastan1117

2018/11/14 02:16

サーブレット側から呼び出したjspであろうともサーブレットから見たjsを指さないと読み込まないということでしょうか？とにかく、回答くださった内容に差し替えて実行してみるとちゃんと読み取れるようになりました。ありがとうございました。

A-pZ

2018/11/14 06:14

サーブレットから「フォワード」しているので、相対パスはリクエストしたURLからのものになります。

mastan1117

2018/11/14 09:16

そういう事なのですね。また一つ勉強になりました。恐らくWebシステムの初歩中の初歩のような質問をしてしまったかと思いますがありがとうございました。

A-pZ

2018/11/14 13:20

d(・ω・だいじぶです

jsp直実行時とサーブレット経由での実行時でURLが違ったりしませんか？

試しに
../js/hoge.js（相対パス）
を
/js/hoge.js（同一ドメイン内の絶対パス）
に変更したらどうなりますか？

投稿2018/11/13 12:23

nak

総合スコア696

回答へのコメント

mastan1117

2018/11/14 02:57

確かにサーブレット経由から実行した場合とJSP直実行の場合ではURLが違います。相対パスから絶対パスに変更した結果、jsが動いているのは確認できましたが、デベロッパーツールでは jsが見つからないというエラーがなぜか出てしまいます・・・キャッシュ等の問題かもしれません。何はともあれ、回答ありがとうございました。

15分調べてもわからないことは
teratailで質問しよう！