requêtes AJAX et réponse du serveur Résolu/Fermé

Question

Bonjour,

J'ai fait un petit site web entièrement en AJAX, avec le plugin jquery. 
Une page principale, comportant plusieurs boutons.... Au click de l'un de ses boutons, ça lance une fonction js qui appelle telle ou telle page en fonction du click.

En fait sur mon localhost ça marche parfaitement, aucuns problèmes. Le plus gros des fichiers susceptibles d'être appelé fait au maximum une quinzaine de ko.... Mais une fois hebergé, ça dépends de la bande passante disponible...
Des fois la réponse est instantannée.... Des fois pas.... Donc l'animation est bien lancée, mais le contenu n'apparaît que quelques secondes après.... Au pire ce n'est pas grave, le problème étant que l'utilisateur peut être incité à clicker plusieurs fois sur le bouton, ou même un autre... Et là c'est le drame, plusieurs contenu apparaissent d'un coup (du style deux fois le même, voir plus...)....

Comment remédier à ce problème?

Merci par avance :-)

Marco la baraque · Answer

Bonjour Papymucho,
Des fois la réponse est instantannée.... Des fois pas.... : oui, c'est ça Ajax. Comme c'est asynchrone, on envoie juste la requête au serveur, et on laisse les trames http vivre leur vie. Elles peuvent arriver très rapidement comme 30s après.

Et là c'est le drame, plusieurs contenu apparaissent d'un coup (du style deux fois le même, voir plus...)... Je ne comprends pas très bien. Comment récupères-tu tes données (fichier xml?) ? Comment fais-tu pour charger la page ainsi reçue (des appendChild?) ?

Cordialement,

papymucho · Answer

Merci de ta réponse Marco,

En fait je réécris dans un div spécialement créé pour ça. Voici l'exemple d'une fonction que j'utilise :


function load_page(element,page,id) //Fonction ajax, qui va appeler le bon fichier pour effectuer les requêtes de chargement du contenu. On check le fichier demandé (un smenu ou un body), quelle page et on lui envoie un id pour les requêtes.
{
	$("#"+element).empty();
	
	var path = "php/"+element;
	
	$.ajax
	(
		{
			type: "POST",
			url: path+"/"+element+"_"+page+".php", //chemin du fichier/nom du fichier (composé de "body+nom" ou "smenu+nom").php
			data: "page="+page+"&id="+id,
			success:
			function(msg)
			{
				$("#"+element).append(msg);
			}
		}
	);
}


Comme expliqué dans ma question, j'utilise le plugin jquery.
Pour expliquer vite fait cette fonction, certaines pages de mon site ont un sous-menu, d'autres non....
Si quand on click sur un bouton, on doit un charger un sous menu, la variable element prends la valeur smenu.... Donc la fonction ajax charge le fichier demandé, et l'injecte dans un div appelé "smenu".
De même pour si l'on demande une page directement, la variable element prendra la valeur body, et la fonction ajax réécrira le div ayant pour identifiant "body".

A chaque fois qu'un click est effectué, l'ancien conteneur (div body ou div smenu) est vidé.

Donc comment faire pour bloquer l'utilisateur, ou vérifié si le conteneur est vide ou non.... (en fait j'ai l'impression de répondre à ma question tout à coup lol....) avant de réécrire dedans.

papymucho · Answer

function(msg)
{
	//ici tu vides ton $("#"+element)
	$("#"+element).append(msg);
}

Pourquoi n'y avais-je pas pensé plutôt!! je vais essayé, je pense que le problème sera plus rare de cette façon.
Pour la méthode innerHTML je vais essayé également, je n'avais trouvé que cette syntaxe sous jquery lui ressemblant. Pour la suppression des noeuds, le framework dispose de quelques fonctions le permettant. empty y ressemble, sauf qu'il vide l'élément plutôt que de le supprimer, de cette façon je ne réécris pas le conteneur à chaque fois.

Merci Marco ! :-)

papymucho · Answer

Arggghh.... impeccable...  le déplacement $("#"+element).empty(); suffisait....
Je prends une sale claque sur ce coup là, mais merci :)

papymucho · Answer

Je vais tester avec une connexion bas débit, et lorsque l'hébergeur sera le plus sollicité. J'ai quand même essayé plusieurs fois depuis, impeccable... on voit bien l'ancien contenu disparaitre et le nouveau s'afficher instantanément (une demi fraction de seconde) alors que les contenus se seraient superposés auparavant pour les mêmes situations.

L'algo est désormais : je charge le contenu du fichier -> success, le fichier est totalement chargé :
j'efface l'ancien contenu pour réécrire le nouveau.

alors qu'il était, j'efface l'ancien contenu -> je charge la page -> success, je réécris le nouveau contenu.

Je repasserais ici après d'autres tests. Merci!

Requêtes AJAX et réponse du serveur

5 réponses

Discussions similaires