IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
logo
Sommaire > Les technologies d'Ajax
        Qu'est ce que c'est qu'Ajax?
        Quels sont les principaux avantages et inconvénients d'Ajax?
        Quels sont les navigateurs compatibles avec xmlHttRequest?
        Comment obtenir un objet XmlHttpRequest compatible avec tous les navigateurs?
        XHR est asynchrone, qu'est ce que ça veux dire?
        Que signifie l'erreur d'Internet Explorer : Erreur système : -1072896658 Code 0 ?
        Comment évaluer le contenu des balises script retourné par un appel Ajax?
        Qu'est ce que la notation JSON?
        Comment mettre à jour un calque (div) avec un appel Ajax, en utilisant le framework prototype?

rechercher
precedent    sommaire    suivant    telechargermiroir


Qu'est ce que c'est qu'Ajax?
auteur : denisC
AJAX est un acronyme pour Asynchronous JavaScript And XML (Javascript Asynchrone et XML). Il s'agit d'un concept inventé en 2004 et reposant sur des fondements bien plus anciens.

Le principe de base est d'intercepter en utilisant JavaScript les évènements survenants sur la page, et d'insérer dynamiquement dans la page un contenu provenant d'un serveur web, véhiculé par un document XML, toujours en utilisant JavaScript.
La pierre angulaire de cette méthode est l'objet xmlHttpRequest (parfois appelé XHR), qui permet à JavaScript d'effectuer une requête vers le serveur sans que l'utilisateur ne le voie, et ce de façon asynchrone (en laissant la mais à l'utilisateur).

schéma de fonctionnement d'Ajax
Principe de fonctionnement d'Ajax

Quels sont les principaux avantages et inconvénients d'Ajax?
auteur : denisC
Voila les principaux avantages et inconvénients généralement cités concernant l'utilisation d'Ajax.

Avantages:

  • Interactivité : les interfaces utilisant Ajax offrent une interactivité et une réactivité bien plus importantes que les pages habituels, ou l'utilisateur doit attendre le rechargement complet de sa page.
  • Portabilité : Tous les navigateurs actuels proposent l'ensemble des outils nécessaires à la mise en place d'un moteur Ajax
Inconvénients:

  • Ergonomie : L'utilisation d'Ajax entraine une impossiblité pour l'utilisateur d'utiliser son bouton "Retour" de façon attendue. De la même façon, Ajax pose des problèmes pour la mise en place de signets (bookmarks) sur les pages, ainsi que pour l'indexation du contenu des pages.
  • Temps de latence : Les appels vers le serveur peuvent avoir des temps de latence importants qui sont mal perçus et compris par les utilisateurs.
  • Utilisation de javascript : Le moteur Ajax fait fortement appel au javvascript. Il faut prévoir pour les utilisateurs ayant désactivé Javascript ou ne pouvant pas l'utiliser, une solution de repli acceptable.
  • Complexité des développements : Comme tout composant additionnel Ajax offre des possibilités, mais la mise en place peut se révéler coûteuse au moment du développement.

Quels sont les navigateurs compatibles avec xmlHttRequest?
auteur : denisC
Les navigateurs qui prennent en charge l'objet xmlHttpRequest sont:

  • Konqueror 3.3
  • Microsoft IE 5.5
  • Mozilla 1.4
  • Mozilla Firefox 0.8
  • Netscape 7.1
  • Opera 8.01
  • Safari 1.2.1
Toutes les versions plus récentes de ces navigateurs supportent bien entendu également les objets xmlHttpRequest.


Comment obtenir un objet XmlHttpRequest compatible avec tous les navigateurs?
auteur : denisC
La méthode ci-dessous permet de retourner un objet XmlHttpRequest dans tous les navigateurs supportant actuellement cet objet :
function getXMLHTTP(){
  var xhr=null;
  if(window.XMLHttpRequest) // Firefox et autres
  xhr = new XMLHttpRequest();
  else if(window.ActiveXObject){ // Internet Explorer
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e1) {
        xhr = null;
      }
    }
  }
  else { // XMLHttpRequest non supporté par le navigateur
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
  }
  return xhr;
}

XHR est asynchrone, qu'est ce que ça veux dire?
auteur : denisC
L'objet xmlHttpRequest est la plupart de temps utilisé en mode asynchrone (qui fait tout sont intérêt).

En mode asynchrone, on donne l'adresse à laquelle l'objet XHR doit aller requeter (via la méthode open) puis sa réaction à faire quand la requête reviendra (via la propriété onreadystatechange). Une fois XHR programmé de cette façon, on l'envoi par la méthode send.

A partir de là, telle une fusée dans l'espace, XHR part au loin et est en mode automatique. JavaScript nous rends la main (à l'utilisateur et/ou au script javascript) en sachant que XHR est correctement programmé.

Si on essaye d'accéder à la réponse associée à l'objet xmlHttpRequest tout de suite après l'avoir envoyé, celle-ci ne sera pas encore disponible.
De la même façon si on réutilise ce même objet XHR dans un script suivant directement le précédent, il y a fort à parier que celui-ci n'aura pas terminé sa requête. En lui passant des nouveaux paramètres avec open, onreadystatechange et send, on lui annule complètement sa mission précédente et on lui en redonne une autre.

Quelles sont les solutions?

Pour l'accès à la réponse de l'objet xmlHttpRequest, la seule et unique solution est d'accéder à ces propriétés (responseText et reponseXml) uniquement dans la méthode liée au onchange de l'objet xmlHtttpRequest.

Pour faire plusieurs requêtes, les solutions sont multiples:

  • Se faire suivre les deux requêtes. Pour cela, il suffit d'indiquer à XHR qu'à son retour (onreadystatechange), il pourra directement repartir pour une autre mission.
  • Effectuer les deux requêtes en parallèle. Pou cela, nous allons devoir créer deux instances de xmlHttpRequest différentes (deux fusées), qui travailleront indépendamment.
  • Réunir les deux requêtes. Généralement, si les deux requêtes se suivent systématiquement, il serait bien plus simple de n'effectuer qu'une seule requête vers le serveur, cette requête ramenant l'information nécessaire pour les deux actions.
  • Dernière possibilité, certainement la plus mauvaise: utiliser XHR en mode synchrone. Dans ce cas, le navigateur sera bloqué tant que la requête ne sera pas revenue.

Que signifie l'erreur d'Internet Explorer : Erreur système : -1072896658 Code 0 ?
auteur : denisC
Il arrive parfois, lorsque l'on tente d'accéder à l'attribut responseText d'un objet XmlHttpRequest sous Internet Explorer que celui-ci renvoie l'erreur Erreur système : -1072896658 Code 0.
Ce texte d'erreur n'est pas d'une limpidité absolue, mais il signifie tout simplement que le jeu de caractères (charset) utilisé par le serveur n'est pas reconnu par Internet Explorer.
Assurez-vous d'avoir correctement placé le header dans le code que vous renvoyez:
Content-Type: text/plain; charset=UTF-8

Comment évaluer le contenu des balises script retourné par un appel Ajax?
auteur : Erwy
Lorsqu'un appel ajax retourne du contenu HTML contenant des scripts, ceux-ci ne sont pas évalués tout seul si vous vous contentez de les insérer dans votre page. Il est nécessaire de les évaluer à la main.
var mesScripts = document.getElementById("idDuDivDInsertion").getElementsByTagName("script");
for (var i=0; i<mesScripts.length; i++) {
	eval(mesScripts[i].innerHTML);
}
lien : Exemple d'utilisation de ce script

Qu'est ce que la notation JSON?
auteur : denisC
La notation JSON (Javascript Object Notation) est un format permettant le passage des données à un programme Javascript. Ce format est un des format utilisé dans le cadre d'Ajax. Il présente l'avantage d'être plus leger que XML, et d'être très facilement récupérable par le script javascript.

Il utilise la notation des tableaux associatifs de Javascript, sous la forme:
var objet = {"propriété1" : "valeur1" , "propriété2" : "valeur2"}
objet a ainsi les attributs propriété1 et propriété2.

Cette notation peut également être utilisé pour les méthodes des objets :
var objetAvecMethodesJSON = {"disBonjour" : function() {alert('bonjour')}  , "propriété2" : "valeur2"};
L'objet peut être récupéré d'une requete Ajax au format habituel grace à la méthode eval:
var objet = eval(xhr.responseText);
La sortie au format JSON et supporté nativement par PHP 5.2 et est instrumenté par plusieurs bibliothèque Java, C# et dans la plupart des autres langages actuels.

lien : en Le site officiel de JSON

Comment mettre à jour un calque (div) avec un appel Ajax, en utilisant le framework prototype?
auteur : denisC
Le framework Prototype permet de simplifier fortement les appels ajax

Le code suivant va mettre dans l'élement ayant l'identifiant 'idDuDiv' le code HTML retourné par l'appel à la page 'adresseDeLaPage.php' en transmettant le paramètre donné.
var url = 'adresseDeLaPage.php';
var pars = 'param1=valeur1';
var target = 'idDuDiv';
var myAjax = new Ajax.Updater(target, url, {method: 'get', parameters: pars});
lien : Exemple d'utilisation de ce script

rechercher
precedent    sommaire    suivant    telechargermiroir

Consultez les autres F.A.Q's


Valid XHTML 1.1!Valid CSS!

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.