jsp including CSS&JS <%@ include %> vs <script>

Question

JSP is new to me, and I would like to know exactly the difference between these 2 tags when it comes to importing a JS or CSS file.

What I've tested is we can use both of them for including files in the JSP.

But with

<script src = "../js/someJavaScript.js"></script>

the file must be out of the WEB-INF folder, while with

<%@include file = "../js/someJavaScript.js"%>

I can access the js file in the WEN-INF folder, but when I tried to include the jquery-library, I got this error:

org.apache.jasper.JasperException: Impossible de compiler la classe pour la JSP: 

An error occurred at line: 56 in the generated java file
The code of method _jspService(HttpServletRequest, HttpServletResponse) is exceeding the 65535 bytes limit

Stacktrace:
    at org.apache.jasper.compiler.DefaultErrorHandler.javacError(DefaultErrorHandler.java:92)
    at org.apache.jasper.compiler.ErrorDispatcher.javacError(ErrorDispatcher.java:330)
    at org.apache.jasper.compiler.JDTCompiler.generateClass(JDTCompiler.java:443)
    at org.apache.jasper.compiler.Compiler.compile(Compiler.java:356)
    at org.apache.jasper.compiler.Compiler.compile(Compiler.java:334)
    at org.apache.jasper.compiler.Compiler.compile(Compiler.java:321)
    at org.apache.jasper.JspCompilationContext.compile(JspCompilationContext.java:592)
    at org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:328)
    at org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:313)
    at org.apache.jasper.servlet.JspServlet.service(JspServlet.java:260)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:723)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
    at org.apache.catalina.core.ApplicationDispatcher.invoke(ApplicationDispatcher.java:646)
    at org.apache.catalina.core.ApplicationDispatcher.processRequest(ApplicationDispatcher.java:436)
    at org.apache.catalina.core.ApplicationDispatcher.doForward(ApplicationDispatcher.java:374)
    at org.apache.catalina.core.ApplicationDispatcher.forward(ApplicationDispatcher.java:302)
    at org.springframework.web.servlet.view.InternalResourceView.renderMergedOutputModel(InternalResourceView.java:238)
    at org.springframework.web.servlet.view.AbstractView.render(AbstractView.java:262)
    at org.springframework.web.servlet.DispatcherServlet.render(DispatcherServlet.java:1180)
    at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:950)
    at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:852)
    at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:882)
    at org.springframework.web.servlet.FrameworkServlet.doGet(FrameworkServlet.java:778)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:617)
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:723)
    at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
    at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
    at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
    at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
    at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:127)
    at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:103)
    at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
    at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:293)
    at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:861)
    at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:606)
    at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:489)
    at java.lang.Thread.run(Thread.java:619)

Does the CSS & JS file has to be outside of the WEB-INF folder?

And I know there are also <%@include file="../../*.jsp"/> and <jsp:include page="../../*.jsp"/> for including another jsp.

Can someone explain the differences?

Answer 1

The difference is that <script src = "../js/someJavaScript.js"></script> puts that exact HTML in the output and the browser does another call to the server to fetch the JS file. While <%@include file = "../js/someJavaScript.js"%> puts the content of the JS file in the output, which means you need to wrap script tags around it: <script><%@include file = "../js/someJavaScript.js"%></script>. Its better to use the first method, since printing a bunch of Javascript in the HTML file itself is messy and doesn't look professional, and its a waste of bandwidth. When I say "HTML file itself" I mean the HTML returned by the main JSP to the browser. View your source in the browser to see the difference.

Does the CSS & JS file has to be outside of the WEB-INF folder?

Of course everything in WEB-INF is available to the server-side code. But nothing under WEB-INF is directly accessible to the client unless mapped in web.xml, so when you reference javascript/css in the way that requires the browser to do another call to fetch it (the preferable way) it will fail if you have the CSS/JS under WEB-INF.

The code of method _jspService(HttpServletRequest, HttpServletResponse) is exceeding the 65535 bytes limit

The error you got when trying to include the jquery library is because the JS file is really big. This is one reason it is preferable to reference the JS file and let the browser download it separately. Imagine if you literally included the text of a 65535 byte JS file in each page of your site! But if in each page you referenced the same and let the browser download it itself, the browser could cache it and not have to download it each time. It saves bandwidth.