如何輕鬆地在基於ajax的網站和基本的HTML網站之間切換？

Question

我有一個網站（基於JSP/Servlets，使用MVC模式），我想支持基於AJAX的網站和基於HTML的基本網站。網站訪問者應該能夠將瀏覽模式從Ajax更改爲基本HTML，反之亦然 - 正如Google郵件中所述。

的問題：

• 什麼是輕鬆實現這一目標的最佳方式是什麼？
• 我應該爲每個頁面設計兩個視圖嗎？

我使用JQuery和JSON作爲此answer的結果。

Answer 1

您需要Unobtrusive Javascript，這是Progressive Enhancement的一部分。

首先，開始創建一個全功能 web應用程序沒有任何行的Javascript。一旦你得到它的工作，然後開始編寫「接管」原始HTML工作沒有更改任何HTML/CSS行的JavaScript代碼。在服務器端代碼中，您需要添加邏輯，它可以識別請求是否已被JavaScript觸發並相應地返回響應。您可以通過在瀏覽器中禁用JavaScript來測試這兩種情況。在Firefox中，使用Web Developer Toolbar很容易。

例如，你有郵件與所有HTML鏈接的列表應該顯示郵件正文：

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

沒有JavaScript，這將觸發一個HTTP請求，它加載由1識別的郵件中的servlet ，將請求轉發給JSP，該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或請求參數），其迫使服務器禁用發射<script>行。

Answer 2

認爲html版本是基礎。先建立這個。

然後在其上覆蓋額外的ajax功能作爲可選層，根據需要攔截默認的html行爲。不需要兩個視圖，只需一個視圖即可根據可用技術和/或用戶偏好逐漸添加增強的功能。

Answer 3

你很明智地嘗試Progressive Enhancement。這裏有一篇很好的文章A List Apart: Understanding Progressive Enhancement，我必須讚揚這個SO答案; Graceful Degredation when to consider。我認爲Graceful Degredation是考慮支持不同瀏覽器功能的更負面的方式; What is the difference between Progressive Enhancement and Graceful Degradation?