 |
|
|
| |
| TUTORIEL CLIENTS WEB |
|
|
|
| XMLHttpRequest : des requêtes SQL transparentes grâce à JavaScript |
| Présentation, exemple à l'appui, de cette technique combinant JavaScript avec des appels de fichiers côté serveur.
(06/04/2005) |
  |
Les applications côté client reviennent en force : Google en
tête, avec des projets comme GMail, Google Maps et Google Suggest,
mais également map.search.ch, démontrent de manière très visuelle
ce qu'il est possible de construire en combinant des techniques
variées et éprouvées, toutes basées sur l'usage intelligent
de ce qu'offre le navigateur en matière de support JavaScript.
Le point névralgique de ce mouvement tient dans l'existence
de l'objet XMLHttpRequest (disponible
au sein de IE sous le nom XMLHTTP), apparu vers 2001 mais ensuite
relativement négligé, tout comme l'ensemble de la programmation
JavaScript. C'est ce que nous allons étudier tout d'abord, avant
d'examiner une application concrète combinant HTML+JavaScript
à des appels PHP sur une base MySQL.
L'objet
Notre objet est donc accessible de différentes manières selon
que l'on y accède via IE/Win (il faut alors utiliser l'une des
deux méthodes ActiveX), ou les autres navigateurs. Les trois
méthodes sont :
var xmlhttp = new XMLHttpRequest();
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
Il convient bien sûr de faire des tests de compatibilité, ce
que nous verrons plus loin.
Cet objet nous offre bon nombre de méthodes et propriétés, que
nous listons dans le tableau suivant.
|
Méthodes
de l'objet XMLHttpRequest
|
|
Méthode
|
Description
|
|
open()
|
Met fin
à la requête en cours et en prépare une nouvelle, en
indiquant la méthode (GET ou POST) et l'URL.
|
|
send()
|
Lance
la requête
|
|
abort()
|
Met fin
à la requête en cours
|
|
setRequestHeader()
|
Assigne
un couple nom/valeur à l'en-tête accompagnant la requête
|
|
getResponseHeader()
|
Récupère
la valeur d'une chaîne de l'en-tête de réponse
|
|
getAllResponseHeader()
|
Récupère
l'ensemble des en-têtes de réponse
|
|
Proprétés
de l'objet XMLHttpRequest
|
|
Propriété
|
Description
|
|
status
|
Code renvoyé
par le serveur (exemple, 200 pour OK ou 404 pour un
fichier introuvable)
|
|
statusText
|
La chaîne
accompagnant le code
|
|
readyState
|
Un entier
indiquant l'état de l'objet. Peut prendre 5 valeurs
:
0 = non initialisé
1 = en cours de chargement
2 = chargé
3 = interaction
4 = terminé
|
|
onreadystate
|
Gestionnaire
d'évènement pour chaque changement d'état de l'objet
|
|
responseText
|
Chaîne
correspondant à la réponse du serveur à la requête
|
|
respondeXML
|
Version
XML de la chaîne de réponse
|
L'objet permet un appel transparent d'un script serveur : on
peur charger de nouvelles données au sein de la page, sans devoir
pour autant recharger l'intégralité de la page. Avec des serveurs
rapides, la réponse peut être instantanée, ce qui ouvre la voie
à des applications ayant plus de répondant.
Le tout, pour exploiter ces fonctionnalités, est d'instancier
correctement l'objet, selon le navigateur. Voici la fonction
idoine :
function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new
ActiveXObject("Microsoft.XMLHTTP");
} catch (E)
{
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined')
{
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject();
|
|
|
|
|
|
|
|
| Quand achetez-vous le plus en ligne ? |
|
|
|
|
|
|
|
|
| |
|
