Comment fonctionne AJAX?

Quelle est l'essence d'AJAX? Par exemple, je souhaite avoir un lien sur ma page de telle sorte que lorsqu'un utilisateur clique sur ce lien, certaines informations sont envoyées à mon serveur sans le rechargement de la page en cours. Est-ce AJAX?

J'ai pu obtenir ce comportement en utilisant des isoframes. En plus de détails, j'ai mis un lien (disons une petite image) dans une petite isoframe. Lorsque l'utilisateur clique sur ce lien, le navigateur recharge uniquement la page dans l'isoframe.

Cependant, je pense que ce n'est pas une manière élégante d'atteindre l'objectif. Je pense que je dois utiliser AJAX. Comment ça marche? Une utilisation de XHTML peut-elle résoudre le problème considéré de manière élégante? Ou dois-je utiliser JavaScripts?

Je n'ai pas besoin de beaucoup. Je veux juste avoir un petit lien qui (après avoir cliqué) envoie des informations au serveur. Disons que j'ai une "image d'étoile" près d'un message. Si un utilisateur clique sur l'étoile (il aime le message), l'étoile change la couleur et ma base de données de mise à jour de serveur (pour se souvenir que l'utilisateur aime le message).

Si vous êtes totalement nouveau dans AJAX (qui signifie Asynchronous Javascript And XML), l' entrée AJAX sur wikipedia est un bon point de départ:

Comme DHTML et LAMP, AJAX n'est pas une technologie en soi, mais un groupe de technologies. AJAX utilise une combinaison de:

• HTML et CSS pour le balisage et le style des informations.
• Le DOM accédé avec JavaScript pour afficher et interagir dynamiquement avec les informations présentées.
• Une méthode pour échanger des données de manière asynchrone entre le navigateur et le serveur, évitant ainsi les recharges de page. L'objet XMLHttpRequest (XHR) est généralement utilisé, mais parfois un objet IFrame ou une balise ajoutée dynamiquement est utilisée à la place.
• Un format pour les données envoyées au navigateur. Les formats courants incluent XML, HTML pré-formaté, texte brut et JavaScript Object Notation (JSON). Ces données peuvent être créées dynamiquement par une forme de script côté serveur.

Comme vous pouvez le voir, d'un point de vue purement technologique, il n'y a rien de vraiment nouveau ici. La plupart des pièces AJAX étaient déjà là en 1994 (1999 pour l' XMLHttpRequestobjet). La vraie nouveauté était d'utiliser ces pièces ensemble comme Google l'a fait avec GMail (2004) et Google Maps (2005). En fait, les deux sites ont fortement contribué à la promotion d'AJAX.

Une image valant mille mots, sous un schéma qui illustre la communication entre le client et le serveur distant, ainsi que les différences entre les applications classiques et basées sur AJAX:

Pour la partie orange, vous pouvez tout faire à la main (avec l' XMLHttpRequestobjet) ou vous pouvez utiliser des bibliothèques JavaScript célèbres comme jQuery , Prototype , YUI , etc. pour "AJAXifier" le côté client de votre application. Ces bibliothèques visent à masquer la complexité du développement JavaScript (par exemple, la compatibilité entre navigateurs), mais pourraient être excessives pour une fonctionnalité simple.

Côté serveur, certains frameworks peuvent également aider (par exemple DWR ou RAJAX si vous utilisez Java), mais tout ce que vous avez à faire est essentiellement d'exposer un service qui ne renvoie que les informations requises pour mettre à jour partiellement la page (initialement en XML / XHTML - le X en AJAX - mais JSON est souvent préféré de nos jours).

L'essence d'AJAX est la suivante:

Vos pages peuvent naviguer sur le Web et mettre à jour leur propre contenu pendant que l'utilisateur fait autre chose .

Autrement dit, votre javascript peut envoyer des requêtes GET et POST asynchrones (généralement via un XMLHttpRequestobjet) puis utiliser les résultats de ces requêtes pour modifier sa page (via la manipulation du modèle d'objet de document ).

AJAX implique généralement l'envoi de requêtes HTTP du client au serveur et le traitement de la réponse du serveur, sans recharger la page entière. (De manière asynchrone).

Javascript effectue généralement la soumission et reçoit la réponse des données du serveur (traditionnellement XML, souvent d'autres formats moins verbeux comme JSON)

Le Javascript peut alors mettre à jour la page DOM de manière dynamique pour mettre à jour la vue de l'utilisateur.

Ainsi 'Asychronous Javascript And XML'.

Il existe d'autres options pour mettre à jour la vue de l'utilisateur sans recharger la page, des choses comme Flash et Applets, mais cela ne semble pas être de bonnes solutions pour votre cas. On dirait que Javascript est la voie à suivre. Il y a beaucoup de bons supports de bibliothèques, comme jQuery tel qu'il est utilisé sur ce site, vous n'avez donc pas besoin d'écrire beaucoup de Javascript vous-même.

Ajax est plus que recharger juste une partie de la page. Ajax signifie Asynchronous Javascript And Xml.

La seule partie d'Ajax dont vous avez besoin est l' objet XMLHttpRequest de javascript. Vous devez l'utiliser pour charger et recharger une petite partie de votre html en tant que div ou toute autre balise.

Lisez cet exemple et vous serez pro plus tôt que vous le pensez!

<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {
  // code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
else
  {
  alert("Your browser does not support XMLHTTP!");
  }
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {
  document.myForm.time.value=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","time.asp",true);
xmlhttp.send(null);
}
</script>

<form name="myForm">
Name: <input type="text" name="username" onkeyup="ajaxFunction();" />
Time: <input type="text" name="time" />
</form>

</body>
</html>

AJAX signifie Javascript asynchrone et XML. AJAX prend en charge les mises à jour partielles des pages sans avoir à publier la page entière sur le serveur.

Il existe de nombreuses options pour AJAX. Les deux plus notables (sans doute) sont ASP.NET AJAX de Microsoft (anciennement Atlas) et jQuery.

ASP.NET AJAX est relativement facile à configurer si vous êtes déjà familiarisé avec ASP.NET. jQuery est bon si vous connaissez déjà javascript et permet un contrôle très granulaire sur l'interrogation et la mise à jour de votre page.

HTH

Si vous êtes intéressé, IBM a une série de 10 (peut-être plus) parties sur Ajax: Mastering Ajax partie 1

Bien qu'il ait maintenant quelques années, c'est une bonne intro, (même si vous venez de lire la première partie!)

Je pense que toute la série devrait être listée ici , bien que le site soit un peu lent pour moi pour le moment ...

Résumé:

Ajax, qui comprend HTML, la technologie JavaScript ™, DHTML et DOM, est une approche exceptionnelle qui vous aide à transformer des interfaces Web maladroites en applications Ajax interactives. L'auteur, un expert Ajax, démontre comment ces technologies fonctionnent ensemble - d'une vue d'ensemble à une vue détaillée - pour faire d'un développement Web extrêmement efficace une réalité facile. Il dévoile également les concepts centraux d'Ajax, y compris l'objet XMLHttpRequest.

c'est ajax. vous ne pouvez pas utiliser ajax sans javascript. vous devriez regarder des exemples de jquery et de prototype pour avoir une idée de l'utilisation.

Ce que vous essayez de faire est techniquement ajax. Ajax crée des transactions de fragment xhtml pour mettre à jour des sections d'une page. Javascript rend ces demandes de réception agréables et soignées.