AJAX - Guide rapide

AJAX signifie Asynchrone JavaScript et XML. AJAX est une nouvelle technique permettant de créer des applications Web meilleures, plus rapides et plus interactives à l'aide de XML, HTML, CSS et Java Script.

  • Ajax utilise XHTML pour le contenu, CSS pour la présentation, ainsi que Document Object Model et JavaScript pour l'affichage de contenu dynamique.

  • Les applications Web conventionnelles transmettent des informations vers et depuis le serveur à l'aide de requêtes synchrones. Cela signifie que vous remplissez un formulaire, appuyez sur Soumettre et que vous êtes dirigé vers une nouvelle page avec de nouvelles informations du serveur.

  • Avec AJAX, lorsque vous cliquez sur Soumettre, JavaScript fera une demande au serveur, interprétera les résultats et mettra à jour l'écran actuel. Dans le sens le plus pur, l'utilisateur ne saurait jamais que quoi que ce soit a même été transmis au serveur.

  • XML est couramment utilisé comme format de réception des données du serveur, bien que n'importe quel format, y compris le texte brut, puisse être utilisé.

  • AJAX est une technologie de navigateur Web indépendante du logiciel de serveur Web.

  • Un utilisateur peut continuer à utiliser l'application pendant que le programme client demande des informations au serveur en arrière-plan.

  • Interaction utilisateur intuitive et naturelle. Il n'est pas nécessaire de cliquer, le mouvement de la souris est un déclencheur d'événement suffisant.

  • Basé sur les données plutôt que sur la page.

Technologie d'application Internet riche

AJAX est la technologie RIA (Rich Internet Application) la plus viable à ce jour. Il prend un élan considérable dans l'industrie et plusieurs trousses d'outils et cadres émergent. Mais en même temps, AJAX a une incompatibilité de navigateur et il est pris en charge par JavaScript, ce qui est difficile à maintenir et à déboguer.

AJAX est basé sur des standards ouverts

AJAX est basé sur les standards ouverts suivants -

  • Présentation basée sur un navigateur utilisant HTML et des feuilles de style en cascade (CSS).
  • Les données sont stockées au format XML et extraites du serveur.
  • Les données en coulisse récupèrent à l'aide d'objets XMLHttpRequest dans le navigateur.
  • JavaScript pour que tout se passe.

AJAX ne peut pas fonctionner indépendamment. Il est utilisé en combinaison avec d'autres technologies pour créer des pages Web interactives.

JavaScript

  • Langage de script mal typé.
  • La fonction JavaScript est appelée lorsqu'un événement se produit dans une page.
  • Colle pour toute l'opération AJAX.

DOM

  • API pour accéder et manipuler des documents structurés.
  • Représente la structure des documents XML et HTML.

CSS

  • Permet une séparation claire du style de présentation du contenu et peut être modifié par programmation par JavaScript

XMLHttpRequest

  • Objet JavaScript qui effectue une interaction asynchrone avec le serveur.

Voici une liste de quelques applications Web célèbres qui utilisent AJAX.

Google Maps

Un utilisateur peut faire glisser une carte entière en utilisant la souris, plutôt que de cliquer sur un bouton.

Google Suggérer

Au fur et à mesure que vous tapez, Google propose des suggestions. Utilisez les touches fléchées pour parcourir les résultats.

Gmail

Gmail est un webmail basé sur l'idée que les e-mails peuvent être plus intuitifs, efficaces et utiles.

Yahoo Maps (nouveau)

Maintenant, c'est encore plus facile et plus amusant d'arriver là où vous allez!

Différence entre AJAX et le programme CGI conventionnel

Essayez ces deux exemples un par un et vous sentirez la différence. En essayant l'exemple AJAX, il n'y a pas de discontinuité et vous obtenez la réponse très rapidement, mais lorsque vous essayez l'exemple GCI standard, vous devrez attendre la réponse et votre page est également actualisée.

Exemple AJAX

Exemple standard

NOTE- Nous avons donné un exemple plus complexe dans la base de données AJAX .

Tous les navigateurs disponibles ne prennent pas en charge AJAX. Voici une liste des principaux navigateurs prenant en charge AJAX.

  • Mozilla Firefox 1.0 et supérieur.
  • Netscape version 7.1 et supérieure.
  • Apple Safari 1.2 et supérieur.
  • Microsoft Internet Explorer 5 et supérieur.
  • Konqueror.
  • Opera 7.6 et supérieur.

Lorsque vous écrivez votre prochaine application, tenez compte des navigateurs qui ne prennent pas en charge AJAX.

NOTE - Quand on dit qu'un navigateur ne supporte pas AJAX, cela signifie simplement que le navigateur ne supporte pas la création d'objet Javascript - objet XMLHttpRequest.

Écriture du code spécifique au navigateur

Le moyen le plus simple de rendre votre code source compatible avec un navigateur est d'utiliser des blocs try ... catch dans votre JavaScript.

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!

            try {
               // Opera 8.0+, Firefox, Safari 
               ajaxRequest = new XMLHttpRequest();
            } catch (e) {

               // Internet Explorer Browsers
               try {
                  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                  
                  try {
                     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {

                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
            }
         }
         //-->
      </script>
      
      <form name = 'myForm'>
         Name: <input type = 'text' name = 'username' /> <br />
         Time: <input type = 'text' name = 'time' />
      </form>
      
   </body>
</html>

Dans le code JavaScript ci-dessus, nous essayons trois fois de créer notre objet XMLHttpRequest. Notre première tentative -

  • ajaxRequest = new XMLHttpRequest ();

C'est pour les navigateurs Opera 8.0+, Firefox et Safari. Si cela échoue, nous essayons deux fois de plus de créer l'objet correct pour un navigateur Internet Explorer avec -

  • ajaxRequest = nouvel ActiveXObject ("Msxml2.XMLHTTP");
  • ajaxRequest = nouvel ActiveXObject ("Microsoft.XMLHTTP");

Si cela ne fonctionne pas, nous pouvons utiliser un navigateur très obsolète qui ne prend pas en charge XMLHttpRequest, ce qui signifie également qu'il ne prend pas en charge AJAX.

Très probablement, notre variable ajaxRequest sera désormais définie sur la norme XMLHttpRequest utilisée par le navigateur et nous pouvons commencer à envoyer des données au serveur. Le flux de travail AJAX par étapes est expliqué dans le chapitre suivant.

Ce chapitre vous donne une image claire des étapes exactes de l'opération AJAX.

Étapes de l'opération AJAX

  • Un événement client se produit.
  • Un objet XMLHttpRequest est créé.
  • L'objet XMLHttpRequest est configuré.
  • L'objet XMLHttpRequest envoie une requête asynchrone au serveur Web.
  • Le serveur Web renvoie le résultat contenant le document XML.
  • L'objet XMLHttpRequest appelle la fonction callback () et traite le résultat.
  • Le DOM HTML est mis à jour.

Prenons ces étapes une par une.

Un événement client se produit

  • Une fonction JavaScript est appelée à la suite d'un événement.

  • Exemple - La fonction JavaScript validateUserId () est mappée en tant que gestionnaire d'événements à un événement onkeyup sur le champ du formulaire d'entrée dont l'ID est défini sur "userid"

  • <input type = "text" size = "20" id = "userid" name = "id" onkeyup = "validateUserId ();">.

L'objet XMLHttpRequest est créé

var ajaxRequest;  // The variable that makes Ajax possible!
function ajaxFunction() {
   try {
      // Opera 8.0+, Firefox, Safari
      ajaxRequest = new XMLHttpRequest();
   } catch (e) {
   
      // Internet Explorer Browsers
      try {
         ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      
         try {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
         } catch (e) {
      
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
   }
}

L'objet XMLHttpRequest est configuré

Dans cette étape, nous écrirons une fonction qui sera déclenchée par l'événement client et une fonction de rappel processRequest () sera enregistrée.

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid");
   var url = "validate?id=" + escape(target.value);
   
   ajaxRequest.open("GET", url, true);
   ajaxRequest.send(null);
}

Faire une requête asynchrone au serveur Web

Le code source est disponible dans le morceau de code ci-dessus. Le code écrit en caractères gras est responsable de faire une demande au serveur Web. Tout cela est fait à l'aide de l'objet XMLHttpRequest ajaxRequest .

function validateUserId() {
   ajaxFunction();
   
   // Here processRequest() is the callback function.
   ajaxRequest.onreadystatechange = processRequest;
   
   if (!target) target = document.getElementById("userid"); var url = "validate?id = " + escape(target.value); ajaxRequest.open("GET", url, true); ajaxRequest.send(null);
}

Supposons que vous saisissiez Zara dans la zone userid, puis dans la requête ci-dessus, l'URL est définie sur "validate? Id = Zara".

Webserver renvoie le résultat contenant le document XML

Vous pouvez implémenter votre script côté serveur dans n'importe quelle langue, mais sa logique doit être la suivante.

  • Obtenez une demande du client.
  • Analysez l'entrée du client.
  • Effectuez le traitement requis.
  • Envoyez la sortie au client.

Si nous supposons que vous allez écrire un servlet, voici le morceau de code.

public void doGet(HttpServletRequest request,
   HttpServletResponse response) throws IOException, ServletException {
   String targetId = request.getParameter("id");
   
   if ((targetId != null) && !accounts.containsKey(targetId.trim())) {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>true</valid>");
   } else {
      response.setContentType("text/xml");
      response.setHeader("Cache-Control", "no-cache");
      response.getWriter().write("<valid>false</valid>");
   }
}

La fonction de rappel processRequest () est appelée

L'objet XMLHttpRequest a été configuré pour appeler la fonction processRequest () lors d'un changement d'état du readyState de l' objet XMLHttpRequest . Maintenant, cette fonction recevra le résultat du serveur et effectuera le traitement requis. Comme dans l'exemple suivant, il définit un message variable sur true ou false en fonction de la valeur renvoyée par le serveur Web.

function processRequest() {
   if (req.readyState == 4) {
      if (req.status == 200) {
         var message = ...;
...
}

Le DOM HTML est mis à jour

C'est la dernière étape et dans cette étape, votre page HTML sera mise à jour. Cela se passe de la manière suivante -

  • JavaScript obtient une référence à n'importe quel élément d'une page à l'aide de l'API DOM.
  • La méthode recommandée pour obtenir une référence à un élément est d'appeler.
document.getElementById("userIdMessage"), 
// where "userIdMessage" is the ID attribute 
// of an element appearing in the HTML document
  • JavaScript peut maintenant être utilisé pour modifier les attributs de l'élément; modifier les propriétés de style de l'élément; ou ajouter, supprimer ou modifier les éléments enfants. Voici un exemple -

<script type = "text/javascript">
   <!--
   function setMessageUsingDOM(message) {
      var userMessageElement = document.getElementById("userIdMessage");
      var messageText;
      
      if (message == "false") {
         userMessageElement.style.color = "red";
         messageText = "Invalid User Id";
      } else {
         userMessageElement.style.color = "green";
         messageText = "Valid User Id";
      }
      
      var messageBody = document.createTextNode(messageText);
      
      // if the messageBody element has been created simple 
      // replace it otherwise append the new element
      if (userMessageElement.childNodes[0]) {
         userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
      } else {
         userMessageElement.appendChild(messageBody);
      }
   }
   -->
</script>

<body>
   <div id = "userIdMessage"><div>
</body>

Si vous avez compris les sept étapes mentionnées ci-dessus, alors vous avez presque terminé avec AJAX. Dans le chapitre suivant, nous verrons l' objet XMLHttpRequest plus en détail.

L'objet XMLHttpRequest est la clé d'AJAX. Il est disponible depuis la sortie d'Internet Explorer 5.5 en juillet 2000, mais n'a été entièrement découvert que lorsque AJAX et Web 2.0 en 2005 sont devenus populaires.

XMLHttpRequest (XHR) est une API qui peut être utilisée par JavaScript, JScript, VBScript et d'autres langages de script de navigateur Web pour transférer et manipuler des données XML vers et depuis un serveur Web à l'aide de HTTP, établissant un canal de connexion indépendant entre le côté client d'une page Web et Du côté serveur.

Les données renvoyées par les appels XMLHttpRequest seront souvent fournies par des bases de données dorsales. Outre XML, XMLHttpRequest peut être utilisé pour récupérer des données dans d'autres formats, par exemple JSON ou même du texte brut.

Vous avez déjà vu quelques exemples sur la façon de créer un objet XMLHttpRequest.

Vous trouverez ci-dessous quelques-unes des méthodes et propriétés avec lesquelles vous devez vous familiariser.

Méthodes XMLHttpRequest

  • abort()

    Annule la demande en cours.

  • getAllResponseHeaders()

    Renvoie l'ensemble complet des en-têtes HTTP sous forme de chaîne.

  • getResponseHeader( headerName )

    Renvoie la valeur de l'en-tête HTTP spécifié.

  • open( method, URL )

  • open( method, URL, async )

  • open( method, URL, async, userName )

  • open( method, URL, async, userName, password )

    Spécifie la méthode, l'URL et d'autres attributs facultatifs d'une demande.

    Le paramètre de méthode peut avoir la valeur "GET", "POST" ou "HEAD". D'autres méthodes HTTP telles que "PUT" et "DELETE" (principalement utilisées dans les applications REST) ​​peuvent être possibles.

    Le paramètre "async" spécifie si la demande doit être traitée de manière asynchrone ou non. "true" signifie que le traitement du script se poursuit après la méthode send () sans attendre de réponse, et "false" signifie que le script attend une réponse avant de continuer le traitement du script.

  • send( content )

    Envoie la demande.

  • setRequestHeader( label, value )

    Ajoute une paire étiquette / valeur à l'en-tête HTTP à envoyer.

Propriétés XMLHttpRequest

  • onreadystatechange

    Un gestionnaire d'événements pour un événement qui se déclenche à chaque changement d'état.

  • readyState

    La propriété readyState définit l'état actuel de l'objet XMLHttpRequest.

    Le tableau suivant fournit une liste des valeurs possibles pour la propriété readyState -

Etat La description
0 La demande n'est pas initialisée.
1 La demande a été configurée.
2 La demande a été envoyée.
3 La demande est en cours.
4 La demande est terminée.

readyState = 0 Après avoir créé l'objet XMLHttpRequest, mais avant d'avoir appelé la méthode open ().

readyState = 1 Après avoir appelé la méthode open (), mais avant d'avoir appelé send ().

readyState = 2 Après avoir appelé send ().

readyState = 3 Une fois que le navigateur a établi une communication avec le serveur, mais avant que le serveur n'ait terminé la réponse.

readyState = 4 Une fois la demande terminée et les données de réponse ont été complètement reçues du serveur.

  • responseText

    Renvoie la réponse sous forme de chaîne.

  • responseXML

    Renvoie la réponse au format XML. Cette propriété renvoie un objet de document XML, qui peut être examiné et analysé à l'aide des méthodes et propriétés de l'arborescence de nœuds DOM du W3C.

  • status

    Renvoie l'état sous forme de nombre (par exemple, 404 pour "Non trouvé" et 200 pour "OK").

  • statusText

    Renvoie l'état sous forme de chaîne (par exemple, "Non trouvé" ou "OK").

Pour illustrer clairement à quel point il est facile d'accéder aux informations d'une base de données utilisant AJAX, nous allons construire des requêtes MySQL à la volée et afficher les résultats sur "ajax.html". Mais avant de continuer, faisons le travail de terrain. Créez une table à l'aide de la commande suivante.

NOTE - Nous supposons que vous disposez des privilèges suffisants pour effectuer les opérations MySQL suivantes.

CREATE TABLE 'ajax_example' (
   'name' varchar(50) NOT NULL,
   'age' int(11) NOT NULL,
   'sex' varchar(1) NOT NULL,
   'wpm' int(11) NOT NULL,
   PRIMARY KEY  ('name')
)

Videz maintenant les données suivantes dans cette table à l'aide des instructions SQL suivantes -

INSERT INTO 'ajax_example' VALUES ('Jerry', 120, 'm', 20);
INSERT INTO 'ajax_example' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'ajax_example' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'ajax_example' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'ajax_example' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'ajax_example' VALUES ('Julie', 35, 'f', 90);

Fichier HTML côté client

Maintenant, laissez-nous avoir notre fichier HTML côté client, qui est ajax.html, et il aura le code suivant -

<html>
   <body>
      <script language = "javascript" type = "text/javascript">
         <!-- 
         //Browser Support Code
         function ajaxFunction() {
            var ajaxRequest;  // The variable that makes Ajax possible!
            
            try {        
               // Opera 8.0+, Firefox, Safari
               ajaxRequest = new XMLHttpRequest();
            } catch (e) {
               
               // Internet Explorer Browsers
               try {
                  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
               } catch (e) {
                  
                  try {
                     ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                  } catch (e) {
                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
            }
            
            // Create a function that will receive data
            // sent from the server and will update
            // div section in the same page.
            ajaxRequest.onreadystatechange = function() {
            
               if(ajaxRequest.readyState == 4) {
                  var ajaxDisplay = document.getElementById('ajaxDiv');
                  ajaxDisplay.innerHTML = ajaxRequest.responseText;
               }
            }
            
            // Now get the value from user and pass it to
            // server script.
            var age = document.getElementById('age').value;
            var wpm = document.getElementById('wpm').value;
            var sex = document.getElementById('sex').value;
            var queryString = "?age = " + age ;
            
            queryString +=  "&wpm = " + wpm + "&sex = " + sex;
            ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
            ajaxRequest.send(null); 
         }
         //-->
      </script>

      <form name = 'myForm'>
         Max Age: <input type = 'text' id = 'age' /> <br />
         Max WPM: <input type = 'text' id = 'wpm' /> <br />
         Sex: 
         
         <select id = 'sex'>
            <option value = "m">m</option>
            <option value = "f">f</option>
         </select>
         
         <input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
      </form>
      
      <div id = 'ajaxDiv'>Your result will display here</div>
   </body>
</html>

NOTE - La manière de passer des variables dans la requête est conforme au standard HTTP et a formA.

URL?variable1 = value1;&variable2 = value2;

Le code ci-dessus vous donnera un écran comme indiqué ci-dessous -

Votre résultat s'affichera ici dans cette section après avoir effectué votre saisie.

NOTE - Ceci est un écran factice.

Fichier PHP côté serveur

Votre script côté client est prêt. Maintenant, nous devons écrire notre script côté serveur, qui récupérera l'âge, le wpm et le sexe de la base de données et le renverra au client. Mettez le code suivant dans le fichier "ajax-example.php".

<?php
$dbhost = "localhost"; $dbuser = "dbusername";
$dbpass = "dbpassword"; $dbname = "dbname";
	
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass); //Select Database mysql_select_db($dbname) or die(mysql_error());
	
// Retrieve data from Query String
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
	
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
	
//build query
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";

if(is_numeric($age)) $query .= " AND age <= $age"; if(is_numeric($wpm))
   $query .= " AND wpm <= $wpm";
	
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());

//Build Result String
$display_string = "<table>"; $display_string .= "<tr>";
$display_string .= "<th>Name</th>"; $display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>"; $display_string .= "<th>WPM</th>";
$display_string .= "</tr>"; // Insert a new row in the table for each person returned while($row = mysql_fetch_array($qry_result)) { $display_string .= "<tr>";
   $display_string .= "<td>$row[name]</td>";
   $display_string .= "<td>$row[age]</td>";
   $display_string .= "<td>$row[sex]</td>";
   $display_string .= "<td>$row[wpm]</td>";
   $display_string .= "</tr>"; } echo "Query: " . $query . "<br />";
$display_string .= "</table>"; echo $display_string;
?>

Maintenant, essayez en entrant une valeur valide (par exemple, 120) dans Max Age ou dans toute autre case, puis cliquez sur le bouton Requête MySQL.

Votre résultat s'affichera ici dans cette section après avoir effectué votre saisie.

Si vous avez réussi cette leçon, vous savez comment utiliser MySQL, PHP, HTML et Javascript en tandem pour écrire des applications AJAX.

Sécurité AJAX: côté serveur

  • Les applications Web AJAX utilisent les mêmes schémas de sécurité côté serveur que les applications Web classiques.

  • Vous spécifiez les exigences d'authentification, d'autorisation et de protection des données dans votre fichier web.xml (déclaratif) ou dans votre programme (programmatique).

  • Les applications Web basées sur AJAX sont soumises aux mêmes menaces de sécurité que les applications Web classiques.

Sécurité AJAX: côté client

  • Le code JavaScript est visible par un utilisateur / hacker. Hacker peut utiliser du code JavaScript pour déduire les faiblesses côté serveur.

  • Le code JavaScript est téléchargé à partir du serveur et exécuté ("eval") chez le client et peut compromettre le client par un code mal intentionné.

  • Le code JavaScript téléchargé est limité par le modèle de sécurité du bac à sable et peut être assoupli pour le JavaScript signé.

AJAX se développe très rapidement et c'est la raison pour laquelle il contient de nombreux problèmes. Nous espérons qu'avec le temps, ils seront résolus et AJAX deviendra idéal pour les applications Web. Nous énumérons quelques problèmes dont AJAX souffre actuellement.

Complexity is increased

  • Les développeurs côté serveur devront comprendre que la logique de présentation sera requise dans les pages client HTML ainsi que dans la logique côté serveur.

  • Les développeurs de pages doivent avoir des compétences en technologie JavaScript.

AJAX-based applications can be difficult to debug, test, and maintain

  • JavaScript est difficile à tester - les tests automatiques sont difficiles.
  • Faible modularité en JavaScript.
  • Absence de modèles de conception ou de directives de bonnes pratiques pour le moment.

Toolkits/Frameworks are not mature yet

  • La plupart d'entre eux sont en phase bêta.

No standardization of the XMLHttpRequest yet

  • La future version d'IE abordera ce problème.

No support of XMLHttpRequest in old browsers

  • Iframe vous aidera.

JavaScript technology dependency and incompatibility

  • Doit être activé pour que les applications fonctionnent.
  • Il existe encore des incompatibilités de navigateur.

JavaScript code is visible to a hacker

  • Un code JavaScript mal conçu peut entraîner des problèmes de sécurité.