ajax et multiples requetes

Version imprimable

Salut à tous,
Bonne et heureuse année de passage ;
Mon problème est le suivant :
Je suis entrain de concevoir une application web sur un page unique dont les événements, actions et affichages sont faits en ajax (Jquery).
Mais l’application consomme beaucoup de ressource serveur à cause du fait que je ne parvient pas à effacer (ou plus tôt détacher) les fonctions qui ne me serve à rien quand j’en ai terminer avec.
Par exemple j’ai le code suivant :
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 35 36 37 38 39 40 41 $(document).ready(function(){ //Cette fonction est appelé avce un click $('.favorite').click(function() { $.ajax({ url: 'http://www.site.com/favorite.php', type: 'POST', async : false, error: function(){alert("theres an error with AJAX");}, success:function(data_msg) { alert('merci'); } }); return false; }); //Ici on fait les mises à jour pour avoir les tous derniers commentaire en ajax var auto_refresh_talk = setInterval(function () { var form_data_talk = {user: $("#my_count").val()}; $.ajax({ type: 'post', url: 'http://www.site.com/commentaire.php', async : false, data: form_data_talk, success: function(data_maj){ alert(data_maj); } }); }, 3000); });
J’ai plusieurs affichages qui doivent utiliser ce fichier JavaScript que je dois charger en même temps que les éléments qui doivent utiliser ce fichier JavaScript.
Le hic c’est que la fonction setInterval() par exemple fait de plus en plus de requête à la seconde vers le serveur chaque fois que je recharge ce fichier JavaScript avec les nouveaux éléments qu’il doit prendre en compte.
Comment faire pour effacer ce fichier JavaScript de la page (du moins ses instructions) avant de le recharger de nouveau pour qu’il prennent en compte les nouveaux éléments chargé en Ajax.
Merci à tous et joyeuse nouvelle année

03/01/2013, 11h36
bigboomshakala

salut,

le code présenté ne montre pas ce qui se passe à mon sens. Qu'entends-tu par "J’ai plusieurs affichages qui doivent utiliser ce fichier JavaScript" ?
03/01/2013, 22h01
danielhagnoul

Bonsoir

Ce qui consomme beaucoup de temps c'est cette horreur : async : false,.
09/01/2013, 14h05
guiguiz

Salut à tous,
Je m’excuse pour ma réaction tardive du à ma connexion internet.
Je vais essayer plus clairement mon problème.

J’ai conçu une page à la manière un peu de « Gmail hors ligne »(Une application de Google qui permet de lire ses mail).L’application utilise beaucoup d’Ajax pour recharger des bouts de page tout au long des manipulations fait par un user.

S’il veut consulter la liste des messages reçus, je charge dans le <div id= ' contenu '> :
- le bout de page qui affiche ses messages reçus
- le fichier JavaScript qui va vérifier les derniers messages privés en instantanée(en ajax)

S’il veut ensuite consulter les messages du mini forum,je charge dans le <div id= ' contenu '> :

- je charge le bout de page qui affiche les derniers messages du mini forum
- je charge le fichier javascript qui va vérifier les derniers messages du forum en ajax

Le problème est que si l’user revient consulter sa messagerie privé après avoir consulter le mini forum,le fichier javascript qui vérifie les derniers messages privés en ajax fait deux fois plus de requête ajax que prévu.
Le fichier .JS de la messagerie semble se dupliquer autant de fois que je reviens à la messagerie, ce qui cause les requêtes multiples bien que je pensais avoir supprimé ce fichier en mettant du nouveau contenu dans le <div id= ' contenu '>.

J’espère que c’est plus clair, s’il vous plait j’attends vos réponses.

J’ai pris note du async :false ,mais rien y change trop. Merci à tous
09/01/2013, 21h39
NoSmoking

Bonsoir,

Citation:

Le hic c’est que la fonction setInterval() par exemple fait de plus en plus de requête à la seconde...

je penche pour une mauvaise utilisation de setInterval qui s'auto appelle.

Bonsoir

Une transaction AJAX doit toujours être asynchrone ! On n'utilise jamais setInterval(), on renouvelle une transaction lorsque la précédente est terminée.

Attention au bon usage, des méthodes html(), empty(), append(), etc.

Si le contenu d'une division doit être remplacé, on utilise simplement html() : $( selector ).html( nouveauContenu );.

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
var boolCommentaire = true;
 
$( ".favorite" ).on( "click", function(){
 
	var jqXHRFavorite = $.post( "http://www.site.com/favorite.php" );
 
	jqXHRFavorite.done( function( data, textStatus, jqXHR ){
		// succès de la transaction, on doit traiter le contenu de data
		//console.log( data, textStatus, jqXHR );
 
	});
 
	jqXHRFavorite.fail( function( jqXHR, textStatus, errorThrown ){
		// échec de la transaction, gérer la catastrophe
		//console.log( jqXHR, textStatus, errorThrown );
 
	});
 
	return false;
});
 
/*
 * Si boolCommentaire est true, une nouvelle transaction AJAX 
 * est déclenchée 3s après la fin de la précédente
 */
function commentaire(){
 
	var jqXHRCommentaire = $.post( "http://www.site.com/commentaire.php", { "user" : $( "#my_count" ).val() } );
 
	jqXHRCommentaire.done( function( data, textStatus, jqXHR ){
		// succès de la transaction, on doit traiter le contenu de data
		//console.log( data, textStatus, jqXHR );
 
	});
 
	jqXHRCommentaire.fail( function( jqXHR, textStatus, errorThrown ){
		// échec de la transaction, gérer la catastrophe
		//console.log( jqXHR, textStatus, errorThrown );
 
	});
 
	jqXHRCommentaire.always( function( jqXHR, textStatus ){
		// la transaction est terminée
		//console.log( jqXhr, textStatus );
 
		if ( boolCommentaire ){
			setTimeout( commentaire, 3000);
		}
	});
 
}