Sujet Précédent Sujet Suivant

Récupération contenu html avec XMLHttpRequest

Fermé
laurent350000 - 5 juin 2009 à 10:29
 laurent35000 - 8 juin 2009 à 17:22
Bonjour,

J'essaye de récupérer le contenu d'une page html à l'aide XMLHttpRequest.
J'ai donc créé une fonction GetArticle() dans laquelle je retourne le contenu de la page html.
Malheuresement cela ne fonctionne pas...

[code]

function GetArticle() {
var Ou;
var req = null;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}else if (window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) {
}
}
}
req.onreadystatechange = function() {
if(req.readyState == 4) {
if(req.status == 200) {
document.getElementById(Ou).innerHTML=req.responseText;
}else{
}
}
};
req.open("GET", "article.html" , true);
req.send(null);

return Ou;
}

/code

J'appel ensuite cette fonction:

[code]

art_content = GetArticle();

/code

Et j'ai comme valeur "Undefined". Alors que lorsque je rentre en "dur" une valeur de "Ou" dans la fonction GetArticle(), elle s'affiche correctement.

Quelqu'un voit-il mon erreur?

Merci!

Laurent

7 réponses

Réponse 1 / 7
kryoportail Messages postés 222 Date d'inscription dimanche 10 août 2008 Statut Membre Dernière intervention 22 mai 2014 125
5 juin 2009 à 11:39
Re,

Oui c'est ce que je voulais dire...

cf : https://www.toutjavascript.com/savoir/xmlhttprequest.php3 pour un exemple...


Béh sur le principe ça devrait fonctionner ! Je vais regarder ça !
Je confirme donc que cela fonctionne dans le principe hormis que req.status == 0 chez moi avec firefox !!!! Bref ça, ça marche chez moi : 

<html>

<body>

<script type="text/javascript">

function GetArticle() {
	var Ou;
	var req = null;
	
	// Création de l'objet 
	if (window.XMLHttpRequest)
	{
		req = new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{
		try
		{
			req = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e)
		{
			try {
				req = new ActiveXObject("Microsoft.XMLHTTP");
			}catch (e) {}
		}
	}
	
	// Sur changement d'etat
	req.onreadystatechange = function()
	{
		if(req.readyState == 4)
		{
			// Pour débug...
			alert( req.responseText );
			Ou = req.responseText;
		}
	};
	req.open("GET", "article.html" , true);
	req.send(null);

	return Ou;
} 

GetArticle();

</script>

</body>
</html>


Amicalement,
S@M...
2
Réponse 2 / 7
kryoportail Messages postés 222 Date d'inscription dimanche 10 août 2008 Statut Membre Dernière intervention 22 mai 2014 125
5 juin 2009 à 10:47
Salut,

Nul part, dans ton code, tu affectes la variable OU ! Il est donc normale que sa valeur soit indéfinie... 

Ou = req.responseText;


Devrait déjà mieux fonctionner... Si j'ai bien compris ce que tu voulais faire !...

Un conseil, si tu utilises Firefox, je te conseille fortement le module Firebug, qui permet de débogger rapidement, et facilement des applications Javascript.

Enfin, si il s'agit d'un développement pour un client ou une entreprise, je te conseille vivement d'utiliser une librairie toute faite pour faire des requêtes asynchrones, comme jquery par exemple...
Bien sur, si c'est juste pour faire des tests et voir comment ça fonctionne, dans ce cas, continue comme ça tu y es presque à mon avis !




Amicalement,
S@M
-1
Réponse 3 / 7
laurent350000
5 juin 2009 à 11:27
Ok merci!
Oui je fais juste des tests à titre personnel, je souhaite ensuite intégrer ça à mon site sous Joomla. Mais pour l'instant je fais des tests en html statique pour me simplifier la tâche.

J'initialisais "Ou" avec:
document.getElementById(Ou).innerHTML=req.responseText;

J'ai donc essayé ta solution, si j'ai bien compris cela donne:

[code]

function GetArticle() {
var Ou;
var req = null;
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
}else if (window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e){
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) {
}
}
}
req.onreadystatechange = function() {
if(req.readyState == 4) {
if(req.status == 200) {
/*document.getElementById(Ou).innerHTML=req.responseText;*/
Ou = req.responseText;
}else{
}
}
};
req.open("GET", "article.html" , true);
req.send(null);

/*Ou = "<div> test article test article </div>";*/
return Ou;
}

/code

J'ai toujours le même résultat "Undefined".

Si je met:
Ou = "<div> test article test article </div>";
à la fin de ma fonction GetArticle(), j'affiche bien "test article test article" donc mon appel à la fonction GetArticle() est bien réalisé.

Peut-être un problème de type de variable? (je ne connais pas grand chose au javascript)
Ou alors le lien vers ma page html n'est pas bien réalisé?
(le fichier article.html est dans le même dossier que ma page d'index: site/article.html et le fichier javascript dans site/js/test.js)
-1
Réponse 4 / 7
laurent350000
5 juin 2009 à 14:35
Ah merci! J'ai trouvé une piste grâce à ton alert() de debug.
Donc j'ai bien le contenu de article.html lorsque je met un alert(Ou) dans le if(req.readyState == 4). Par contre j'ai toujours "Undefined" dans le Ou retourné.

J'ai donc essayé de mettre un alert(Ou) juste avant le return de GetArticle(), là alert retourne "Undefined" et le contenu de article.html s'affiche dans ma page index correctement!

Ma question maintenant est: que fait un alert()? Est-ce que cela recharge la variable?
Quelle fonction pourrais-je utiliser pour remplacer alert() par quelquechose qui ne se voit pas?
En gros une fonction qui aurait le même effet que alert (rechargement de la variable "Ou"?) mais qui ne m'affiche pas de message...
-1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
kryoportail Messages postés 222 Date d'inscription dimanche 10 août 2008 Statut Membre Dernière intervention 22 mai 2014 125
6 juin 2009 à 01:58
Re,

Je t'avouerais que j'ai pas tout compris à la question du troisième paragraphe ! Désolé...
Alert() est une fonction javascript permettant simplement d'afficher un message....
Je ne sais pas ce que tu entends par "recharger" une variable...

Pour ce qui est du "undefined" c'est normal si on réfléchit un peu...
la séquence d'exécution de ton code est la suivante :

- Déclaration d'une fonction "GetArticle"
- Création d'un objet XMLRequest
- Déclaration d'une fonction dite de CallBack qui sera exécutée uniquement lorsque la requête aura reçu une réponse.
- Lancement de la requête (via XMLRequest.Send)
- Fin de la fonction "GetArticle" (et retour de la valeur Ou qui n'a pas été affecté, vu que la fonction de CallBack n'a certainement pas encore été exécutée !)

- Exécution de la fonction de CallBack... Et affichage de Ou via alert()...

Ici, on dit que la requête est asynchrone (car javascript va continuer à exécuter le code de ton programme sans attendre la réponse de la requête....

Pour réaliser proprement ce que tu souhaites faire, je te conseillerais de placer le code qui va utiliser la valeur Ou directement dans la fonction de CallBack... Ou de créer une fonction qui va effectuer le traitement sur Ou et de l'appeler lorsque "req.readyState == 4" est executé.... C'est le seul moyen d'être sur que la variable Ou a bien été récupéré !...

Bref un truc comme ca... 

<html>
<head>
<script type="text/javascript">
// Fonction d'affichage du prix (lorsque cette fonction est appelée, on est sur que l'article a été récupéré !)
function DisplayArticle( Article )
{
	// On fait ce que l'on veut avec Article... par exemple l'afficher via un élément du DOM...
	document.getElementById('Article').innerHTML = Article;
}
</script>
</head>
<body>
<div>Votre article est : <span id="Article"></span></div>
<script>
// Création de l'objet
var req = null;
if (window.XMLHttpRequest) { req = new XMLHttpRequest(); }
else if (window.ActiveXObject) {
	try { req = new ActiveXObject("Msxml2.XMLHTTP"); }
	catch (e) { try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} }
}
	
// Sur changement d'etat
req.onreadystatechange = function()
{
	if( req.readyState == 4 ) { DisplayArticle( req.responseText ); }
};

// Execution de la requète
req.open("GET", "article.html" , true);
req.send(null);
</script>
</body>
</html>


En esperant t'avoir dépanné !...

Amicalement,
S@M...
-1
Réponse 6 / 7
laurent350000
8 juin 2009 à 10:18
Ok! Merci pour ta réponse.

Je viens de comprendre mon problème.
Je pensais que ma variable "Ou" n'était pas initialisée correctement mais en fait elle l'est trop tard.

Je réutilise le résultat de GetArticle dans une autre fonction javascript.
Cette fonction doit donc prendre la valeur de DisplayArticle trop tôt.

En fait j'ai ceci: 
	function initDragableBoxesScript()
	{
		GetArticle();
		createDefaultBoxes();
	}


Ma fonction createDefaultBoxes() a besoin du résultat de GetArticle. Comment puis-je faire pour être sûr que createDefaultBoxes attende le retour de GetArticle(requête XMLHttpRequest)?
Cela fonctionnerait-il avec un flag mis à 1 en confirmation de retour de la requete et un if testant ce flag comme condition de l'execution de createDefaultBoxes?

Merci!

Laurent
-1
Réponse 7 / 7
laurent35000
8 juin 2009 à 17:22
Hop! Problème réglé en mettant l'appel de ma fonction createDefaultBoxes dans GetArticle.
Donc maintenant ça fonctionne!
-1

Discussions similaires

Savoir de quel ville à été envoyé le message
pedro1209 -
Pierr10 -

7 réponses
Youtube: Ce contenu n'est pasdisponible dans votre pays
nesrinedu30 -
Ref1 -

10 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
Onoffapp mms
Grete -
Linda -

16 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses