fritzthecat-blog: November 2022

JSP means "Java Server Page". This is one of the oldest ways to build web applications using the programming language Java. In a JSP page you mix XML-compatible HTML code with JSP tags and Java code nested in them.

In this Blog I would like to present a minimal JSP app. There will be no Java class, just HTML, JSP tags and nested Java code. The page will render a page hit count and a form submit history.

I started this project to explore the double submit problem that occurs with Chrome 107.0 browser, and maybe others, although not with Firefox 107.0.

Preparation

You will have to install Java and Maven. Check that both are in your PATH environment variable.

Generate Application with Maven

On a command line window, enter the following commands:

cd directory-where-you-have-your-projects
mvn archetype:generate \
  -DarchetypeArtifactId=maven-archetype-webapp \
  -DgroupId=my.web.examples \
  -DartifactId=simplewebapp \
  -DinteractiveMode=false

This will generate a new directory "simplewebapp" in current directory and put a minimal set of sources into it. You could then import this into your IDE as "Maven Project", although a simple text editor will be enough for now.

Install and Run Jetty Web Server

Then put following Maven plugin into the <build> section in pom.xml file in directory "simlewebapp":

    <plugins>
      <plugin>
        <groupId>org.eclipse.jetty</groupId>
        <artifactId>jetty-maven-plugin</artifactId>
        <version>11.0.12</version>
        <configuration>
          <scanIntervalSeconds>2</scanIntervalSeconds>
          <webApp>
            <contextPath>/simplewebapp</contextPath>
          </webApp>
          <httpConnector>
            <port>8080</port>
          </httpConnector>
        </configuration>
      </plugin>
    </plugins>

Dont forget to save that edit.
This will enable you to quickly run a web server from command line. Try it out by entering following commands:

cd simplewebapp
mvn jetty:run

You should see something like "[INFO] Started Server ...." at end of output. Now open a new tab in your web browser and enter following URL in its address line:

http://localhost:8080/simplewebapp/

You should see what is in simplewebapp/src/main/webapp/index.jsp: "Hello World!".

Edit the JSP Page

In a text editor, load the file index.jsp and put following code into it:

<html>
<body>
    <%
        Thread.sleep(1000); // simulate slow request processing
        
        Integer hitsCount = (Integer) application.getAttribute("hits");
        if (hitsCount == null)
            hitsCount = 0;
            
        hitsCount++;
        
        application.setAttribute("hits", hitsCount);

        String submitInput = request.getParameter("single-line-text");
        if (submitInput == null)
            submitInput = "";
        else if (submitInput.length() <= 0)
            submitInput = "&lt;empty&gt;";
            
        String submitHistory = (String) application.getAttribute("submits");
        if (submitHistory == null)
            submitHistory = "";
        
        submitHistory += " "+submitInput;
        
        application.setAttribute("submits", submitHistory);
    %>

    <p>
        Page Hits: <%= hitsCount %>
    </p>
    
    <p>
        Submitted Text: <%= submitHistory %>
    </p>
    
    <form action="http://localhost:8080/simplewebapp/" method="post">
        <input name="single-line-text">
        <input type="submit" value="Submit">
    </form>
      
</body>
</html>

Please mind the Thread.sleep(1000) on line 4. I added this to simulate slow request processing. If you want to test for double submit, you will need this.

If you are interested in the different techniques used here, please refer to the JSP documentation, explaining them would go beyond the scope of this article.

Save the edit to disk. Maybe you have to stop and restart the Jetty server. Now reload http://localhost:8080/simplewebapp/. You should see this:

Page Hits: 1

Submitted Text:

Try it out

Any time you enter something in the text field and then press the "Submit" button, you should see the "Page Hits" increase and the "Submitted Text" grow by your latest input. After entering "one", clicking "Submit" once, then entering "two" and again clicking "Submit" once, it should look like this:

Page Hits: 3

Submitted Text: one two

Test Double Submit in Different Browsers

You can provoke the double submit problem by quickly clicking the "Submit" button several times until the response is rendered. By default, the browser will refresh the page when a form submission event is triggered. Due to the Thread.sleep(1000) on line 4 of the JSP page it will take a second until the response arrives.

Doing multiple clicks in Firefox I could not achieve several submits.

But doing this in Google Chrome I could achieve it. After entering "one" and a quick double click onto "Submit" it looked like this:

Page Hits: 3

Submitted Text: one one

Resume

This proves that the double submit problem is browser-specific. We need to prevent this by adding JavaScript code, which I will present in my next Blog.

fritzthecat-blog

Blog-Archiv

Dienstag, 29. November 2022

A JSP Application to Test Double Submit