Bonjour,

Dans le cadre d'un projet web, j'utilise du javascript (que je n'ai jamais étudié) pour envoyer des données dynamiquement au serveur.

L'idée est d'envoyer un certain nombre de variables sur le serveur, celui-ci génère alors des images en fonction de ses données. Ensuite, le serveur envoie comme réponse le nom des images qui sont ajoutées au HTML. J'aimerais qu'à ce moment le client envoie l'ordre de supprimer les images du serveur pour éviter de surcharger celui-ci une fois les images affichées.

// Envoie des données à afficher au serveur et envoie de l'ordre de suppression
function image() {
	
var xhr = new XMLHttpRequest();
xhr.onload = function() {   // fonction callback
    // récupération des données renvoyées par le serveur
	var data = JSON.parse(this.responseText);
    // boucle sur les enregistrements renvoyés
	
	var resultat = "<p>A "+lieu+", du "+datedeb+" au "+datefin+" :</p>";
	
	// On ajoute les images à la page HTML
	for ( n = 0; n < data.length; n++ ) {
		
		if (data[n].image=="Pas de données") {
			resultat = resultat + "<p>"+data[n].name+" : Aucune donnée disponible</p>";
		}else{
			resultat = resultat + "<p>"+data[n].name+" :</p><img src="+data[n].image+">";
			console.log(data[n].date);
		}
	}
	
	document.getElementById("resultat").innerHTML = resultat;
	
	// On supprime toutes les images envoyées par le serveur
	for ( n = 0; n < data.length; n++ ) {

		// On envoie une requête pour supprimer l'image
		var xhr = new XMLHttpRequest();
		xhr.open('GET','supprimer_img/'+data[n].image,true);
		xhr.send()
		}
	};
xhr.open('GET','/debit/'+lieu+'/'+datedeb+'/'+datefin+'/'+donnees_afficher,true);
xhr.send();
}

J'aimerai apprendre le js mais je dois pour l'instant me contenter d'imaginer le rôle des fonctions que j'utilise et extrapoler en fonction de mes faibles connaissances.

Actuellement, la requête d'accès à la ressource par le navigateur web (GET/image.png) se fait après la requête de suppression. J'aimerais inverser cet ordre.

Merci à toute personne qui pourrait me donner une piste pour corriger le code

Hello.

Vu que tu dois faire de multiples requêtes, je te conseille déjà de t'organiser en créant une fonction chargée uniquement de faire ces requêtes. Par exemple :

function getRequest(url, successCallback, errorCallback) {
  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
      successCallback(request.responseText);
    } else {
      errorCallback();
    }
  };

  request.onerror = function(err) {
    errorCallback(err);
  };

  request.send(null);
}

Ce qui te permettrai de simplifier ta logique de code principale, un truc dans ce genre là :

getRequest('/debit/...', recupererImage);

function recupererImage(response) {
  var data = JSON.parse(response);

  // [...]

  getRequest('/supprimer_img/...');
}

jmpp a écrit:

Hello.

Vu que tu dois faire de multiples requêtes, je te conseille déjà de t'organiser en créant une fonction chargée uniquement de faire ces requêtes. Par exemple :

function getRequest(url, successCallback, errorCallback) {
  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
      successCallback(request.responseText);
    } else {
      errorCallback();
    }
  };

  request.onerror = function(err) {
    errorCallback(err);
  };

  request.send(null);
}

Ce qui te permettrai de simplifier ta logique de code principale, un truc dans ce genre là :

getRequest('/debit/...', recupererImage);

function recupererImage(response) {
  var data = JSON.parse(response);

  // [...]

  getRequest('/supprimer_img/...');
}

Merci beaucoup pour ta réponse !

Je ne me suis pas encore approprié la logique du js (c'est d'ailleurs assez frustrant de devoir coder dans ces conditions mais je n'ai pas le choix). Séparer les taches rend en effet le code plus simple, d'autant que d'autres requêtes du type sont effectuées dans d'autres fonctions que celle présentée.

Ceci dit, le problème de l'ordre d'envoi des requête ne semble pas résolu, la requête pour supprimer l'image arrivant sur le serveur avant la requête pour télécharger l'image.

Une idée ?

Je profite pour demander si il est possible de simplifier ce que j'ai fait : on envoie les données au serveur, celui-ci ne renvoie pas le nom des images (stockées dessus) mais directement les images, comme si on faisait GET/image... pour chaque image ? (Ca me semble une question stupide mais bon...)

Merci !