How to do a SPA using servlets and jsp?

 

I'm trying to do a single page application using servlets and jsp pages. For the moment I have the first page, which is simple to do: a servlet that forwards to the corresponding jsp.

How should the implementation look when navigating to the second page? I guess it should be an ajax call, the servlet would populate the necessary data, but how to display the second page jsp?

JSP is a server side ui technology. A Servlet listens to specific urls and redirects to JSPs pages. The JSP is compiled to a class (another servlet in fact), invoked (data will be added and inline scripts will run) and the output, whith is HTML, is send to the client (browser). To get to a different page its neccessary to query the server (servlet) for another url, resulting in another html page.

To create an SPA you need a client side technology like JavaScript. Your query the server for a single html page. The page, made of HTML and JavaScript, for example, (could even be the output of a single JSP, dont get confused) is send to the client (browser) and the JS is run. This is nomaly backed up by a framework like AngularJS, EmberJS or Backbone . Once the page is set up, the links within the page are anchors (http://example.com/ # /mySecondPage), so clicking them will invoke the framework again (Ajax, querying the server for new data), but will stay on the same page. Some contents of the page might then be replaced by new content.

If it is a true SPA then you would just have a single JSP and handle all your functionality (after your initial page load) using Ajax.

Have you looked at using a client-side framework such as Angular to help you with this?

Depending on how rich your SPA is, you could either use the same servlet or multiple servlets to serve each page.

Unless you are doing this for a course or tutorial and have some constraints on how to achieve it, you will very probably save yourself a lot of time if you couple something like Angular with a server-side framework like Spring instead of coding servlets. As a suggestion have a look at Spring with Angular.

In SPA the browser only loads the document once (or a few, once per sub-application), and further communication to the server is done usually via AJAX or Websockets.

I recommend you to model your application as a thin server architecture, that is, a client application running in the browser (HTML, CSS, Javascript) consuming a web service API provided by the server.

The following are some points worth knowing;

  • Client-side:

  • Only presentation logic
  • Represent state by URL hash. This enables bookmarking, hyperlinking and browsing history. Your client app should listen to changes in the URL hash and act in consequence. This technique is called "routing" and it is implemented by all Javascript frameworks.
  • Client application is packaged server-side such it can be downloaded in a single request (in .html, .jsp, servlet, .jsp + multiple .jspf, ...)
  • Consumes services provided by the server via AJAX or Websockets

  • Server:

  • Offers client application to download
  • Provides a clean, stateless API to be consumed by the client application, better returning JSON (data) than HTML (presentation logic) (Why is it a bad practice to return generated HTML instead of JSON? Or is it?)
  • Use a REST or JSON-RPC frameworks to create the API. There is a lot of debate on what to choose (see here or here). In my opinion the only advantage of REST over RPC is that since REST has become a "de facto" standard its interoperability is higher, so my recommendation for SPA applications is using JSON-RPC, because your code is the only client of the API.

    • There are lots of alternatives for both client and server frameworks.

    Javascript: AngularJS, EmberJS or Backbone,...

    REST: Spring, Jersey, Restlet,..

    JSON-RPC: https://en.wikipedia.org/wiki/JSON-RPC#Implementations

    Regarding JSON-RPC, I personally recommend you Brutusin-RPC, a JEE microframework I have created that has unique features, like including a service repository browser that allows to see the set of services deployed, their characteristics, documentation, and even test them. This functional testing module (see this demo) is in itself a SPA that makes use of set of builtin descriptor services provided by the framework, so it also can give some hints for your application.

    Cheers, Nacho

    链接地址: http://www.djcxy.com/p/47892.html

    上一篇: 在jquery中加载大量数据

    下一篇: 如何使用servlets和jsp进行SPA？