par
Invité » 31 mai 2006, 10:43
Ajax utilise un objet XHR (XML HTTP REQUEST) c'est à dire un objet lui permettant d'envoyer en arrière-plan une requête HTTP (URL) et recevoir le résultat en XML/HTTP.
L'objet XHR communique en mode Asynchrone, c'est à dire qu'entre le moment où l'URL est demandée et le temps où le résultat est reçu, le navigateur n'est pas bloqué (n'attend pas) contrairement au fonctionnement normal si on demande l'url via la barre d'adresse du navigateur.
Ceci veut dire que lorsqu'on programme la conversation XHR il faut prévoir un conteneur de texte/html qui sera connecté à l'objet XHR et où le résultat d'un appel d'url sera écrit.
Le conteneur de résultat texte/html peut être n'importe quelle balise du document HTML (div, input, textarea, body...) ou tout simplement une variable js.
Exemple algorthmique:
Pour instaurer un dialogue XHR client/serveur, il faut:
- 1. créer un objet XHR
2. déclarer une fonction de réception du résultat connectée à un conteneur texte/html du document
3. envoyer l'url
Le programme suivant illustre cet algo:
<script>
//Création de l'objet XHR
function créer_xhr(){
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) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xhr;
}
//Appel d'url via XHR et orientation du résultat dans un conteneur de texte/html
function callUrl(url, conteneur_résultat){
// On crée un objet XHR
var xhr = créer_xhr();
// Si XHR absent ou url non valide
if (xhr ==null || url ==null) conteneur_résultat.innerHTML = "Ajax ne peut pas ouvrir '"+url+"', Objet XHR absent ou l'URL n'est pas valide!";
// Fonction d'attente du résultat
xhr.onreadystatechange = function(){
// Si le résultat est reçu, l'écrire dans le conteneur prévu
if (xhr.readyState == 4){
conteneur_résultat.innerHTML = (xhr.responseText);
}
// Si encore en attente du résultat
else conteneur_résultat.innerHTML = "Veuillez patienter svp...";
}
// On appelle l'url et on attend la réponse en mode asynchronne
xhr.open("GET",url,true);
xhr.send(null);
}
</script>
<H1>Ajax</H1>
<!-- Démarreur du dialogue Ajax -->
<input type='button' value='Forum Php France' onclick='callUrl("http://www.phpfrance.com/forums", document.all.reponse1);' />
<!-- Conteneur prévu pour recevoir le résultat du dialogue Ajax -->
<div id="reponse1"></div>
<!-- Démarreur du dialogue Ajax -->
<input type='button' value='Microsoft' onclick='callUrl("http://www.microsoft.com", document.all.reponse2);' />
<!-- Conteneur prévu pour recevoir le résultat du dialogue Ajax -->
<div id="reponse2"></div>
Ajax utilise un objet XHR (XML HTTP REQUEST) c'est à dire un objet lui permettant d'envoyer en arrière-plan une requête HTTP (URL) et recevoir le résultat en XML/HTTP.
L'objet XHR communique en mode Asynchrone, c'est à dire qu'entre le moment où l'URL est demandée et le temps où le résultat est reçu, le navigateur n'est pas bloqué (n'attend pas) contrairement au fonctionnement normal si on demande l'url via la barre d'adresse du navigateur.
Ceci veut dire que lorsqu'on programme la conversation XHR il faut prévoir un conteneur de texte/html qui sera connecté à l'objet XHR et où le résultat d'un appel d'url sera écrit.
Le conteneur de résultat texte/html peut être n'importe quelle balise du document HTML (div, input, textarea, body...) ou tout simplement une variable js.
Exemple algorthmique:
Pour instaurer un dialogue XHR client/serveur, il faut:
[list]1. créer un objet XHR
2. déclarer une fonction de réception du résultat connectée à un conteneur texte/html du document
3. envoyer l'url
[/list]
Le programme suivant illustre cet algo:
[php]
<script>
//Création de l'objet XHR
function créer_xhr(){
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) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xhr;
}
//Appel d'url via XHR et orientation du résultat dans un conteneur de texte/html
function callUrl(url, conteneur_résultat){
// On crée un objet XHR
var xhr = créer_xhr();
// Si XHR absent ou url non valide
if (xhr ==null || url ==null) conteneur_résultat.innerHTML = "Ajax ne peut pas ouvrir '"+url+"', Objet XHR absent ou l'URL n'est pas valide!";
// Fonction d'attente du résultat
xhr.onreadystatechange = function(){
// Si le résultat est reçu, l'écrire dans le conteneur prévu
if (xhr.readyState == 4){
conteneur_résultat.innerHTML = (xhr.responseText);
}
// Si encore en attente du résultat
else conteneur_résultat.innerHTML = "Veuillez patienter svp...";
}
// On appelle l'url et on attend la réponse en mode asynchronne
xhr.open("GET",url,true);
xhr.send(null);
}
</script>
<H1>Ajax</H1>
<!-- Démarreur du dialogue Ajax -->
<input type='button' value='Forum Php France' onclick='callUrl("http://www.phpfrance.com/forums", document.all.reponse1);' />
<!-- Conteneur prévu pour recevoir le résultat du dialogue Ajax -->
<div id="reponse1"></div>
<!-- Démarreur du dialogue Ajax -->
<input type='button' value='Microsoft' onclick='callUrl("http://www.microsoft.com", document.all.reponse2);' />
<!-- Conteneur prévu pour recevoir le résultat du dialogue Ajax -->
<div id="reponse2"></div>
[/php]
