2010-04-08 6 views
4

J'ai un site Web (basé sur JSP/Servlets, en utilisant le modèle MVC), et je veux soutenir le site Web basé sur AJAX et le site Web HTML de base. Les visiteurs du site devraient pouvoir changer le mode de navigation d'Ajax en HTML de base et vice versa, - comme cela s'applique dans Google-mail.Comment passer facilement d'un site Web basé sur AJAX à un site HTML de base?

Les questions:

  • Quelle est la meilleure façon d'atteindre cet objectif facilement?
  • Dois-je concevoir deux vues pour chaque page? J'utilise JQuery et JSON comme résultat de cette answer

Répondre

5

Vous avez besoin de Unobtrusive Javascript, qui fait partie de Progressive Enhancement.

Tout d'abord, commencer à créer un entièrement fonctionnel webapplication sans une ligne de Javascript. Une fois que vous l'avez fait fonctionner, alors commencez à écrire le code Javascript qui "reprend" le travail HTML brut sans en changeant n'importe quelle ligne de HTML/CSS. Dans le code côté serveur, vous devez ajouter logique qui reconnaît si la requête a été déclenchée par JavaScript ou non et renvoyer la réponse en conséquence. Vous pouvez tester les deux cas en activant/désactivant JavaScript dans le navigateur Web. Dans Firefox, c'est facile avec Web Developer Toolbar.

Par exemple, vous avez une liste de mails avec tous les liens HTML qui devrait montrer le corps du message:

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

Sans JavaScript, cela déclenche une requête HTTP au servlet qui charge le courrier identifié par 1 , transmet la demande à un JSP qui masque la liste des messages dans la vue et affiche le courrier dans la vue.

Avec JavaScript/JQuery, vous avez besoin d'écrire du code qui fait exactement la même chose avec l'aide d'Ajax, par exemple:

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

Du côté du serveur, vous devez établir une distinction entre les demandes normales et les demandes de ajax afin que vous peut renvoyer une réponse en conséquence.

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

Enfin, pour donner à l'utilisateur une option pour basculer entre les modes manuellement, vous devez définir un cookie ou de préférence (puisque les cookies sont disableable) passer des informations dans l'URL (pathinfo ou paramètre de requête) qui force le serveur pour désactiver l'émission des lignes <script>.

+2

... puis de laisser un utilisateur choisir la version HTML de base, avoir un paramètre de cookie qui ne sert pas le JS qui fait Ajax (ou tout ce qui en dépend). – Quentin

+2

[Amélioration progressive] (http://en.wikipedia.org/wiki/Progressive_enhancement) est un autre terme qui illustre ce que vous voulez accomplir ... construire les bases sans ajax d'abord, puis superposer des fonctionnalités supplémentaires en plus de cela pour améliorer l'expérience de l'utilisateur. – ChrisR

+0

Vous avez tous les deux raison, j'ai mis à jour la réponse en conséquence. – BalusC

5

Pensez à la version html comme base. Construis ça en premier. Ensuite, superposez la fonctionnalité ajax supplémentaire en tant que couche facultative, en interceptant les comportements html par défaut si nécessaire. Pas besoin de deux vues, juste une vue unique qui ajoute progressivement des fonctionnalités améliorées en fonction de la technologie disponible et/ou de la préférence de l'utilisateur.

Questions connexes