質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

servlet

Servletとは、Webページの動的な生成やデータ処理などをサーバ上で実行するために、Javaで作成されたプログラムです。 ショッピングサイトやオンラインバンキングといった、動的なウェブサイトの構築に用いられています。

Q&A

解決済

2回答

32287閲覧

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

mastan1117

総合スコア16

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

servlet

Servletとは、Webページの動的な生成やデータ処理などをサーバ上で実行するために、Javaで作成されたプログラムです。 ショッピングサイトやオンラインバンキングといった、動的なウェブサイトの構築に用いられています。

0グッド

1クリップ

投稿2018/11/13 10:47

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

宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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

総合スコア12011

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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(・ω・ だいじぶです
guest

0

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が見つからないというエラーがなぜか出てしまいます・・・ キャッシュ等の問題かもしれません。 何はともあれ、回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問