一尘不染

如何在基于ajax的网站和基本的HTML网站之间轻松切换?

jsp

我有一个网站(基于JSP /
Servlet,使用MVC模式),并且希望支持基于AJAX的网站和基于HTML的基本网站。网站访问者应该能够将冲浪模式从Ajax更改为基本HTML,反之亦然,这适用于Google邮件。

问题:

  • 轻松实现此目标的最佳方法是什么?
  • 我应该为每个页面设计两个视图吗?

我使用JQuery和JSON作为此答案的结果。


阅读 161

收藏
2020-06-08

共1个答案

一尘不染

您需要不干扰Javascript,这是Progressive
Enhancement的
一部分。

首先,开始创建 功能全面的 Web应用程序, 而无需使用
任何Java语言。一旦开始工作,然后开始编写Javascript代码,即可“接管”原始HTML工作, 而无需 更改任何HTML /
CSS行。在服务器端代码中,您需要 添加
逻辑以识别请求是否已被JavaScript触发并相应地返回响应。您可以通过启用/禁用Web浏览器中的JavaScript来测试这两种情况。在Firefox中,使用WebDeveloper Toolbar很容易。

例如,您具有包含所有HTML链接的邮件列表,其中应显示邮件正文:

<a href="mail/show/1" class="show">Message title</a>

如果没有JavaScript,这将向servlet发出HTTP请求,该servlet加载由标识的邮件1,将请求转发给JSP,后者在视图中隐藏消息列表并在视图中显示邮件。

使用JavaScript / jQuery,您需要编写在Ajax的帮助下完全相同的代码,例如:

$('a.show').click(function() {
    $.getJSON(this.href, callbackFunctionWhichHidesListAndShowsMail);
    return false;
});

在服务器端,您必须区分普通请求和ajax请求,以便可以相应地返回响应。

boolean ajax = "XMLHttpRequest".equals(request.getHeader("x-requested-with"));

// ...

if (ajax) {
    writeJson(response, mail);
} else {
    request.setAttribute("mail", mail);
    request.getRequestDispatcher("/WEB-INF/mail.jsp").forward(request, response);
}

最后,要为用户提供手动切换模式的选项,您必须设置一个cookie或最好(由于cookie被禁用)在URL中传递一些信息(pathinfo或request参数),从而迫使服务器禁用发送<script>线路。

2020-06-08