Prendre la commande avec ajax

Vous souhaitez créer des applications Web plus dynamiques, réactives et de type Desktop comme Gmail et Google Maps? Alors cet article est pour vous! Il vous guide à travers les bases de l'Ajax et à travers le processus de création d'une application simple Ajax.

Cette application est nommée WebConsole, une interface de navigateur pour exécuter les commandes système pour lesquelles vous auriez généralement besoin d'un accès de shell. Il existe également de courts exemples d'utilisation de la fonctionnalité Ajax de deux bibliothèques JavaScript populaires - jQuery et Yui.

Dans cet article, publié pour la première fois en 2005 et récemment mis à jour, j'expliquerai la création d'une fonction JavaScript simple et réutilisable pour faire des demandes HTTP. Ensuite, je vais appliquer cette fonction dans la création d'une application simple.

Bien qu'il y ait des exemples de Yui et JQuery, l'article n'est pas un tutoriel sur une bibliothèque AJAX spécifique. Au lieu de cela, il vise à vous donner plus d'informations pratiques sur la création de demandes HTTP, afin que vous soyez dans une meilleure position lorsque vous évaluez de telles bibliothèques ou décidez d'aller seul.

Les plats clés

• AJAX permet la création d'applications Web dynamiques et réactives similaires à Gmail et Google Maps en gérant les demandes HTTP dans le navigateur.
• Le tutoriel présente une fonction JavaScript réutilisable pour faire des demandes HTTP, qui peuvent être utilisées sur diverses applications sans compter sur des bibliothèques spécifiques comme jQuery ou Yui.
• Un exemple simple démontre les étapes de base de la création d'une demande HTTP: créer un objet XMLHTTPRequest, attribuer une fonction de rappel et envoyer la demande.
• L'article présente l'application WebConsole, permettant l'exécution de la commande côté serveur via une interface de navigateur, illustrant l'utilisation pratique de l'Ajax.
• Les problèmes de sécurité sont mis en évidence, soulignant l'importance de restreindre les commandes exécutables et de désinfecter les entrées pour empêcher l'accès au serveur non autorisé.
• Le tutoriel couvre des sujets avancés, y compris la gestion de différents formats de données comme XML et JSON, et l'intégration de l'AJAX aux bibliothèques JavaScript populaires pour une fonctionnalité améliorée.

Un exemple de demande HTTP simple

Revitons d'abord le flux de fabrication d'une demande HTTP dans JavaScript et de gérer la réponse. Ce n'est qu'un exemple rapide pour rafraîchir votre mémoire. Pour tous les détails épicés, voir l'article d'introduction de SitePoint, «Ajax: interactivité utilisable avec les scripts à distance».

Il y a trois étapes de base:

1. Créez un objet XmlHttpRequest.


2. Attribuez une fonction de rappel pour gérer la réponse HTTP.


3. faire (envoyer) la demande.

Voyons un exemple où nous demanderons un document HTML simple, Test.html, qui ne contient que le texte "Je suis un test". Nous allons ensuite alerter () le contenu du fichier test.html:

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
       http_request = new XMLHttpRequest(); <br>
   } else if (window.ActiveXObject) { // IE6 and older <br>
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
   } <br>
   http_request.onreadystatechange = alertContents; <br>
   http_request.open('GET', url, true); <br>
   http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
   if (http_request.readyState == 4) { <br>
       if (http_request.status == 200) { <br>
           alert(http_request.responseText); <br>
       } else { <br>
           alert('There was a problem with the request.'); <br>
       } <br>
   } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
   makeRequest('test.html'); <br>
} <br>
 <br>
</script>

Voici comment fonctionne cet exemple:

1. L'utilisateur clique sur le bouton «Faire une demande».


2. Cela appelle la fonction makerequest () avec un paramètre: le nom d'un fichier html dans le même répertoire. Dans ce cas, c'est Test.html.


3. La demande est envoyée.


4. L'événement OnreadyStateChange tire et l'exécution est transmise à AlertContents ().


5. alertContents () vérifie si la réponse a été reçue et, si ça va, alors alert () s le contenu du fichier test.html.

Testez l'exemple par vous-même et affichez le fichier de test.

le problème

L'exemple ci-dessus a très bien fonctionné, mais il y a une chose que nous devons améliorer avant que nous ne soyons prêts pour les heures de grande écoute. L'amélioration consiste à coder une fonction de demande réutilisable qui gère toutes les choses ennuyeuses et répétitives d'objets et de demande / réponse, tout en laissant la partie de présentation à d'autres fonctions, qui sont de la demande agnostique et ne traitent que le résultat, quelle que soit sa source.

Dans l'exemple ci-dessus, nous avions besoin d'une variable globale, http_request, qui était accessible par les fonctions MakeRequest () et AlertContents (), qui n'est pas bonne en termes de réusabilité et risque également de nommer les collisions. Idéalement, MakeRequest () devrait effectuer la demande et AlertContents () devrait simplement présenter le résultat; Aucune fonction n'a besoin de connaître ou de nécessiter l'autre.

Voici le code de notre fonction de demande réutilisable:

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
       http_request = new XMLHttpRequest(); <br>
   } else if (window.ActiveXObject) { // IE6 and older <br>
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
   } <br>
   http_request.onreadystatechange = alertContents; <br>
   http_request.open('GET', url, true); <br>
   http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
   if (http_request.readyState == 4) { <br>
       if (http_request.status == 200) { <br>
           alert(http_request.responseText); <br>
       } else { <br>
           alert('There was a problem with the request.'); <br>
       } <br>
   } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
   makeRequest('test.html'); <br>
} <br>
 <br>
</script>

Cette fonction reçoit trois paramètres:

• L'URL pour obtenir
• La fonction à appeler lorsque la réponse est reçue
• un drapeau si la fonction de rappel attend un document XML (true) ou un texte brut (faux, par défaut)

Cette fonction repose sur deux capacités JavaScript afin d'envelopper et d'isoler bien l'objet de demande. Le premier est la capacité de définir de nouvelles fonctions (appelées fonctions anonymes) à la volée, comme ceci:

http_request.onreadystatechange = function () {...}

L'autre astuce est la possibilité d'invoquer des fonctions de rappel sans connaître leurs noms à l'avance; Par exemple:

function makeHttpRequest(url, callback_function, return_xml) <br>
{ <br>
  var http_request, response, i; <br>
 <br>
  var activex_ids = [ <br>
    'MSXML2.XMLHTTP.3.0', <br>
    'MSXML2.XMLHTTP', <br>
    'Microsoft.XMLHTTP' <br>
  ]; <br>
 <br>
  if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... <br>
    http_request = new XMLHttpRequest(); <br>
    if (http_request.overrideMimeType) { <br>
      http_request.overrideMimeType('text/xml'); <br>
    } <br>
  } else if (window.ActiveXObject) { // IE6 and older <br>
    for (i = 0; i < activex_ids.length; i++) { <br>
      try { <br>
        http_request = new ActiveXObject(activex_ids[i]); <br>
      } catch (e) {} <br>
    } <br>
  } <br>
 <br>
  if (!http_request) { <br>
    alert('Unfortunately your browser doesn't support this feature.'); <br>
    return false; <br>
  } <br>
 <br>
  http_request.onreadystatechange = function() { <br>
    if (http_request.readyState !== 4) { <br>
        // not ready yet <br>
        return; <br>
    } <br>
    if (http_request.status !== 200) { <br>
      // ready, but not OK <br>
      alert('There was a problem with the request.(Code: ' + http_request.status + ')'); <br>
      return; <br>
    } <br>
    if (return_xml) { <br>
      response = http_request.responseXML; <br>
    } else { <br>
      response = http_request.responseText; <br>
    } <br>
    // invoke the callback <br>
    callback_function(response); <br>
  }; <br>
 <br>
  http_request.open('GET', url, true); <br>
  http_request.send(null); <br>
}

Notez comment le nom de la fonction de rappel est passé sans aucune citation.

Vous pouvez facilement rendre la fonction encore plus réutilisable en permettant à la méthode de demande HTTP ainsi qu'à toute chaîne de requête d'être transmise en tant que paramètres à la fonction, puis utilisée dans les appels pour ouvrir () et envoyer () méthodes. Cela vous permettra également de faire des demandes de poste en plus des objets qu'il était initialement destiné à fonctionner.

Une autre capacité de la fonction est la gestion des codes de réponse autres que 200, ce qui pourrait être pratique si vous voulez être plus spécifique et prendre les mesures appropriées en fonction du type du code de réussite / d'erreur renvoyé.

l'exemple simple revisité

Redémarrons maintenant l'exemple précédent dans lequel le contenu d'un fichier test.html a été alert () ed. Cette fois, en utilisant notre nouvelle fonction de demande réutilisable brillante, les versions révisées des deux fonctions utilisées seront beaucoup plus simples:

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
       http_request = new XMLHttpRequest(); <br>
   } else if (window.ActiveXObject) { // IE6 and older <br>
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
   } <br>
   http_request.onreadystatechange = alertContents; <br>
   http_request.open('GET', url, true); <br>
   http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
   if (http_request.readyState == 4) { <br>
       if (http_request.status == 200) { <br>
           alert(http_request.responseText); <br>
       } else { <br>
           alert('There was a problem with the request.'); <br>
       } <br>
   } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
   makeRequest('test.html'); <br>
} <br>
 <br>
</script>

Comme vous pouvez le voir, AlertContents () est simplement une présentation: il n'y a pas d'états, de demandes prêtes ou des demandes HTTP qui volent.

Étant donné que ces fonctions ne sont désormais que des doublures, nous pouvons en fait s'en débarrasser entièrement et changer l'appel de la fonction à la place. Ainsi, tout l'exemple deviendra:

function makeHttpRequest(url, callback_function, return_xml) <br>
{ <br>
  var http_request, response, i; <br>
 <br>
  var activex_ids = [ <br>
    'MSXML2.XMLHTTP.3.0', <br>
    'MSXML2.XMLHTTP', <br>
    'Microsoft.XMLHTTP' <br>
  ]; <br>
 <br>
  if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... <br>
    http_request = new XMLHttpRequest(); <br>
    if (http_request.overrideMimeType) { <br>
      http_request.overrideMimeType('text/xml'); <br>
    } <br>
  } else if (window.ActiveXObject) { // IE6 and older <br>
    for (i = 0; i < activex_ids.length; i++) { <br>
      try { <br>
        http_request = new ActiveXObject(activex_ids[i]); <br>
      } catch (e) {} <br>
    } <br>
  } <br>
 <br>
  if (!http_request) { <br>
    alert('Unfortunately your browser doesn't support this feature.'); <br>
    return false; <br>
  } <br>
 <br>
  http_request.onreadystatechange = function() { <br>
    if (http_request.readyState !== 4) { <br>
        // not ready yet <br>
        return; <br>
    } <br>
    if (http_request.status !== 200) { <br>
      // ready, but not OK <br>
      alert('There was a problem with the request.(Code: ' + http_request.status + ')'); <br>
      return; <br>
    } <br>
    if (return_xml) { <br>
      response = http_request.responseXML; <br>
    } else { <br>
      response = http_request.responseText; <br>
    } <br>
    // invoke the callback <br>
    callback_function(response); <br>
  }; <br>
 <br>
  http_request.open('GET', url, true); <br>
  http_request.send(null); <br>
}

Oui, c'est si simple! Affichez l'exemple et le code source complet (disponible via notre ancienne source de vue d'ami).

Notre projet: l'application webconsole

Connaître les bases de l'Ajax et armés d'une façon réutilisable de faire des demandes, allons plus loin, pour créer un petit quelque chose qui peut réellement être utilisé dans la vraie vie.

L'application que nous créerons vous permettra d'exécuter n'importe quelle commande shell sur votre serveur Web, que ce soit basé sur Windows ou Linux. Nous allons même faire un petit effort CSS pour tenter de faire en sorte que l'application ressemble plus à une fenêtre de console.

En ce qui concerne l'interface, nous avons un Scrollable

qui contient les résultats des commandes exécutées jusqu'à présent, et une où nous tapons les commandes à exécuter. Ils ont tous deux un fond noir et une police de courrier gris. Voici une capture d'écran.

le html

Voici la partie HTML de l'application:

var callmeback = alert;<br>
callmeback('test'); // alerts 'test'

C'est tout: un qui est mis à jour avec les résultats de la commande exécutée, et une dans laquelle nous pouvons taper des commandes. C'est une belle interface propre, sans lutte , pas de rechargement de page - rien de tout cela!

Le CSS

La feuille de style webconsole.css définit les styles du résultat et de la commande : </preny></v></p> <pre class="brush:php;toolbar:false">function alertContents(text) {  <br>   alert(text);  <br> }  <br> <br> function makeRequest(url) {  <br>   makeHttpRequest(url, alertContents);  <br> }

Nous faisons le

qui montre les résultats de l'exécution de commandes défilables en définissant sa propriété de débordement sur Auto. Nous modifions également la propriété

 TAG Affichage en intention (Block est sa valeur par défaut). Il y a aussi la classe de console réutilisable pour faire en sorte que tout soit «consoley»: «police gris monospace sur fond noir. 
  Le code côté serveur  
 Notre application fera des demandes à un script côté serveur (EXEC.PHP), qui reçoit une commande via le paramètre Get «Commande». Ce script vérifie simplement que la commande apparaît dans la liste autorisée (vous pouvez modifier cette liste pour permettre plus de commandes), exécute la commande et imprime le résultat. La commande est exécutée à l'aide de la fonction php native shell_exec (). PHP est utilisé ici, mais il devrait être relativement facile d'implémenter cette fonctionnalité en utilisant votre langage côté serveur préféré. 
<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
       http_request = new XMLHttpRequest(); <br>
   } else if (window.ActiveXObject) { // IE6 and older <br>
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
   } <br>
   http_request.onreadystatechange = alertContents; <br>
   http_request.open('GET', url, true); <br>
   http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
   if (http_request.readyState == 4) { <br>
       if (http_request.status == 200) { <br>
           alert(http_request.responseText); <br>
       } else { <br>
           alert('There was a problem with the request.'); <br>
       } <br>
   } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
   makeRequest('test.html'); <br>
} <br>
 <br>
</script>
  AVERTISSEMENT! 

Le tableau $ autorisé_commands restreint les commandes que les utilisateurs peuvent exécuter via la console. Vous pouvez ajouter autant de commandes que vous le souhaitez au tableau, mais méfiez-vous que toutes les commandes supplémentaires seront vraiment exécutées sur votre serveur Web: l'ajout de format C :: APachectl STOP ou RM - RF, par exemple, n'est pas recommandé!  

  le javascript  
 La première étape du code JavaScript consiste à définir un espace de noms: une étiquette glorifiée pour ce qui n'est essentiellement rien de plus qu'un simple objet vide: 
function makeHttpRequest(url, callback_function, return_xml) <br>
{ <br>
  var http_request, response, i; <br>
 <br>
  var activex_ids = [ <br>
    'MSXML2.XMLHTTP.3.0', <br>
    'MSXML2.XMLHTTP', <br>
    'Microsoft.XMLHTTP' <br>
  ]; <br>
 <br>
  if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... <br>
    http_request = new XMLHttpRequest(); <br>
    if (http_request.overrideMimeType) { <br>
      http_request.overrideMimeType('text/xml'); <br>
    } <br>
  } else if (window.ActiveXObject) { // IE6 and older <br>
    for (i = 0; i < activex_ids.length; i++) { <br>
      try { <br>
        http_request = new ActiveXObject(activex_ids[i]); <br>
      } catch (e) {} <br>
    } <br>
  } <br>
 <br>
  if (!http_request) { <br>
    alert('Unfortunately your browser doesn't support this feature.'); <br>
    return false; <br>
  } <br>
 <br>
  http_request.onreadystatechange = function() { <br>
    if (http_request.readyState !== 4) { <br>
        // not ready yet <br>
        return; <br>
    } <br>
    if (http_request.status !== 200) { <br>
      // ready, but not OK <br>
      alert('There was a problem with the request.(Code: ' + http_request.status + ')'); <br>
      return; <br>
    } <br>
    if (return_xml) { <br>
      response = http_request.responseXML; <br>
    } else { <br>
      response = http_request.responseText; <br>
    } <br>
    // invoke the callback <br>
    callback_function(response); <br>
  }; <br>
 <br>
  http_request.open('GET', url, true); <br>
  http_request.send(null); <br>
}
 Toutes les autres variables et fonctions dont nous avons besoin seront définies comme des propriétés de cet objet. Cela nous permet de garder l'espace de noms global propre et le code autonome. 
 Le flux du code JavaScript dans l'application est le suivant: 
 
 

 La fonction webconsole.keyEvent () est attachée à l'événement onkeyup du champ de saisie, et est appelé chaque fois qu'une touche est enfoncée et libérée. 
 

 webconsole.keyevent () vérifie si la touche avec le code 13 est appuyée (il s'agit de la touche Entrée / retour). 
 

 Si Entrée est enfoncée, l'URL de la demande est construite comme: Exec.php? Command = The-Command-Entred-by-the-User 
 

 L'URL est transmise à notre fonction réutilisable makehttpRequest (). En outre, le nom de la fonction de rappel - webconsole.printResult - est fourni comme paramètre à makehttprequest (). 
 

 Après une réponse de serveur réussie, webconsole.printResult () est appelé. 
 

 webconsole.printResult () met à jour le résultat , fait défiler le  et efface la zone de texte de la commande pour faire de la place pour la commande suivante.


 Voici à quoi pourrait ressembler le corps de la fonction KeyEvent (): 


var callmeback = alert;<br>
callmeback('test'); // alerts 'test'
 Parce que nous n'avons pas passé vrai en tant que troisième paramètre à MakehttpRequest (), la réponse textuelle (pas XML) sera transmise à printResult (). 

 Ensuite, jetons un coup d'œil à la fonction qui mettra à jour le résultat 
. Il existe un moyen rapide de mettre à jour ce , et c'est pour utiliser la propriété innerhtml de l'élément, comme ainsi: 


function alertContents(text) {  <br>
   alert(text);  <br>
}  <br>
 <br>
function makeRequest(url) {  <br>
   makeHttpRequest(url, alertContents);  <br>
}
 Mais l'utilisation de InnerHTML pour mettre à jour dynamiquement les pages Web est découragée, car elle traite le code HTML comme une chaîne, tandis que la pensée de conception Web moderne préfère traiter la page comme un document contenant un arbre XML de nœuds, accessible à travers les méthodes et les propriétés DOM. Le DOM est le chemin que nous allons maintenant emprunter, afin de mettre à jour notre 
. 

 Voici la fonction; En dessous, il y a quelques notes sur son fonctionnement: 


<button >Make a request</button> <br>
<script type="text/javascript"> <br>
  document.getElementById('mybutton').onclick = function() { <br>
    makeHttpRequest('test.html', alert); <br>
  } <br>
</script>
 Cette fonction: 





Ajoute la commande qui a été entrée dans le  au résultat 
 en créant un nouveau nœud de texte et en l'ajoutant à l'arborescence du document 
 Affiche le résultat de l'exécution de la commande. Cela se fait en divisant le résultat en lignes et en ajoutant chaque ligne à l'arborescence de document, tout en enveloppant chacune de ces lignes dans des balises 
 pour préserver l'espacement. Nous devons diviser le résultat car il peut contenir plusieurs lignes (imaginez le résultat si un «ls -L» (ou «dir» sur Windows) était exécuté) 

 ajoute un nouveau nœud de texte de type curseur (: ->) 
 fait défiler le , en utilisant les propriétés de défilement et de défilement (non-W3C-standard mais soutenues par des navigateurs modernes) 

 Efface la commande  afin que la commande suivante puisse être entrée 


 La dernière tâche du JavaScript est de gérer les événements: 
 
 

 Les soumis de formulaires sont simplement «muets» afin qu'il n'y ait pas de rafraîchissement de page 
 La méthode webconsole.KeyEvent () est attachée à l'événement KEYUP de l'entrée où les commandes sont tapées. 

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
       http_request = new XMLHttpRequest(); <br>
   } else if (window.ActiveXObject) { // IE6 and older <br>
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
   } <br>
   http_request.onreadystatechange = alertContents; <br>
   http_request.open('GET', url, true); <br>
   http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
   if (http_request.readyState == 4) { <br>
       if (http_request.status == 200) { <br>
           alert(http_request.responseText); <br>
       } else { <br>
           alert('There was a problem with the request.'); <br>
       } <br>
   } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
   makeRequest('test.html'); <br>
} <br>
 <br>
</script>
 Et voilà! C'était la dernière pièce du puzzle. Ce que nous avons maintenant, c'est une application ajax qui fonctionne, construite à partir de zéro. 
 un peu plus 
 Si vous étiez assez curieux pour regarder le code source de l'exemple précédent, vous avez peut-être remarqué qu'il y a un peu plus dans cette application que ce dont nous avons discuté jusqu'à présent. Le petit extra n'est pas vraiment lié à l'Ajax, mais cela fait que l'application ressemble davantage à une invite de commande. La fonctionnalité en question implique l'utilisation des touches de flèche de haut en bas pour accéder à l'historique des commandes utilisées dans une session. 
 Disons que vous avez exécuté «ls -La», puis «ls». Si vous appuyez sur la touche Up-Arrow, la commande  sera préreffilée avec la commande qui a été utilisée en dernier; c'est-à-dire «ls». Appuyez à nouveau sur la touche Up-Arrow et l'entrée de commande affichera «ls -LA». Appuyez sur la touche de la flèche vers le bas. Vous atteignez à nouveau les «ls» lorsque vous vous déplacez à travers l'histoire des commandes. Essayez-le vous-même. 
 L'implémentation de cette fonctionnalité n'est pas difficile. Nous avons juste besoin d'un tableau qui stockera toutes les commandes exécutées jusqu'à présent: 



Webconsole.commands_history = [];
 
… et un pointeur de tableau (un entier) qui se souvient où nous étions: 
function makeHttpRequest(url, callback_function, return_xml) <br>
{ <br>
  var http_request, response, i; <br>
 <br>
  var activex_ids = [ <br>
    'MSXML2.XMLHTTP.3.0', <br>
    'MSXML2.XMLHTTP', <br>
    'Microsoft.XMLHTTP' <br>
  ]; <br>
 <br>
  if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... <br>
    http_request = new XMLHttpRequest(); <br>
    if (http_request.overrideMimeType) { <br>
      http_request.overrideMimeType('text/xml'); <br>
    } <br>
  } else if (window.ActiveXObject) { // IE6 and older <br>
    for (i = 0; i < activex_ids.length; i++) { <br>
      try { <br>
        http_request = new ActiveXObject(activex_ids[i]); <br>
      } catch (e) {} <br>
    } <br>
  } <br>
 <br>
  if (!http_request) { <br>
    alert('Unfortunately your browser doesn't support this feature.'); <br>
    return false; <br>
  } <br>
 <br>
  http_request.onreadystatechange = function() { <br>
    if (http_request.readyState !== 4) { <br>
        // not ready yet <br>
        return; <br>
    } <br>
    if (http_request.status !== 200) { <br>
      // ready, but not OK <br>
      alert('There was a problem with the request.(Code: ' + http_request.status + ')'); <br>
      return; <br>
    } <br>
    if (return_xml) { <br>
      response = http_request.responseXML; <br>
    } else { <br>
      response = http_request.responseText; <br>
    } <br>
    // invoke the callback <br>
    callback_function(response); <br>
  }; <br>
 <br>
  http_request.open('GET', url, true); <br>
  http_request.send(null); <br>
}
 Voici la liste de la fonction webconsole.KeyEvent (). Les lignes qui traitent de la fonctionnalité historique sont présentées en gras. 
var callmeback = alert;<br>
callmeback('test'); // alerts 'test'
 Voici quelques notes sur le fonctionnement de la fonction pour fournir l'historique des commandes: 
 

 Lorsque nous appuyons sur ENTER (code clé 13) et que nous faisons une demande, la commande exécutée est ajoutée au tableau Commands_History, et le pointeur du tableau est réinitialisé à la nouvelle longueur du tableau. 
 Lorsque vous appuyez sur la flèche vers le haut (code clé 38), qui signifie «revenir en arrière», nous décrémentons History_pointer et préfrépage de la commande  avec la commande précédente dans la liste d'historique. 

 Frapper la flèche vers le bas incrémente le pointeur par un, et nous voyons la commande suivante. 

 
 Travailler avec XML 
 Jusqu'à présent, nous n'avons pas discuté de la façon de demander et d'utiliser des documents XML - le X en Ajax! Nous utilisons la propriété ResponseText de l'objet XMLHTTP. Demander le document n'est pas différent de ce que nous avons déjà vu: nous devons simplement instruire notre fonction de demande réutilisable pour retourner ResponseXML, par opposition à ResponseText. Nous le faisons en définissant le troisième paramètre sur true: 
<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
       http_request = new XMLHttpRequest(); <br>
   } else if (window.ActiveXObject) { // IE6 and older <br>
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
   } <br>
   http_request.onreadystatechange = alertContents; <br>
   http_request.open('GET', url, true); <br>
   http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
   if (http_request.readyState == 4) { <br>
       if (http_request.status == 200) { <br>
           alert(http_request.responseText); <br>
       } else { <br>
           alert('There was a problem with the request.'); <br>
       } <br>
   } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
   makeRequest('test.html'); <br>
} <br>
 <br>
</script>
 Ensuite, nous devons changer notre script exec.php pour renvoyer XML valide, au lieu de texte brut. Voici le code source du nouveau script (exec_xml.php): 
function makeHttpRequest(url, callback_function, return_xml) <br>
{ <br>
  var http_request, response, i; <br>
 <br>
  var activex_ids = [ <br>
    'MSXML2.XMLHTTP.3.0', <br>
    'MSXML2.XMLHTTP', <br>
    'Microsoft.XMLHTTP' <br>
  ]; <br>
 <br>
  if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... <br>
    http_request = new XMLHttpRequest(); <br>
    if (http_request.overrideMimeType) { <br>
      http_request.overrideMimeType('text/xml'); <br>
    } <br>
  } else if (window.ActiveXObject) { // IE6 and older <br>
    for (i = 0; i < activex_ids.length; i++) { <br>
      try { <br>
        http_request = new ActiveXObject(activex_ids[i]); <br>
      } catch (e) {} <br>
    } <br>
  } <br>
 <br>
  if (!http_request) { <br>
    alert('Unfortunately your browser doesn't support this feature.'); <br>
    return false; <br>
  } <br>
 <br>
  http_request.onreadystatechange = function() { <br>
    if (http_request.readyState !== 4) { <br>
        // not ready yet <br>
        return; <br>
    } <br>
    if (http_request.status !== 200) { <br>
      // ready, but not OK <br>
      alert('There was a problem with the request.(Code: ' + http_request.status + ')'); <br>
      return; <br>
    } <br>
    if (return_xml) { <br>
      response = http_request.responseXML; <br>
    } else { <br>
      response = http_request.responseText; <br>
    } <br>
    // invoke the callback <br>
    callback_function(response); <br>
  }; <br>
 <br>
  http_request.open('GET', url, true); <br>
  http_request.send(null); <br>
}

 De cette façon, si nous exécutons la commande 'ls test.html', le nouveau script côté serveur renvoie les éléments suivants: 
var callmeback = alert;<br>
callmeback('test'); // alerts 'test'
 Si nous exécutons une commande qui renvoie plus de lignes (comme 'ls -La'), chaque ligne de la réponse sera enveloppée dans  Tags. 
 Nous naviguerons dans le document XML ci-dessus à l'aide des fonctions JavaScript DOM, afin de traiter le  et de l'afficher dans notre résultat . 
 Voici le corps de la nouvelle méthode webconsole.printResult (): 
function alertContents(text) {  <br>
   alert(text);  <br>
}  <br>
 <br>
function makeRequest(url) {  <br>
   makeHttpRequest(url, alertContents);  <br>
}
 Afin de mettre à jour le résultat  avec les données du document XML, nous suivons la procédure: 
 
 

 Accédez à un nœud à partir de la source Xml. 
 

 obtenir sa valeur. 
 

 Créez un nouveau nœud. 
 

 Ajoutez-le à l'arbre cible . 


 Comme vous le voyez dans le code xmldoc.getElementsByTagName ('Command') est utilisé, et il renvoie une collection (un objet de liste de type tableau) de tous les nœuds . Dans notre cas, il n'y a qu'un seul nœud. Nous accédons à sa valeur avec les éléments suivants: 
<button >Make a request</button> <br>
<script type="text/javascript"> <br>
  document.getElementById('mybutton').onclick = function() { <br>
    makeHttpRequest('test.html', alert); <br>
  } <br>
</script>
 Nous prenons la valeur du nœud et créons un nouveau nœud de texte pour ajouter au 
, comme ceci: 
<form action="exec.php" method="get" >  <br>
  <div  <br>
      <br>
    >  <br>
    Welcome to the WebConsole!  <br>
    <br />  <br>
    :-&gt;  <br>
  </div>  <br>
  <input  <br>
      <br>
    name="command"  <br>
      <br>
    type="text" />  <br>
</form>
 Nous faisons de même avec la balise  du document XML. Tout d'abord, nous obtenons toutes les  s: 

.console {  <br>
    margin: 0px;  <br>
    font-family: courier;  <br>
    color: gray;  <br>
    background-color: black;  <br>
}  <br>
#result {  <br>
    overflow: auto;  <br>
    padding: 5px;  <br>
    height: 400px;  <br>
}  <br>
#result pre {  <br>
    display: inline;  <br>
}  <br>
#command {  <br>
    width: 100%;  <br>
    border: 1px solid white;  <br>
}
 Ensuite, nous parcourons chaque élément du résultat_collection. Encore une fois, nous enroulons chaque ligne de résultat dans les balises 
. 
 Comme vous le voyez, travailler avec le XMLDocument n'est pas beaucoup plus difficile que de travailler avec la réponse en texte brut. Vous pouvez tester la version XML du webconsole vous-même. 
 en utilisant jQuery 
 jQuery est une bibliothèque JavaScript populaire. Essayons de l'utiliser pour notre fonctionnalité AJAX, au lieu de la fonction MADEHTTPREQUEST () réutilisable. 
 Vous devez d'abord télécharger la dernière version de la bibliothèque à partir d'ici (je suggère la version minifiée) et l'inclure dans la page: 
<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
       http_request = new XMLHttpRequest(); <br>
   } else if (window.ActiveXObject) { // IE6 and older <br>
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
   } <br>
   http_request.onreadystatechange = alertContents; <br>
   http_request.open('GET', url, true); <br>
   http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
   if (http_request.readyState == 4) { <br>
       if (http_request.status == 200) { <br>
           alert(http_request.responseText); <br>
       } else { <br>
           alert('There was a problem with the request.'); <br>
       } <br>
   } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
   makeRequest('test.html'); <br>
} <br>
 <br>
</script>
 Il y avait une partie où nous appelions MakehttpRequest () comme ceci: 
function makeHttpRequest(url, callback_function, return_xml) <br>
{ <br>
  var http_request, response, i; <br>
 <br>
  var activex_ids = [ <br>
    'MSXML2.XMLHTTP.3.0', <br>
    'MSXML2.XMLHTTP', <br>
    'Microsoft.XMLHTTP' <br>
  ]; <br>
 <br>
  if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... <br>
    http_request = new XMLHttpRequest(); <br>
    if (http_request.overrideMimeType) { <br>
      http_request.overrideMimeType('text/xml'); <br>
    } <br>
  } else if (window.ActiveXObject) { // IE6 and older <br>
    for (i = 0; i < activex_ids.length; i++) { <br>
      try { <br>
        http_request = new ActiveXObject(activex_ids[i]); <br>
      } catch (e) {} <br>
    } <br>
  } <br>
 <br>
  if (!http_request) { <br>
    alert('Unfortunately your browser doesn't support this feature.'); <br>
    return false; <br>
  } <br>
 <br>
  http_request.onreadystatechange = function() { <br>
    if (http_request.readyState !== 4) { <br>
        // not ready yet <br>
        return; <br>
    } <br>
    if (http_request.status !== 200) { <br>
      // ready, but not OK <br>
      alert('There was a problem with the request.(Code: ' + http_request.status + ')'); <br>
      return; <br>
    } <br>
    if (return_xml) { <br>
      response = http_request.responseXML; <br>
    } else { <br>
      response = http_request.responseText; <br>
    } <br>
    // invoke the callback <br>
    callback_function(response); <br>
  }; <br>
 <br>
  http_request.open('GET', url, true); <br>
  http_request.send(null); <br>
}
 en utilisant la méthode ajax () de jQuery que vous pouvez maintenant faire: 

   

var xhr = $ .ajax ({

  URL: 'exec.php', 

  Données: {'Command': the_shell_command}, 

  Succès: webconsole.printresult 

}); 
 
 Voyons ce que nous avons ici: 
 
 

 $ est un nom rapide pour jQuery; Vous pouvez également le faire à la place: jQuery.ajax 
 Nous appelons la méthode ajax () et passons un objet contenant une URL à demander, un objet de données (qui sera échappé et converti en une chaîne de requête par jQuery) et une fonction de rappel à appeler une fois que la réponse arrivera. 

 Un exemple de travail de la console Web à l'aide de jQuery est ici. 
 Il y a plus de moyens à Ajax avec jQuery, car un aperçu de la documentation confirmera. Par exemple, une tâche souvent répétée pour mettre à jour un  (avec id mydiv) en utilisant le contenu du fichier (test.html) pourrait être aussi simple que: 
var callmeback = alert;<br>
callmeback('test'); // alerts 'test'
 Voir un exemple ici. 
 en utilisant yui 
 Une autre bibliothèque JavaScript populaire est YUI (Yahoo Interface Library). Voyons comment nous pouvons faire fonctionner notre console Web avec la fonctionnalité AJAX de Yui. 
 Nous n'avons pas besoin de télécharger des fichiers YUI car ils sont déjà hébergés gratuitement par Yahoo et peuvent être utilisés à partir de leur emplacement actuel. La fonctionnalité AJAX est fournie par l'utilitaire Connection Manager, que vous incluez dans vos pages comme SO: 
function alertContents(text) {  <br>
   alert(text);  <br>
}  <br>
 <br>
function makeRequest(url) {  <br>
   makeHttpRequest(url, alertContents);  <br>
}
 Maintenant, pour profiter de Yui, nous remplaçons l'appel à makehttprequest () par: 

   

// Ajax de Yui 

Yahoo.util.connect.asyncrequest (

    'Get', 

    'exec.php? Command =' Escape (the_shell_command), 

    {

      Succès: fonction (xhr) {

        Webconsole.printResult (xhr.ResponSeText) 

      } 

    } 

)); 
 
 Vous pouvez voir que la méthode asyncrequest () prend: 
 
 

 Méthode de demande (obtenir, publier, diriger, supprimer, etc.) 
 url 
 un objet qui contient des fonctions pour gérer les scénarios de succès et d'échec 

 YUI passe XMLHttpRequest aux fonctions du gestionnaire, donc dans ce cas, nous prenons simplement le contenu du ResponseText et le transmet à Printresult (). 
 Vous pouvez voir comment l'URL a été créée en concaténant et en échappant aux cordes. Dans ce cas, il n'y a qu'une seule valeur que nous voulons passer par la chaîne de requête. Mais s'il y en a plus, cela devient assez gênant. Yui vous aide à gérer facilement de telles situations, en fournissant une méthode setForm (). Une fois que vous avez défini le formulaire, Yui prendra les valeurs du formulaire et s'occupera de l'échappement et de la couture de la chaîne de requête: 

   

Yahoo.util.connect.setform (document.forms [0]);   

Yahoo.util.connect.asyncrequest (

    'Get', 

    'exec.php', 

    {

      Succès: fonction (xhr) {

        Webconsole.printResult (xhr.ResponSeText) 

      } 

    } 

)); 
 
 Voici un exemple de travail de la console Web à l'aide de yui. 
  en utilisant JSON  
 JSON (notation d'objet JavaScript) est un format d'échange de données populaire. Il vous donne une autre alternative au texte brut ou au XML lorsqu'il s'agit de communiquer les données du serveur au navigateur. JSON est extrêmement simple; Essentiellement, c'est juste javascript. 
 En JavaScript, vous pouvez définir un tableau et un objet comme celui-ci: 
<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
       http_request = new XMLHttpRequest(); <br>
   } else if (window.ActiveXObject) { // IE6 and older <br>
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
   } <br>
   http_request.onreadystatechange = alertContents; <br>
   http_request.open('GET', url, true); <br>
   http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
   if (http_request.readyState == 4) { <br>
       if (http_request.status == 200) { <br>
           alert(http_request.responseText); <br>
       } else { <br>
           alert('There was a problem with the request.'); <br>
       } <br>
   } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
   makeRequest('test.html'); <br>
} <br>
 <br>
</script>
 

Vous pouvez faire de même mais en utilisant des littéraux de tableau et d'objets, comme ainsi:

function makeHttpRequest(url, callback_function, return_xml) <br>
{ <br>
  var http_request, response, i; <br>
 <br>
  var activex_ids = [ <br>
    'MSXML2.XMLHTTP.3.0', <br>
    'MSXML2.XMLHTTP', <br>
    'Microsoft.XMLHTTP' <br>
  ]; <br>
 <br>
  if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... <br>
    http_request = new XMLHttpRequest(); <br>
    if (http_request.overrideMimeType) { <br>
      http_request.overrideMimeType('text/xml'); <br>
    } <br>
  } else if (window.ActiveXObject) { // IE6 and older <br>
    for (i = 0; i < activex_ids.length; i++) { <br>
      try { <br>
        http_request = new ActiveXObject(activex_ids[i]); <br>
      } catch (e) {} <br>
    } <br>
  } <br>
 <br>
  if (!http_request) { <br>
    alert('Unfortunately your browser doesn't support this feature.'); <br>
    return false; <br>
  } <br>
 <br>
  http_request.onreadystatechange = function() { <br>
    if (http_request.readyState !== 4) { <br>
        // not ready yet <br>
        return; <br>
    } <br>
    if (http_request.status !== 200) { <br>
      // ready, but not OK <br>
      alert('There was a problem with the request.(Code: ' + http_request.status + ')'); <br>
      return; <br>
    } <br>
    if (return_xml) { <br>
      response = http_request.responseXML; <br>
    } else { <br>
      response = http_request.responseText; <br>
    } <br>
    // invoke the callback <br>
    callback_function(response); <br>
  }; <br>
 <br>
  http_request.open('GET', url, true); <br>
  http_request.send(null); <br>
}
 Cette notation littérale est ce que JSON utilise pour transmettre des données. Les citations autour des propriétés en JavaScript propres ne sont pas requises la plupart du temps, mais par convention, elles sont nécessaires en JSON. 
 Changeons notre console afin qu'elle utilise le format JSON pour transférer des données. Le flux serait: 
 
 

 PHP côté serveur crée un tableau associatif avec le résultat, puis le convertit en JSON en utilisant la fonction intégrée json_encode () qui est uniquement PHP5, mais il serait trivial de coder la réponse même manuellement. La chaîne JSON est renvoyée. 
 

 JavaScript dans le navigateur reçoit la chaîne JSON et la transforme en un objet JavaScript natif. Une façon non sécurisée de le faire consiste à utiliser la fonction EVAL (). La meilleure façon est d'utiliser la bibliothèque JSON gratuite. 

 Par exemple, si la commande que nous exécutons est LS, la réponse JSON du serveur sera quelque chose comme ce qui suit (formaté et abrégé pour la lisibilité): 
var callmeback = alert;<br>
callmeback('test'); // alerts 'test'
 Comme vous pouvez le voir, JSON est plus léger que XML, car il n'y a pas de balises de clôture, de balises de document XML ou de nœuds racine. 
 Modifier notre script côté serveur pour renvoyer JSON Résultats en quelque chose comme ceci: 
function alertContents(text) {  <br>
   alert(text);  <br>
}  <br>
 <br>
function makeRequest(url) {  <br>
   makeHttpRequest(url, alertContents);  <br>
}
 En JavaScript, la partie de WebConsole.printResult qui accepte les données deviendrait: 
<button >Make a request</button> <br>
<script type="text/javascript"> <br>
  document.getElementById('mybutton').onclick = function() { <br>
    makeHttpRequest('test.html', alert); <br>
  } <br>
</script>
 Vous pouvez voir comment après l'évaluation (), les données deviennent un objet JavaScript normal et vous pouvez accéder à ses propriétés, telles que Data.Result et Data.Command. Comme mentionné déjà, EVAL () est un moyen moins que sécurisé de transformer une chaîne codée JSON en un objet. Une meilleure façon consiste à utiliser la bibliothèque JSON qui nous aide à remplacer l'appel EVAL () par ceci: 
<form action="exec.php" method="get" >  <br>
  <div  <br>
      <br>
    >  <br>
    Welcome to the WebConsole!  <br>
    <br />  <br>
    :-&gt;  <br>
  </div>  <br>
  <input  <br>
      <br>
    name="command"  <br>
      <br>
    type="text" />  <br>
</form>
 Un exemple de JSON qui fonctionne est ici. 
  Rappel de sécurité 

Aux fins de la démonstration de cette application, je n'autorise qu'un ensemble prédéfini de commandes inoffensives à exécuter sur mon serveur Web.  Si vous développez la liste des commandes ou autorisez une commande, n'oubliez pas de protéger le répertoire de votre serveur dans lequel vous allez installer l'application. Laisser cette application accessible aux étrangers peut avoir des résultats dévastateurs. Il est assez puissant: il permettra à l'utilisateur d'exécuter n'importe quelle commande, y compris, mais sans s'y limiter, tout supprimer sur votre serveur Web!  
 Conclusion 
 Nous sommes arrivés à la fin de notre exemple d'application AJAX. Vous connaissez les bases, vous avez vu l'action et vous êtes armé de connaissances suffisantes pour commencer à vous expérimenter. Vous pouvez vous échauffer en modifiant et en jouant avec le code de cet article - tout est inclus dans l'archive de code téléchargeable - puis passez à vos propres projets. 
 Ce sont des moments passionnants: le visage du Web subit de grands changements, grâce aux scripts à distance. Nous avons passé la phase des premiers adoptants (Google, Amazon, Flickr, Yahoo) et maintenant les scripts distants avec Ajax deviennent plus courants lors de la création de pages Web réactives et conviviales. De nos jours, vos visiteurs sont déjà gâtés en utilisant Gmail et Flickr, et vous ne pouvez pas vous permettre de les insulter avec des pages de style Web 1.0 statiques! 




 Des questions fréquemment posées sur Ajax 



 Quelle est la différence entre Ajax synchrone et asynchrone? 
 
 Les demandes AJAX synchrones bloquent l'exécution du code jusqu'à ce qu'une réponse soit reçue. Cela signifie que l'interface utilisateur peut devenir insensible ou «geler» jusqu'à la fin de la demande. D'un autre côté, les demandes AJAX asynchrones ne bloquent pas l'exécution du reste du code. Ils permettent à l'interface utilisateur de rester réactive pendant la demande de demande. C'est pourquoi les demandes asynchrones sont généralement préférées à celles synchrones dans le développement Web. 
 
 Comment AJAX gère-t-il les formats de données comme XML et JSON? 
 
 AJAX peut gérer divers formats de données, notamment XML et JSON. Le XML était initialement le format le plus courant pour l'Ajax. Cependant, JSON est devenu plus populaire en raison de sa nature légère et de sa facilité d'utilisation avec JavaScript. Ajax peut analyser ces formats de données et les utiliser pour mettre à jour la page Web sans avoir à recharger toute la page. 
 
 peut-il travailler avec des technologies autres que JavaScript? 
 
 Alors qu'Ajax est fortement associé à JavaScript, il peut également travailler avec d'autres technologies. Par exemple, vous pouvez utiliser Ajax avec jQuery, une bibliothèque JavaScript populaire, pour simplifier le processus de réalisation des demandes AJAX. AJAX peut également être utilisé avec des langages côté serveur comme PHP pour récupérer les données d'une base de données. 
 Quelles sont les implications de sécurité de l'utilisation de l'Ajax? 
 
 Comme toute technologie Web, Ajax a des implications de sécurité potentielles. Étant donné que l'AJAX implique l'envoi et la réception de données entre le client et le serveur, il peut être vulnérable aux attaques telles que les scripts inter-sites (XSS) et le contrefaçon de demande inter-sites (CSRF). Par conséquent, il est important de mettre en œuvre des mesures de sécurité appropriées lors de l'utilisation de l'AJAX, comme valider et désinfecter les données d'entrée. 
 
 Comment AJAX affecte-t-il le SEO? 
 
 L'AJAX peut potentiellement affecter le SEO car les moteurs de recherche peuvent ne pas être en mesure de ramper et d'indexer le contenu AJAX. Cependant, Google a fait des progrès dans le javascript rampant et peut indexer le contenu AJAX dans une certaine mesure. Pour vous assurer que votre contenu AJAX est convivial, vous pouvez utiliser des techniques telles que l'amélioration progressive et la dégradation gracieuse. 
 
 Peut être utilisé avec HTML5 et CSS3? 
 
 Oui, Ajax peut être utilisé en conjonction avec HTML5 et CSS3 pour créer des pages Web dynamiques et interactifs. Par exemple, l'API d'historique HTML5 peut être utilisée avec AJAX pour créer des pages navigables sans rechargement de page complète. CSS3 peut être utilisé pour styliser le contenu mis à jour. 
 
 Quels sont les cas d'utilisation courants pour Ajax? 
 
 AJAX est couramment utilisé dans les applications Web qui nécessitent des mises à jour de données en temps réel sans rafraîchir la page entière. Cela inclut des applications telles que les résultats de recherche en direct, les soumissions de formulaires, les applications de chat et les cartes interactives. 
 
 Comment AJAX gère-t-il les erreurs? 
 
 AJAX fournit des méthodes pour gérer les erreurs qui se produisent pendant la demande. Vous pouvez définir une fonction à exécuter si une erreur se produit lorsque la demande est traitée. Cette fonction peut fournir des informations sur l'erreur et prendre des mesures appropriées, comme la notification de l'utilisateur ou la journalisation de l'erreur. 
 
 Les demandes AJAX peuvent-elles être mises en cache? 
 
 Oui, les demandes AJAX peuvent être mises en cache pour améliorer les performances. En mettant en cache une demande AJAX, la réponse est stockée de sorte que si la même demande est à nouveau faite, la réponse stockée peut être utilisée au lieu de faire une nouvelle demande. Cependant, cela doit être utilisé judicieusement car cela peut conduire à des données périmées. 
 
 Comment puis-je déboguer Ajax? 
 
 Le débogage de l'Ajax peut être effectué à l'aide d'outils de développement de navigateur. Ces outils vous permettent d'inspecter les demandes et les réponses AJAX, de vérifier l'état des demandes et de voir toutes les erreurs qui se produisent. Vous pouvez également utiliser Console.log Instructions dans votre code JavaScript pour produire des informations sur la console à des fins de débogage.