utilisation simple de xmlhttpRequest

**alain31tl** · 08/01/2006, 22h44

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**vg33** · 08/01/2006, 23h09

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.

**Vell** · 08/01/2006, 23h27

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">

**alain31tl** · 08/01/2006, 23h48

Merci pour vos réponses respectives

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. (?)

**papyphp** · 08/01/2006, 23h52

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

http://www.developpez.net/forums/vie...r=asc&start=45

**alain31tl** · 09/01/2006, 00h03

Vu Gilmaire et merci !
arrff ! je m'étais polarisé sur le libellé.

**vg33** · 09/01/2006, 01h01

Désolé, j'aurais dû mettre le lien

Merci de votre recherche

**siddh** · 09/01/2006, 01h49

la ou tu fais :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

il te suffit de faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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'

**alain31tl** · 09/01/2006, 03h02

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 ?

**siddh** · 09/01/2006, 11h22

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !");
}

**alain31tl** · 09/01/2006, 23h54

Bonsoir Siddh

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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();
?>

**siddh** · 09/01/2006, 23h59

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

il manque le = apres ?refer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**alain31tl** · 10/01/2006, 00h07

Oui, exact !

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

Celà ne viendrait pas de cette ligne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

function mafonction(lien){

Vu que j'ai remplacé "lien" par l'url à la ligne (xhr_object.open) ?

**siddh** · 10/01/2006, 00h13

euh oui met plutot :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

appel.php?refer=x

en mettant une bonne valeur a la place de x

**alain31tl** · 10/01/2006, 00h29

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Mais pas dans le cas suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$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é".

**siddh** · 10/01/2006, 00h56

tu tapes quoi comme url ?
il faut mettre appel.php?refer=....

**alain31tl** · 10/01/2006, 01h28

Oui, je passe les parametres dans l'url:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

WHERE refer='$refer'

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

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.

**siddh** · 10/01/2006, 02h09

dans ta page appel.php, fais un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**alain31tl** · 10/01/2006, 03h43

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**alain31tl** · 10/01/2006, 03h47

llllollll
(ca met un peu de temps à charger, mais ça vaut le détour)
Assez paradoxal tout de même.

utilisation simple de xmlhttpRequest

JavaScript

Discussions similaires

Partager

Partager