Fiche Javascript AJAX : données, fichiers et dialogue client-serveur

Objet de la fiche :

État de la fiche

Plan de la fiche

• | Avant propos |
• | Le dialogue client serveur |
• | L'objet XML HTTP Request |
• | Récupération de données ou fichiers |
• | HTML dans l'objet XMLHTTPREQUEST |
• | L'interface DOMImplementation |
• | Application au projet de site Web |

Avant propos

Les sites web dynamiques requièrent des mises à jour en temps réel et cela de manière transparente sans avoir à recharger la page. Cette méthodologie se retrouve sous plusieurs techniques, notamment l’utilisation des objets XMLHttpRequest de Javascript et est communément connue sous le nom AJAX. Au dela de la mise à jour de données en temps réel, cette technique permet aussi de télécharger des fichiers et de les manipuler avant de les présenter à l'internaute.

Le dialogue client serveur

Généralités

XML HTTP Request est basé sur le principe d'échange de données entre un client (la page WEB de l'internaute qui prend l'initiative de la connexion) et un serveur sur lequel se trouve la page ou l'application à laquelle la page Web veut accéder.

C'est donc une méthode de communication entre des applications dans le but d'aboutir à un échange de données entre les deux parties.
La communications peut être établie en mode connecté comme c'est le cas avec le protocole TCP (Transport Control Protocol) : les 2 ordinateurs établissent une liaison virtuelle avant le transfert effectif des données. Un message d'erreur est renvoyé si les informations ne sont pas correctement réceptionnées.
Ou en mode non connecté comme c'est le cas avec le protocole UDP (User Datagram Protocol) pour lequel l'envoi se fait sans aucun contrôle de la réception effective des informations ( UDP ne permet pas de transmettre les informations concernant l'émetteur).

Le point de communication entre les deux processus a pour nom socket : un socket et le résultat de la combinaison d’une adresse IP et d’un numéro de port. AInsi la combinaison de 2 sockets définit de manière complète et unique une connexion TCP ou un échange UDP

Note 1 : UDP est souvent utilisé pour des applications en diffusion/multidiffusion. Autre exemple pour des applications qui tolèrent la perte occasionnelle de petits paquets, mais exigent une grande vitesse de transmissions comme c'est le cas pour la voix sur IP.

Note 2 : Comme l'adresse IP qui sert à identifier de façon unique un ordinateur sur le réseau, le port (ou numéro de port) indique l'application à laquelle les données sont destinées. Chaque application possède ainsi son propre numéro de port. Certains port sont dit "réservés" (0 à 1023) : parmi les plus connus 21 pour le protocole FTP ou 80 pour le HTTP. Il existe aussi les ports dits "ports enregistrés" (1024 à 49151) et les ports "dynamiques et/ou privés".

Les diverses couches mise en jeu. Correspondances avec le système OSI

L'objet XML HTTP Request

Généralités

L'objet XML HTTP Request n'est pas limité à l'usage exclusif de documents XML, il peut recevoir ou envoyer tous types de données et supporte d'autres protocoles que HTTP (incluant file et ftp).

L’utilisation de XHR est relativement simple en soit. Il vous suffit d’instancier un objet de ce type, d’ouvrir une url (ou un fichier local à votre serveur si vous préférez) et d’envoyer une requête (de type GET ou POST) avec ou sans paramètres. Malgré le fait que l’objet XHR puisse être utilisé avec plusieurs types de protocole, nous ne nous intéresserons à son utilisation qu’au travers du protocole HTTP. Le code d’état HTTP de la requête (réponse) ainsi que les données (le document) qui lui sont rattachés seront disponibles via cette instance d’objet.
L’objet XHR dispose d’une méthode d’appel et de retour, ce qui permet au navigateur de continuer à fonctionner normalement jusqu’à ce que la requête envoyée aboutisse et soit traitée en retour.

Principe général

Méthodes

Propriétés

Exemple de base

Le code suivant présente une fonction(StartXMLHttpRequest()) qu'il suffit d'appeler avec les paramètres requis pour récupérer l'information désirée.

4 paramètres sont à renseigner lors de l'appel de la fonction.

• _location (chaîne) : adresse + paramètres éventuels de la page que l'on veut atteindre,
• _Asynchrone (booleen): Demande synchrone (false) ou asynchrone (true),
• _typeReponse (chaîne): Réponse de type fichier texte ("texte") ou xml ("xml"),
• _typeAction (valeur): Fonction de traitement des résultats.

Exemple de syntaxe utilisée

On peut appeller la fonction de la façon suivante : StartXMLHttpRequest("http://toto.titi.fr",true,"texte",monResultat);

On traitera les résultats dans la fonction monResultat()

Le code général

Concrètement

Sécurité

Par défaut cet objet ne peut recevoir une réponse que sur le même serveur sur lequel la demande a été émise.

L'utilisation de cette fonctionnalité peut avoir des impacts sur votre application :

• Premièrement, la plupart des navigateurs supportant cette fonctionnalité, doivent se connecter en http mais pas en "file" (acces direct au dique dur du pc), ce qui signifie que vous ne pourrez pas tester des pages d'un disque dur local sans quelques précautions de sécurité supplémentaires. Certain navigateur comme Mozilla exige que vous enveloppiez l'accès à l'objet à l'intérieur de UniversalBrowserRead pour se prémunir des privilèges de sécurité (alerte à l'utilisateur qu'une activité potentiellement dangereuse est en cours et offrir la possibilité d'annuler l'action).
• Deuxièmement , le domaine de destination de la requête doit être le même que celui du serveur qui fourni la page web et qui contient le script. Cela signifie que TOUT doit venir du même domaine.

Note¹ Transmissions de données ou fichiers. Les methodes post et get.

Habituellement seule la méthode GET est utilisée en particulier lorsque il n'y a pas ou peu de paramètres à transmettre au serveur. Toutefois il existe beaucoup de cas qui nécessitent l'utilisation de la méthode POST dans la création de la requête ajax comme par exemple pour des raisons de sécurité , ou lorsque l'on désire uploader un fichier, ou encore lorsque le nombre de paramètres est important.

De manière générale la méthode GET s'applique de la manière suivante :

De manière générale la méthode POST s'applique de la manière suivante :

Remarque sur "Content-type", "application/x-www-form-urlencoded") :

Les requêtes de type POST application/x-www-form-urlencode sont utilisées à la soumission d'un formulaire dont la propriété enctype a la valeur application/x-www-form-urlencode (c'est la valeur par défaut). Le format d'encodage des données est le même que pour les paramètres GET.

A titre d'information il existe des requêtes POST multipart/form-data. Ces requêtes sont utilisées à la soumission d'un formulaire dont la propriété entype est à multipart/form-data. Le format est plus complexe que pour les POST application/x-www-form-urlencode, car elles doivent permettre d'envoyer des fichiers en plus des données (pour s'y retrouver fichiers et données sont alors séparés par un élément séparateur dénommé bondary (frontière).

Récupération de données ou fichiers

Données sous forme de fichiers XML

Format général d'un fichier XML

XML pour Extensible Markup Language a été défini en 1998 par le World Wide Web Consortium (W3C).

Un document XML consiste en une liste d'éléments, chaque élément est défini par un contenu toujours encadré par une balise de départ et une balise de fin. Le nom de la balise peut être un nom quelconque.
Un document XML doit posséder un unique élément racine qui englobe l'ensemble des éléments. XML fait la différence entre majuscules et minuscules.

Un document XML doit respecter les règles suivantes lors de sa construction :

• Le fichier démarre toujours par un prologue : qui décrit le fichier. Ce prologue peut être minimal (<?xml version="1.0"?> ou peut contenir des suppléments d'informations comme par exemple <?xml version="1.0" encoding="UTF-8" standalone="yes" ?>.
  Note standalone : si le document XML fait référence à une DTD ou à des entités définies dans un autre fichier, il faut mettre standalone="no", sinon, on utilise standalone="yes".
• Chaque balise d'ouverture doit avoir une balise de fermeture. Une balise sans contenu est appelée "empty tag" comme par exemple <flag/>
• Il ne doit pas y avoir de chevauchement de balise

Ce type de fichier présente de multiples avantages

• C'est un fichier texte, editable par n'importe quel éditeur de texte (note, wordpad ..).
• Ce fichier contient des données, mais ne défini pas comment elles doivent être affichées.
• XML est un format bien connu dont les données peuvent être transférées sous différents formats. Beaucoup d'applications proposent d'enregistrer des données issues d'un format XML ou de sauvegarder dans ce type de format.
• XML peut être facilement manipulé (lecture de données) par différents analyseurs syntaxique (parser).

Un fichier XML est dit valid s'il est correctement formatté et s'il contient un lien vers un fichier xml shéma associé, lui-même devant être un fichier valide.

Exemple

Ce petit fichier contient une liste de chansons (listepistes) et pour chaque chanson (track) un descriptif (title pour titre , creator pour le lieux de création, location pour accéder au fichier, image s'il existe le chemin d'accés à l'image de la pochette, album pour indiquer le type de musique.
Un fichier XML est en fait une base de données ordonnées au format texte.

Récupération et exploitation des données

Données sous forme de fichiers json

Généralités

JSON (JavaScript Object Notation) est simplement un format trés simple pour le transfer de tout types de données entre deux utilisateurs. A la base c'est un fichier texte contenant des informations spécialement formattées suivant les recommendations JSON.
Ses principaux avantages sont les suivants :

• C'est un fichier texte donc compréhensible simplement par toutes les plateformes et logiciels,
• Il permet de transmettre tout types de données (tableau, chaine, entier, objet …),
• Pour décrire la même chose il est beaucoup moins lourd que XML,
• Sa syntaxe est simple et le jeu de recommendations trés réduit,
• Comme il est issue de la notation objet utilisée en javascript, il est complètement intégré à cet environnement.

Elements de syntaxe

• { } : le contenu entre { } est un objet ou un ensemble d'objets.
• , : la virgule est utilisée comme séparateur entre attributs.
• : : séparateur pour associer une valeur ou un tableau à l'attribut.
• = : séparateur de fonction identique à : mais pour associer une valeur de type texte à l'attribut.
• [ ] : le contenu entre [ ] est un tableau.

Seulement 5 éléments de syntaxe que l'on peut combiner comme l'on veut pour formater tout type de donnée

Exemples

On va mettre sous forme JSON le fichier XML vu précédemment.

Combinaison 1

Un seul élément comme objet JSON. Les parties rouges sont relatives à la syntaxe JSON, les partie vertes sont des données classiques de type tableau associatif.

Combinaison 2

Plusieurs éléments composent l'objet JSON. Mêmes règles de couleurs que précédemment.

Récupérer un fichier JSON

Récupérer un fichier JSON avec du javascript pur:

• présence directe du fichier dans la page HTML au même titre qu'un fichier .js de JavaScript,
  
  var xyz = {"nom":"Rambo","age":25,"hobby":["castagne","armes","sport"]};
  
  
  
  
• chargement par une commande JavaScript,
  Exp : var xyz = {"nom":"Rambo","age":25,"hobby":["castagne","armes","sport"]};

Récupérer un fichier JSON avec XMLHttpRequest (AJAX)

Lire les données d'un fichier JSON

De manière simple

Reprenons l'exemple var xyz = {"nom":"Rambo","age":25,hobby:["castagne","armes","sport"]}

Aprés transfert via XMLHttpRequest

Avertissement

Dans les applications Web fonctionnant avec XMLHttpRequest, on autorise la communication uniquement dans le même domaine. Ceci constitue un élément de sécurité important, mais toutefois pas infaillible dans le cas de transfer de donnée JSON. Le serveur se doit d'être trés rigoureux dans son codage JSON, ainsi que dans la vérification des contenus, afin de ne pas délivrer du texte JSON invalide ou dangereux (commandes javascript). Pour se prémunir contre celà, il est fortement conseillé d'utiliser un parser (Note¹) JSON qui ne reconnait que du texte JSON , rejettant ainsi toutes tentatives de scripts malveillants.

var xyz = JSON.parse('{"nom":"Rambo","age":25,"hobby":["castagne","armes","sport"]}');

Note¹ : un parser ou analyseur syntaxique consiste à mettre en évidence la structure d'un texte. La structure révélée par l'analyse donne alors précisément la façon dont les règles de syntaxe sont combinées et appliquées dans le texte.

JSON.parse()

Cette fonction convertit une chaîne JSON en un objet. De plus elle se charge de l'analyse syntaxique du texte.

Syntaxe : var monObjetParse = JSON.parse(text [, reviver])

Si un reviver (paramètre optionnel) est spécifié en tant que fonction on peut effectuer une opération de transformation sur la valeur parsée avant de la renvoyer. Plus précisément, la valeur calculée, et toutes les propriétés (commençant avec les propriétés les plus imbriquées), sont passées individuellement au reviver, qui est appelé avec : l'objet contenant la propriété en cours de traitement, le nom de la propriété en chaine de caractères et la valeur de la propriété. Si la fonction reviver retourne undefined (ou ne retourne aucune valeur, par exemple si l'exécution s'arrête à la fin de la fonction), la propriété est supprimée de l'objet. Autrement la propriété est redéfinie avec la valeur retournée.

Exemple d'utilisation

<script type="text/javascript"> var info = ""; var textJson = ' [ {"nom":"Rambo","age":25,"hobby":["castagne","armes","sport"]}, {"nom":"Schwartzenegger","age":35,"hobby":["lecture","canifs","danse"]} ] '; var xyz = JSON.parse(textJson); info = "Parse sans reviver" + "\n"; for(var index in xyz) { info+= index + " : "+ xyz[index].nom + " " + xyz[index].hobby[0] + "\n";} xyz = JSON.parse(textJson, function (key, value) { if(value == "Rambo") value = "Schwartzenegger"; else if(value == "Schwartzenegger") value = "Rambo"; return value; }); info += "\n" + "Parse avec reviver intervertissant les noms" + "\n"; for(var index in xyz) { info+= index + " : "+ xyz[index].nom + " " + xyz[index].hobby[0] + "\n";} alert(info); </script>

HTML dans l'objet XMLHTTPREQUEST

La spécification W3C qui à l'origine supportait seulement l'analyse syntaxique XML, et texte supporte aussi maintenant l'analyse syntaxique du HTML, .Cette caractéristique permet aux applications Web d'obtenir une ressource de HTML pour l'analyse syntaxique du DOM.

L'interface DOMImplementation

L'object XMLHttpRequest est pratique pour récupérer un peu n'importe quoi comme type de données (text, XML, HTML...), mais à cause de ses contraintes d'utilisation (sécurité), il est parfois nécessaire d'utiliser d'autres méthodes en particulier lorsque l'on fonctionnement en site local.