utilisation simple de xmlhttpRequest

Version imprimable

Bonsoir,

De plus en plus d’applicatifs web semblent s’orienter vers l’objet xmlhttprequest.
Il y a d’ailleurs sur le net de nombreux tutos sur sa mise application, mais voilà, dans la majorité des cas ces exemples sont à base de formulaire, à croire que c’est l’unique façon pour questionner une db.

En fait, je recherche un exemple simplissime de requete utilisant cet objet, pour affichage dans un simple<div>, et non pas dans un formulaire, à l'image des tutos que j'ai parcourus.

Pour le côté php:
appel.php
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 //... $results = mysql_query("SELECT * FROM themes ORDER BY refer"); while ($produit = mysql_fetch_array($results)) { $ord = $produit["ord"]; $refer = htmlentities(StripSlashes($produit["refer"])); $date = $produit["date"]; $sujet = $produit["sujet"]; } //...
Pour la partie js :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var xhr_object = null; if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest(); else if(window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP"); else { alert("Navigateur incompatible !"); return; } xhr_object.open ("GET","appel.php?refer=" + refer, true) ; xhr_object.onreadystatechange = function anonymous() { if(xhr_object.readyState == 4) eval(xhr_object.responseText); } xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); var data = "$refer"; xhr_object.send(data);
Comme je ne suis pas un "expert" en js, j'ignore si à ce stade de script, on est bien dans les conditions pour afficher le résultat dans un <div>.
Peut-être avez-vous déjà l'expérience de l'utilisation de cet objet pour m'éclairer ?
Ou bien connaissez-vous un lien qui dispense d'un tuto sur une requete simple sans l'utilisation systématique d'un formulaire ?

Merci pour vos réponses éventuelles.
Cordialement

08/01/2006, 23h09
vg33

XMLHttpRequest est utilisable dans n'importe quelle situation. Souvent, c'est associé à un formulaire, car la raison principale de l'appel au serveur est un choix de l'utilisateur (si tu choisis "viennoiseries", j'affiche un select les différentes spécialités "croissant", "chocolatine"... sans être obligé de recharger la page).
Mais tu peux récupérer les données et les inclure par js dans la page dans n'importe quelle balise.
Exemple : tu choisis "chocolatine", js envoie une requête avec cet argument, la page renvoie <div><p>Miam, j'adore le chocolat !</p></div> et tu inclus ceci dans ta page.
Pour conclure, je ne vois pas vraiment le problème qui se pose à toi.
Dernière chose, j'ai posté il y a quelques temps un code js (dans le forum js, catégorie "Les meilleurs codes sources") pour utiliser facilement xmlhttprequest.
08/01/2006, 23h27
Vell

D'autant plus qu'il n'y a pas de différence entre un formulaire et un div : ce sont des entités html, donc la sortie (depuis php, et la gestion de l'affichage avec le js) se fait de la même manière ... Sauf qu'au lieu d'avoir <form id="Bidule"><textarea>(...) ce sera <p id="Bidule"> ou <div id="Bidule">
08/01/2006, 23h48
alain31tl

Merci pour vos réponses respectives :wink:

Par contre, tardé à répondre car j'ai recherché l'info de vg33 dans le forum js...en vain.
Peut-être n'est-elle plus d'actualité ?
En tout cas, je n'ai pas pu la localiser, même en utilisant le mdr de developpez. (?) :?
08/01/2006, 23h52
papyphp

Je l'ai cherchée moi aussi, et je l'ai trouvée

http://www.developpez.net/forums/vie...r=asc&start=45
09/01/2006, 00h03
alain31tl

Vu Gilmaire et merci !
arrff ! je m'étais polarisé sur le libellé. :)
09/01/2006, 01h01
vg33

Désolé, j'aurais dû mettre le lien :)
Merci de votre recherche :D

la ou tu fais :

Code:

1
2
3
4
xhr_object.onreadystatechange = function anonymous() {
         if(xhr_object.readyState == 4)
            eval(xhr_object.responseText);
      }

il te suffit de faire :

Code:

1
2
3
4
5
 
xhr_object.onreadystatechange = function anonymous() {
         if(xhr_object.readyState == 4)
            document.getElementById('iddiv').innerHTML = xhr_object.responseText;
      }

a condition d'avoir un div avec un id 'iddiv' ;)

09/01/2006, 03h02
alain31tl

ReBonsoir Siddh

Justement et tu viens précisemment de lever un "liévre" Siddh. :)

J’opére sur des db à structures différentes.
Certaines tables dont les éléments sont identifiés par un id, et d'autres pas.

Il est des cas spécifiques où l'utilisation d'un id (auto-incrémenté) est à proscrire car celà ne correspond pas, ou plus à la philosophie de l'application.
D'ailleurs, c'est le cas dans ma simple requête appel.php ci-dessus.
Ce ne sont pas les éléments associés à un id spécifique qui sont recherchés, mais ceux qui sont associés à un champ « x »refer.
La raison ? A l'inverse d'un ID, $refer peut figurer plusieurs fois dans la même table.

D'ordinaire et en php, j'utilise le traditionnel lien pour receuillir les différents éléments, par exemple :

Code:

<a href="ma-page-affichage.php?&ord=$ord&refer=$refer&date=$date&sujet=$sujet&truc=$turc&bidule=$bidule">$refer</a>

Et le résultat s’affiche dans une partie html standard<td></td>.
Bref, mes requêtes sont toujours identiques, c’est à dire toujours associées à un certain $refer, ce qui ne complique pas les choses.

Cependant, mes tables sont importantes et d’une telle lourdeur que l’affichage s’en ressent, et l’utilisation de l’objet xmlhttprequest en « arrière-plan » pourrait être une alternative à cet inconvénient.

En résumé, il me faudrait charger tous les éléments associés aux différents $refer via l’objet xmlhttp, et les afficher distinctement à la demande.

J’ai été plus clair ? :)

Code:

1
2
<a href="#" onclick="mafonction('ma-page-affichage.php?ord=$ord&refer=$refer&date=$date&sujet=$sujet&truc=$turc&bidule=$bidule')">$refer</a>
<div id='mondiv'></div>

et dans le head

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
function mafonction(lien){
	if(xhr_object){
	    xhr_object.onreadystatechange = function(){
		if(xhr_object.readyState == 4 && xhr_object.status == 200){
			document.getElementById('mondiv').innerHTML = xhr_object.responseText;
		}
            }
	    xhr_object.open("GET",lien,true);
	    xhr_object.send(null);
	}
       else // xhr_objectn'existe pas
	    alert("problème !");
}

Bonsoir Siddh

Merci pour ta suggestion.
Mes tests ne semblent pas fonctionnels et je n'obtiens aucun affichage. :oops:

A toute fin utile, mon fichier index.php ( sobre puisque je teste) se présente de cette façon :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
	<script type='text/JavaScript'>
 
	  function mafonction(lien){ 
      if(xhr_object){ 
       xhr_object.onreadystatechange = function(){ 
      if(xhr_object.readyState == 4 && xhr_object.status == 200){ 
         document.getElementById('mondiv').innerHTML = xhr_object.responseText; 
      } 
            } 
       xhr_object.open("GET","appel.php?refer"+ refer,true); 
       xhr_object.send(null); 
   } 
       else // xhr_objectn'existe pas 
       alert("problème !"); 
}
	</script>
</head>
<body>
<?php
// variable de test, existante dans ma table
$refer="test";
?>
<a href="#" onclick="mafonction('index.php?refer=$refer&ord=$ord&type=$type&nom=$nom&tel=$tel')">$refer</a> 
<div id='mondiv'></div>
</body>
</html>

Et mon fichier appel.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
require 'ma_connex.inc.php';
$results = mysql_query ("SELECT * FROM matable WHERE refer = '".$_GET['refer']."'");
 
while ($tri = mysql_fetch_array($results))
        {
?>
<table cellspacing="0">
<tr><td><?php echo $tri['refer'];?>><br>
    Numero :&nbsp;&nbsp;<? echo $tri['ord']; ?><br>
	Numero :&nbsp;&nbsp;<? echo $tri['type']; ?><br>
    Nom :&nbsp;&nbsp;<? echo $tri['nom']; ?><br>
	Tel :&nbsp;&nbsp;<? echo $tri['tel']; ?><br>
    </td></tr>
</table>
<?
} 
mysql_close();
?>

09/01/2006, 23h59
siddh

Code:

xhr_object.open("GET","appel.php?refer"+ refer,true);

il manque le = apres ?refer :

Code:

xhr_object.open("GET","appel.php?refer="+ refer,true);
10/01/2006, 00h07
alain31tl

Oui, exact !

Je viens de le mettre à jour et le résultat est tjrs négatif.
:(

Celà ne viendrait pas de cette ligne :

Code:

function mafonction(lien){

Vu que j'ai remplacé "lien" par l'url à la ligne (xhr_object.open) ?
10/01/2006, 00h13
siddh

euh oui met plutot :

Code:

onclick="mafonction('appel.php?refer=$refer')

et

Code:

xhr_object.open("GET",lien,true);

tu peux aussi tester ta page php seule dans ton navigateur en mettant l'adresse

Code:

appel.php?refer=x

en mettant une bonne valeur a la place de x ;)
10/01/2006, 00h29
alain31tl

Si je j'utilise la requete suivante et lance directement ma page appel.php,
Le résultat s'affiche,ce qui est normal.

Code:

$results = mysql_query ("SELECT * FROM courtoisy WHERE refer ='$refer'");

Mais pas dans le cas suivant :

Code:

$results = mysql_query ("SELECT * FROM courtoisy WHERE refer = '".$_GET['refer']."'");

Pourtant, je suis bien obligé d'utiliser une requete de ce type (GET) pour qu'elle soit en harmonie avec la syntaxe js. ( ??)

aie aie aie!
C'est bien ce que je disais à propos des exemples à partir de formulaires, ou de boite d'alerte, c'est bcp plus "assimilable". :)
Je sens que je vais laisser tomber cette option d'objet, jusqu'à ce que ce soit un peu plus "médiatisé". :wink:
10/01/2006, 00h56
siddh

tu tapes quoi comme url ?
il faut mettre appel.php?refer=....
10/01/2006, 01h28
alain31tl

Oui, je passe les parametres dans l'url:

Code:

appel.php?refer=$refer

Mais même en affectant une variable à refer (existante dans la table)
Ca passe pas en méthode GET.

Mais si j'utilise un requete classique du genre :

Code:

WHERE refer='$refer'

Ca passe mais dans ce cas là, celà ne correspond plus à la ligne :

Code:

xhr_object.open("GET"....

Je veux dire que je ne vois plus l'intérêt d'utiliser la méthode GET.

Bon de toute façon, c'est clair que pour afficher du php dans une boite d'alerte, il n'y a pas de probléme ( Dixit ton info) :wink:
Mais ça semble moins évident pour afficher dans un div, le résultat global d'une requête.
Ca fait pas mal de temps que je m'aventure sur les sites, blogs, etc qui traitent du sujet de cet objet, et jusqu'à présent, je n'ai même pas trouvé, ne serait-ce qu'un seul exemple de base.
Bon, je verrai plus tard, en attendant que ça bouge un peu plus.
En tout cas, je te remercie pour ta générosité et ta grande patience. :wink:
10/01/2006, 02h09
siddh
dans ta page appel.php, fais un
Code:

1 2 3 4 echo "<pre>"; print_r($_REQUEST); echo "</pre>";
pour voir si tu récupère bien ou pas ton paramètre.
Et tu l'appelle dans le navigateur.

Si ça affiche un tableau vide ou rien, il faut que tu changes le register_globals de ton php.ini ;)
10/01/2006, 03h43
alain31tl
Oui, vide mais j'ai bien mon array d'affiché.

Mais je ne pense pas que celà soit un probléme de déclaration des EGPCS , je dirais même impossible pour GET, puisque j'utilise déjà d'autres applications dont les requêtes utilisent exactement la même syntaxe soit:
Code:

1 2 3 4 // par exemple: .........WHERE id = '".$_GET['id']."'");
Et elles fonctionnent... celles-ci. :)
:?: aaarrrrfff !

J'ai quelques sources collectées ici et là (xmlhttp), je vais m'y plonger plus que sérieusement. Y a pas de raison que ce soit "un bout de code" qui fasse la loi, ( sauf celui de m'empêcher de dormir). :).
Je te tiendrai informé ici-même si j'ai un tilt!
Faut dire qu'il y a peu de thread sur ce sujet en ce moment...pour échanger.

Ceux d'outre-manche semblent "ach'ment" avançés sur cette technologie.
Ils n'en sont plus au stade du "how-to-make", mais carrement à l'étape d'élaboration de Toolkit.
Rico, c'est connu, mais si tu vois le framework de Rialto, c'est impressionnant.....ca fait rêver !

Entr'autres et d'ailleurs, pour le plaisir (ca met un peu de temps à charger, mais ça vaut le détour) :

http://rialto.application-servers.com/demoRialto.jsp
10/01/2006, 03h47
alain31tl

llllollll
(ca met un peu de temps à charger, mais ça vaut le détour)
Assez paradoxal tout de même. :)
10/01/2006, 03h50
siddh

le truc c est que si dans ta page en direct dans le navigateur t'as un request vide, tu iras pas bien loin ...

le code js à l'air correct donc c'est juste un soucis de récupération de ton GET de #### (excuse c'est l heure ;) )

je re-regarde ton php
10/01/2006, 03h53
siddh

remet moi tes pages s'il te plait

ok mais ca urge pas ! :)

appel.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
require 'ma_connex.inc.php';
$results = mysql_query ("SELECT * FROM matable WHERE refer = '".$_GET['refer']."'");
 
while ($tri = mysql_fetch_array($results))
        {
?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<table>
<tr><td><?php echo $tri['refer'];?><br>
        <? echo $tri['ord']; ?><br>
        <? echo $tri['type']; ?><br>
        <? echo $tri['nom']; ?><br>
        <? echo $tri['tel']; ?><br>
    </td></tr>
</table>
<?
} 
mysql_close();
?>

Personnellement, je la trouve tout à fait correcte cette requête et j'en ai consommée des tas comme ça. lllooll

Je pense que c'est plutôt dans l'index que ça cafouille.
index.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
	<script type='text/JavaScript'>
 
	  function mafonction('appel.php?refer=$refer'){ 
      if(xhr_object){ 
       xhr_object.onreadystatechange = function(){ 
      if(xhr_object.readyState == 4 && xhr_object.status == 200){ 
         document.getElementById('mondiv').innerHTML = xhr_object.responseText; 
      } 
            } 
       xhr_object.open("GET","appel.php?refer="+ refer,true); 
       xhr_object.send(null); 
   } 
       else // xhr_objectn'existe pas 
       alert("Probleme !"); 
}
	</script>
</head>
<body>
<?php
// variable de test, existante dans ma table
$refer="test";
?>
<a href="index.php?refer=$refer">Voir</a>
<a href="#" onclick="mafonction('index.php?refer=$refer&ord=$ord&type=$type&nom=$nom&tel=$tel')">$refer</a> 
 
<div id='mondiv'></div>
</body>
</html>

Comme tu peux le voir, j'ai utilisé 2 liens différents pour le test.
Et pour être sûr, j'ai même attribué une variable à $refer.
En l'occurence "test" qui existe bien dans ma table....si si ! :)

alors,
enlèves la balise meta de appel car si tu utilises responseText, il faut pas envoyer le retour en xml ;)

donc appel :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
require 'ma_connex.inc.php';
$results = mysql_query ("SELECT * FROM matable WHERE refer = '".$_GET['refer']."'");
 
while ($tri = mysql_fetch_array($results))
   {
?>
<table>
<tr><td><?php echo $tri['refer'];?><br>
        <? echo $tri['ord']; ?><br>
        <? echo $tri['type']; ?><br>
        <? echo $tri['nom']; ?><br>
        <? echo $tri['tel']; ?><br>
    </td></tr>
</table>
<?
}
mysql_close();
?>

ensuite :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
   <script type='text/javascript'>
 
     function mafonction(lien){
      if(xhr_object){
       xhr_object.onreadystatechange = function(){
      if(xhr_object.readyState == 4 && xhr_object.status == 200){
         document.getElementById('mondiv').innerHTML = xhr_object.responseText;
      }
            }
       xhr_object.open("GET",lien,true);
       xhr_object.send(null);
   }
       else // xhr_objectn'existe pas
       alert("Probleme !");
}
   </script>
</head>
<body>
<?php
// variable de test, existante dans ma table
$refer="test";
echo "<a href='appel.php?refer=$refer'>Voir</a>";
echo "<a href='#' onclick='mafonction(\"appel.php?refer=".$refer."\")'>$refer</a>";
?>
<div id='mondiv'></div>
</body>
</html>

10/01/2006, 14h12
alain31tl

Oui Siddh, mais je viens de me rendre compte qu'en finalité la partie JS ne joue aucun rôle, utilisé de cette façon.

On est dans le cas présent dans le cadre d'une syntaxe classique PHP (lien+passage de parametre et affichage, sans qu'intervienne la partie JS.

Je m'explique :
Déjà seul le lien suivant et fontionnel :

Code:

echo "<a href='appel.php?refer=$refer'>Voir</a>";

Et la résultante est logique, puisqu'on demande au fichier (appel.php) d'afficher le résultat relatif à $refer.
Le résultat est d'ailleurs affiché dans appel.php et non pas le <div> du fichier index.

J'ai supprimé la partie JS pour refaire un test, et j'obtiens la même chose, au demeurant logique, soit l'affichage dans appel.php.
Donc JS ne remplit pas son rôle.

C'est qu'on appelle, un retour à la case départ. :)
10/01/2006, 14h17
alain31tl

En résumé, pour confirmer le fait que la partie JS remplit son rôle de "chargement", le résultat issu de la page appel.php devrait s'afficher dans le <div>.
Dans ce cas de figure, on serait bien dans un contexte xmlhttp. :wink:
10/01/2006, 14h33
siddh

oui on est d'accord mais la le but c est de tester le deuxieme lien ;)

avec mon code ça donne quoi ?
10/01/2006, 14h45
alain31tl

C'est justement ton dernier code que j'ai utilisé, mes derniers commentaires s'y rapportent..

Aussi dans JS, cette ligne là ne m'inspire pas, je t'avouerais.

Code:

xhr_object.open("GET",lien,true);

Je ne vois pas trés bien comment js peut interpréter le fait qu'il faut charger tous les éléments relatifs à $refer, et sans connaître l'url.
Pour cette raison, au départ, je faisais référence à une ligne du genre :

Code:

xhr_object.open("GET","appel.php?refer=" +refer ,true);

Ce qui me semblait plus adapté pour le "prechargement".

Pas évident tout ça ! :?
10/01/2006, 18h44
siddh

Code:

onclick='mafonction(\"appel.php?refer=".$refer."\")'

on passe l'url en appelant la fonction.

et dans la fonction on appel ce qu'on reçoit "lien" :

Code:

function mafonction(lien){

et ensuite on l'utilise
10/01/2006, 22h19
alain31tl

Bonsoir Siddh

Bon, je suis à 2 doigts d'avoir la solution. :wink:

J'ai pu récupérer quelques codes XHR ici et là et que j'ai modifiées.
Et au lieu de les afficher dans un simple div, je pourrai même les faire apparaître dans une fenêtre, ce qui est encore plus confortable.

Tu te souviens quand j'évoquais :
Il est des cas spécifiques où l'utilisation d'un id (auto-incrémenté) est à proscrire car celà ne correspond pas, ou plus à la philosophie de l'application
Apparemment, celà serait une source de probléme.
Pour cette raison, la ligne suivante serait forcemment source de non-fonctionnement.

Code:

xhr_object.open("GET","appel.php?refer=" + refer, true);

Alors que celle-ci est plus viable, puisque id est défini comme un élément unique.
Ce qui n'est pas le cas pour "refer" étant donné qu'il peut figurer plusieurs dans une table....donc bug !

Code:

xhr_object.open("GET","appel.php?id=" + id, true);

J'ai fait des premiers tests en rajoutant un id (unique) dans ma table, et avec ce nouveau code XHR "bidouillé", ça fonctionne.

Bon, je n'avais pas forcemment besoin de cet id dans ma table, mais je lui pardonnerai. :)

La seule chose qui m'emm..", c'est que l'id doit être obligatoirement affiché. (grrrrr)
Ca ne m'arrange pas qu'il figure dans les résultats de la requête.
Si j'essaye de le passer dans un type hidden, ca ne marche plus.

Je vais refaire des tests, et je mettrai ma source.

Fuseau horaire GMT +2. Il est actuellement 00h54.