禁用 Javascript 时的 Ajax 回退

Posted 2023-03-15

【中文标题】禁用 Javascript 时的 Ajax 回退

【英文标题】：Ajax fallback when Javascript is disabled

【发布时间】：2012-02-01 20:09:43

【问题描述】：

问题： i) 在 JSF2 应用程序中，我想创建一个带有选项卡控件的页面，其中，当用户单击选项卡时，下面面板的内容通过 ajax 调用从服务器中的 xhtml 文件加载。 ii) 我希望它支持优雅降级（当 javascript 被禁用时），以便在单击选项卡时触发 HTTP 请求，并加载新页面......或者相反，通过渐进增强。

部分解决方案： i) 我想我可以通过 BalusC 在 How to ajax jsf 2 outputLink 中发布的代码示例来实现这一点：-

<h:form>
<f:ajax render=":include">
    <h:commandLink value="Home" action="#menuManager.setPage('home')" /><br />
    <h:commandLink value="FAQ" action="#menuManager.setPage('faq')" /><br />
    <h:commandLink value="Contact" action="#menuManager.setPage('contact')" /><br />
</f:ajax>

</h:form>
<h:panelGroup id="include">
    <ui:include src="#menuManager.page.xhtml" />
</h:panelGroup>

问题 我如何扩展它来解决问题（ii）或者还有其他完全不同的方法吗？我想也许我可以用 noscript 来实现这一点，但不知道怎么做！

编辑：可能的解决方案 - 尚待验证： 即使禁用了 ajax，上面的代码也应该可以工作；根据http://www.laliluna.de/articles/posts/jsf-2-evaluation-test.html，它应该只通过 HTTP 工作 :) 优雅的！我试试看。

【问题讨论】：

什么？您有禁用 Javascript 的用户吗？我宁愿升级用户...

您确定要投入大量时间和精力来处理浏览器禁用了 javascript 的用户吗？根据this Yahoo study，这大约是 1%。我只是说。

我需要支持广泛的用户，以及小屏幕设备（其中许多缺少 js）上的用户。我不会费心为此投入太多精力（重定向到我的应用程序的不同版本等），并通过代码重用尽可能多地做。因此我的问题。 :)

【参考方案1】：

如果你使用<h:commandButton> 而不是<h:commandLink>，那么在禁用 JS 时它会正常工作。无论如何，命令链接都需要 JS 才能提交“隐藏​​”的 POST 表单，无论是否经过 ajaxified。如有必要，您可以添加一些 CSS 以使命令按钮看起来像链接（例如，删除边框、背景、插图等）。

作为一个完全不同的替代方案，通过将页面用作请求参数或路径信息的<h:outputLink> 或<h:link> 来让它们获取请求，并使用jQuery.load() 代替不显眼地获取包含页面，提取相关部分并包含在 HTML DOM 树中。