Question

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

通过检查bean中的user / pw并设置适当的重定向

来完成登录

<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。

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

使用此解决方案是否存在重大缺陷？我应该小心什么？

感谢您的任何意见！

Answer 1

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

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

- ＆GT;我认为1和4是问题最多的部分：

1：网址

网址会怎样？考虑到书签和浏览器的后退按钮，这很重要。因此，您应该使用＃-values重写URL（jQuery可以使用window.location.hash轻松完成）。
e.g。您不应该为所有子页面保留your-domain.com/app，而是将网址更改为your-domain.com/app#sub-page-1
加载页面时，您可以解析＃-value并直接加载与该网址绑定的内容。

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

2：数据和模板

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

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

3：加载JavaScript和CSS

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

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

如果您在子页面上并输入URL以进入主页，则会加载旧的子页面。
如果您使用2个或更多标签浏览网站，则会导致冲突。

<强>结论

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

这样的事情：

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

JavaScript w / jQuery就是这样的：

     $(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);
                         }
                  });

          }) 

     });

完全由Ajax驱动的JSP Web App？里面的模板/骨架..有任何缺陷吗？

1 个答案: