1

我曾想过创建一个完全由 ajax 驱动的 Webapp。绝对不应该有提交/整页重新加载。

通过检查 bean 中的用户/密码并设置适当的重定向来完成登录

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<style>
.ui-widget {
font-size: 12px !important;
}
</style>

<title>myApp</title>
</h:head>
<h:body>
<h:form id="mainform">

    <ui:include src="#{navigationBean.currentPage}" />

</h:form>
</h:body>
</html>

navigationBean 始终包含用户会话（SessionScoped Managed Bean）的当前有效页面。如果有什么变化，我将通过相应的支持 ajax 的组件更新“mainform”，或者使用 f:ajax。

至于现在一切都按预期工作，但我错过了什么吗？

使用此解决方案是否存在主要缺点？我应该注意什么？

感谢您的任何意见！

4

1 回答 1

0

您可能需要考虑使用已经朝着这个方向发展的 javascript 解决方案，例如history.js angular.js或backbone.js

对于您的解决方案，您必须考虑：

--> 我认为1、4是最有问题的部分：

1：网址

  • URL 会发生什么？考虑到书签和浏览器的后退按钮，这一点很重要。window.location.hash因此你应该用#-values重写url（jQuery 可以很容易地做到这一点）。
  • 例如，您不应该保留your-domain.com/app所有子页面，而是将 URL 更改为your-domain.com/app#sub-page-1
  • 加载页面时，您可以解析 #-value 并直接加载与该 url 相关的内容。

这对于良好的用户体验很重要。重新加载页面并返回主页很糟糕！没有那个共享链接是不可能的。

2：数据和模板

在您的情况下<ui:include src="#{navigationBean.currentPage}" />，将在您的主页中加载另一个 jsf 页面。因此，您正在通过 ajax 加载模板 + 数据。

另一种可能的方法是从服务器加载数据并使用 JavaScript 将数据和模板放在一起。这种技术现在很流行。（像 angular.js 这样的 JavaScript 框架会这样做。）这也有缺点，因为您的页面将非常依赖 JavaScript，并且您几乎会因此而放弃 JSF。

3：加载 JavaScript 和 CSS

如果您有带有附加 CSS 或 JavaScript 文件的子页面，您应该检查是否可以通过 ajax 加载它们（通常可以，但需要一些工作）。如果没有，您必须在页面的第一次请求时加载所有相关文件，这会使初始加载速度变慢。

4：将当前页面存储在bean中 我认为没有必要，如果您使用1. 使用bean（SessionScoped？）存储当前页面，这有一些缺点：

  • 如果您在子页面上并输入 URL 以访问主页，它将加载旧的子页面。
  • 如果您使用 2 个或更多选项卡浏览您的网站，这将导致冲突。

结论

写完之后，我觉得将当前页面存储在一个bean中并不是一个好主意。因为它会引起冲突。我建议在 url 中“存储”当前页面。

像这样的东西：

  <div id="nav">
          <a href="javascript:void(0)" id="sub-page-1">sub-page-1</a>
  </div>
  <div id="main"></div>

带有 jQ​​uery 的 JavaScript 将是这样的：

     $(function() {
          $('#sub-page-1').click(function() {

                  $.ajax({
                         ...
                         url: '/sub-page-1' // could be jsf page
                         success: function (data) {
                               // set the hash of this page
                               window.location.hash = 'sub-page-1';
                               // set the content on the main div
                               $('#main').html(data);
                         }
                  });

          }) 

     });
于 2013-10-20T11:19:34.193 回答