¿Cómo cambiar fácilmente entre un sitio web basado en Ajax y un sitio web HTML básico?

Tengo un sitio web (basado en JSP / Servlets, usando el patrón MVC), y quiero apoyar el sitio web basado en AJAX y el sitio web básico basado en HTML. Los visitantes del sitio web deberían poder cambiar el modo de navegación de Ajax a HTML básico y viceversa, tal como se aplica en Google-mail.

Las preguntas :

  • ¿Cuál es la mejor manera de lograr este objective fácilmente?
  • ¿Debo diseñar dos vistas para cada página?

Uso JQuery y JSON como resultado de esta respuesta .

Necesita un Javascript discreto , que es parte de la mejora progresiva .

Primero, comience a crear una aplicación web completamente funcional sin ninguna línea de Javascript. Una vez que lo haya hecho funcionar, entonces comience a escribir el código Javascript que “toma el control” del trabajo HTML sin cambiar ninguna línea de HTML / CSS. En el código del lado del servidor, debe agregar lógica que reconozca si la solicitud ha sido activada por JavaScript o no y devuelva la respuesta en consecuencia. Puede probar ambos casos al activar / desactivar JavaScript en el navegador web. En Firefox es fácil con Web Developer Toolbar .

Por ejemplo, tiene una lista de correos con todos los enlaces HTML que deben mostrar el cuerpo del correo:

Message title 

Sin JavaScript, esto dispararía una solicitud HTTP al servlet que carga el correo identificado por 1 , reenvía la solicitud a un JSP que oculta la lista de mensajes en la vista y muestra el correo en la vista.

Con JavaScript / jQuery, necesita escribir un código que haga exactamente lo mismo con la ayuda de Ajax, por ejemplo:

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

En el lado del servidor, debe distinguir entre las solicitudes normales y las solicitudes ajax para que pueda devolver la respuesta en consecuencia.

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

Finalmente, para darle al usuario la opción de cambiar entre modos manualmente, debe establecer una cookie o preferiblemente (dado que las cookies son desactivables) pasar información en URL (información de ruta o parámetro de solicitud) lo que obliga al servidor a desactivar la emisión del líneas.

Piensa en la versión html como base. Construye esto primero.

Luego, superponga la funcionalidad adicional de ajax como una capa opcional en la parte superior de esta, interceptando los comportamientos html predeterminados según sea necesario. No es necesario tener dos vistas, solo una vista que gradualmente agrega funcionalidad mejorada según la tecnología disponible y / o las preferencias del usuario.

Estás intentando con sensatez una mejora progresiva . Hay un excelente artículo aquí A List Apart: Entender la mejora progresiva, que debo dar crédito a esto SO Answer for; Graceful Degredation cuando considerar . Considero que Graceful Degredation es la forma más negativa de ver el problema de soportar diferentes capacidades del navegador; ¿Cuál es la diferencia entre la mejora progresiva y la degradación agraciada?