Javascript Girl
  1. Javascript Girl
  3. Comment fonctionne AJAX?
Intereting Posts
La création d'un tableau constitué des valeurs les plus importantes de chaque sous-réseau ne fonctionne pas comme prévu Modification de la propriété largeur de a: avant le sélecteur css à l'aide de JQuery Conversion d'une date normale en format ISO-8601 Appelez la fonction javascript parental à partir d'un iframe Comment compiler les instructions SQL en Cordova? Fenêtre de fermeture après l'exécution d'une application Web Google Script? Envoi du contenu du dossier entier au client avec express Pourquoi la fonction de triage Javascript () ne donne-t-elle pas la sortie attendue? Comment récupérer le code de réponse XHR (+ timestamp) du Dojo AMD? Appel de la fonction de contrôleur AngularJS lorsque la vidéo html5 se termine Comment récupérer un objet json à partir d'une liste de points de partage Désactivation de pinch-zoom sur google maps Conditionnel sur un chaîné reporté dans jquery Qu'est-ce qui peut provoquer un "HIERARCHY_REQUEST_ERR: DOM Exception 3" -Error? Définition des en-têtes dans XDomainRequest ou ActiveXObject ('Microsoft.XMLHTTP')

Comment fonctionne AJAX?

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

J'ai pu obtenir ce comportement en utilisant isoframes. Dans plus de détails, je place un lien (disons une petite image) dans un petit 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 un moyen élégant d'atteindre le but. Je pense que je dois utiliser AJAX. Comment ça marche? Une utilisation de XHTML peut-elle résoudre le problème considéré d'une manière élégante? Ou dois-je utiliser JavaScripts?

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

Si vous êtes totalement nouveau pour AJAX (qui signifie Javascript asynchrone et 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 marquage et l'information de coiffage.
  • Le DOM a 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 rechargements de page. L'objet XMLHttpRequest (XHR) est habituellement utilisé, mais parfois, un objet IFrame ou une balise ajoutée dynamiquement est utilisé à la place.
  • Un format pour les données envoyées au navigateur. Les formats communs incluent XML, HTML préformaté, texte brut et notation d'objet JavaScript (JSON). Ces données pourraient être créées dynamiquement par une certaine forme de script côté serveur.

Comme vous pouvez le voir, d'un point de vue technologique pur, il n'y a rien de vraiment nouveau ici. La plupart des pièces AJAX étaient déjà là en 1994 (1999 pour l'objet XMLHttpRequest ). La vraie nouveauté était d'utiliser ces parties 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 vaut mille mots, sous un diagramme qui illustre la communication entre le client et le serveur distant, ainsi que les différences entre les applications classiques et les applications AJAX:

Texte alt

Pour la partie orange, vous pouvez tout faire à la main (avec l'objet XMLHttpRequest ) ou vous pouvez utiliser des bibliothèques JavaScript célèbres comme jQuery , Prototype , YUI , etc. pour "AJAXify" le client de votre application. De telles bibliothèques visent à cacher la complexité du développement de JavaScript (par exemple, la compatibilité entre les navigateurs), mais peut-être une dépendance excessive pour une fonctionnalité simple.

Sur le côté du serveur, certains frameworks peuvent également vous aider (p. Ex. DWR ou RAJAX si vous utilisez Java), mais tout ce que vous devez faire est essentiellement d'exposer un service qui renvoie uniquement les informations requises pour mettre partiellement la page (initialement comme XML / XHTML – le X dans AJAX – mais JSON est souvent préféré de nos jours).

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. (Asynchrone).

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

Le Javascript peut alors mettre à jour dynamiquement la page DOM pour mettre à jour la vue de l'utilisateur.

Ainsi, «Javascript asynchrone et XML».

Il existe d'autres options pour mettre à jour la vue de l'utilisateur sans recharger la page, comme Flash et Applets, mais cela ne ressemble pas à de bonnes solutions pour votre cas. On dirait que Javascript est le chemin à parcourir. Il y a beaucoup de bons supports de bibliothèque, comme jQuery comme cela est utilisé sur ce site, donc vous n'avez pas besoin d'écrire beaucoup de Javascript.

L'essence d'AJAX est la suivante:

Vos pages peuvent parcourir le Web et mettre à jour leur propre contenu alors que l'utilisateur fait d'autres choses .

C'est-à-dire que votre javascript peut envoyer des requêtes GET et POST asynchrones (habituellement via un objet XMLHttpRequest ), puis utiliser les résultats de ces requêtes pour modifier sa page (via la manipulation Document Object Model ).

Ajax est plus que recharger une partie de la page. Ajax signifie 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 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 toute la page sur le serveur.

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

ASP.NET AJAX est relativement facile à configurer si vous connaissez déjà 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

C'est ajax. Vous ne pouvez pas utiliser ajax sans javascript. Vous devriez regarder les exemples de jquery et prototypes pour avoir une idée de l'utilisation.

Ce que vous essayez de faire, c'est techniquement ajax. Ajax crée des transactions de fragments xhtml pour mettre à jour les sections d'une page. Javascript rend ces demandes satisfaisantes et soignées.

Si vous êtes intéressé, IBM possède une série de pièces 10 (éventuellement plus) sur Ajax: Mastering Ajax part 1

Bien que quelques années maintenant, c'est une bonne introduction, (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 en ce moment …

Résumé:

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