Comment fonctionne AJAX?

Question

Quelle est l'essence de l'AJAX? Par exemple, je veux avoir un lien sur ma page de sorte que lorsqu'un utilisateur clique sur ce lien, l'information est envoyée à mon serveur sans recharger la page en cours. C'est que l'AJAX?

J'ai été en mesure d'obtenir ce comportement à l'aide de isoframes. Dans plus de détails, j'ai mis un lien (disons une petite image) dans un petit isoframe. Lorsque l'utilisateur clique sur ce lien, le navigateur recharge uniquement de la page dans le isoframe.

Cependant, je pense qu'il n'est pas un moyen élégant pour atteindre l'objectif. Je pense que je dois utiliser AJAX. Comment ça fonctionne? Pouvez un de l'utilisation de XHTML résoudre le problème de façon élégante? Ou dois-je utiliser Javascript?

Je n'ai pas besoin de beaucoup. Je veux juste avoir un petit lien qui (après avoir cliqué) envoyé quelques informations au serveur. Disons que j'ai un "star-image" à proximité d'un message. Si un utilisateur, cliquez sur les étoiles (il/elle aime le message) star modifications de la couleur et mon serveur de mise à jour de la base de données (pour se rappeler que l'utilisateur aime le message).

Answer 1

Si vous êtes totalement nouveau pour AJAX (qui signifie signifie Asynchronous Javascript and XML), l' AJAX d'entrée 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 marquage et informations sur le style.
• Le DOM accessible avec JavaScript dynamiquement l'affichage et l'interaction avec l'information présentée.
• Une méthode pour échanger des données de manière asynchrone entre le navigateur et le serveur, ce qui en évitant la page est rechargée. L' XMLHttpRequest (XHR) de l'objet est généralement utilisé, mais parfois un objet IFrame ou un tag est ajouté dynamiquement utilisé à la place.
• Un format pour les données envoyé au navigateur. Commune de formats inclure XML, pré-formaté en HTML, plaine texte, et JavaScript Object Notation (JSON). Ces données pourraient être créés dynamiquement par une certaine forme de de script côté serveur.

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

Une image valant mille mots, ci-dessous un schéma qui illustre la communication entre le client et le serveur distant, ainsi que les différences entre le classique et l'AJAX applications:

Pour l'orange, que vous pouvez faire tout à la main (avec l' XMLHttpRequest objet) ou vous pouvez utiliser la célèbre librairies JavaScript comme jQuery, Prototype, YUI, etc "AJAXify" le côté client de votre application. Ces bibliothèques ont pour objectif de masquer la complexité de développement JavaScript (par exemple, la compatibilité multi-navigateurs), mais peut-être exagéré pour une simple fonctionnalité.

Sur le côté serveur, certains cadres peuvent aussi aider (par exemple, la DSR ou RAJAX si vous utilisez Java), mais tout ce que vous devez faire est d'exposer un service qui retourne uniquement les informations demandées partiellement mise à jour de la page (à l'origine comme XML/XHTML - X en AJAX mais JSON est souvent préférée de nos jours).

Answer 2

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

Javascript n'a généralement la présentation et reçoit les données de réponse du serveur (traditionnellement XML, souvent, d'autres moins verbeux formats JSON)

Le Javascript peut alors mettre à jour la page DOM dynamique à la mise à jour de l'utilisateur.

Ainsi, les Asychronous Javascript Et XML".

Il y a d'autres options pour mettre à jour la vue qu'a l'utilisateur sans recharger la page, des choses comme Flash et les Applets, mais elles ne ressemblent pas à de bonnes solutions pour votre cas. Sonne comme Javascript est le chemin à parcourir. Il y a un tas de bonnes bibliothèque de support, comme jQuery est utilisé sur ce site, donc vous n'avez pas besoin d'écrire beaucoup de code Javascript vous-même.

Answer 3

L'essence de l'AJAX est ceci:

Vos pages peuvent naviguer sur le web et de mettre à jour leur propre contenu, tout en l'utilisateur est en train de faire d'autres choses.

Voilà, votre javascript peut envoyer asynchrone GET et POST demandes (généralement par l'intermédiaire d'un XMLHttpRequest objet), puis utiliser les résultats de ces requêtes à modifier sa page (via le Modèle Objet de Document de manipulation).

Answer 4

Ajax est plus que recharger juste une partie de la page. Ajax est synonyme de Javascript asynchrone et 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 code 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>
 

Answer 5

AJAX signifie Asynchronous Javascript et XHTML. AJAX prend en charge partielle des mises à jour des pages sans avoir à déposer l'ensemble de la page sur le serveur.

Il y a beaucoup d'options pour l'AJAX. Les deux plus notables (sans doute) sont de Microsoft ASP.NET AJAX (anciennement Atlas) et jQuery.

ASP.NET AJAX est relativement facile à mettre en place si vous êtes déjà familier avec ASP.NET. jQuery est bon si vous savez déjà javascript, et permet un contrôle très précis sur l'interrogation et la mise à jour de votre page.

HTH