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> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function alertContents(text) {  <br>   alert(text);  <br> }  <br> <br> function makeRequest(url) {  <br>   makeHttpRequest(url, alertContents);  <br> }

Copier après la connexion

Copier après la connexion

Copier après la connexion

Copier après la connexion