11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Ma requete ajax s'effectue 2 fois. Comment éviter cela ?

Bonjour,

Pouvez-vous me consacrer un peu de votre temps.

Voici la page en question :ici
Cliquez sur les passages de pages (en bas à droite sous les 8 vignettes).

Et c'est là que la catastrophe se produit.
La 1re requete se passe bien.
Juste après, un 2e process (non sollicité) s'exécute et le résultat de cette 2e requete remet tout comme avant, perdant ainsi le résultat exact obtenu par la 1re requete.
Pourquoi cette 2e requete ?
Comment éviter ce 2e process ?

Un tout grand merci pour votre aide.
JYves

Voici requete.js :

function creerRequete() {
	var requete = null;
	try {
		requete = new XMLHttpRequest();	
	} catch (essaimicrosoft) {
		try {
			requete = new ActiveXObject("Msxml2.XMLHTTP");	
		} catch (autremicrosoft) {
			try {
				requete = new ActiveXObject("Microsoft.XMLHTTP");	
			} catch (echec) {
				requete = null;
			}
		}
	}

	if (requete == null) {
		alert("Impossible de créer l'objet requete");
	} else {
		return requete;
	}	
}


Voici allerPage.php

	session_start();

    $retour = "";
	if (isset($_REQUEST['stringVignette'])) {
        $emplacement = "exemples/site-internet-newsletter/site-internet-newsletter-";
        $balAlt = "site internet newletter";
        $string00 = $_REQUEST['stringVignette'];
        $string = explode('**', $string00);
        $infos = explode('*', $string[0]);
        $noPage = $infos[0];
        $nbPage = $infos[1];
        $vignette = explode('*', $string[1]);
        $exemples = count($vignette);
        $retour .= "<div>";
        for ($iVignette=0; $iVignette<$exemples; $iVignette+=2) {
            $retour .= "<div class='exemple01' style='".$balMargin."'><img src='".$emplacement.$vignette[$iVignette]."' class='_exempleImage' alt='".$balAlt."'></div>";
            if ($iVignette+1<=$exemples) {
                $retour .= "<div class='exemple02' style='".$balMargin."'><img src='".$emplacement.$vignette[$iVignette+1]."' class='_exempleImage' alt='".$balAlt."'></div>";
            }
            $retour .= "<div class='stopfloat'></div>";
        }
        $retour .= "</div>";
        $retour .= "<div class='autrepage'>";
        if ($noPage > 1) {
            $retour .= "&nbsp;<a href='' onclick='pageX(1);'><span style='font-size:1.4em;'>&lt;&lt;</span></a>&nbsp;";
            $retour .= "&nbsp;<a href='' onclick='pageX(".($noPage-1).");'><span style='font-size:1.4em;'>&lt;</span></a>&nbsp;&nbsp;";
        }
        for ($iPage=1; $iPage<=$nbPage; $iPage++) {
            if ($iPage == $noPage) {
                $retour .= "&nbsp;<span class='bold' style='display:inline-block; border:solid 1px #ffffff;'>&nbsp;".$iPage."&nbsp;</span>&nbsp;";
            } else {
                $retour .= "&nbsp;<a href='' onclick='pageX(".$iPage.");'>".$iPage."</a>&nbsp;";
            }
        }
        if ($noPage < $nbPage) {
            $retour .= "&nbsp;<a href='' onclick='pageX(".($noPage+1).");'>&nbsp;<span style='font-size:1.4em;'>&gt;</span></a>&nbsp;";
            $retour .= "&nbsp;<a href='' onclick='pageX(".$nbPage.");'><span style='font-size:1.4em;'>&gt;&gt;</span></a>&nbsp;";
        }
        $retour .= "</div>";
    }
    echo $retour;


Voici la fonctio javascript qui provoque la requete ajax :

function pageX(pg) {
    var requete = creerRequete();
    var pgm = "php/allerPage.php";
    requete.open("POST", pgm, false);
    requete.onreadystatechange = function() {
        if (requete.readyState == 4 && requete.status == 200) {
            var resultat = requete.responseText;
            document.getElementById('deuxpaves').innerHTML = resultat;
            alert(resultat);
        }
    }
    requete.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    requete.send("stringVignette="+escape(ligneVignette[pg]));
}


Voici la div en htms qui eceuille le résultat de la requete (elle se trouve en fin de page html) :

            <div id="deuxpaves" style="height:100%;">
                <script type="text/javascript">pageX(1);</script></div>

Modifié par jytest (26 Sep 2016 - 21:42)
Je crois que j'ai trouvé ce qui provoque la 2e exécution de la requete.
On dirait que la page se recharge d'elle-même...
En effet, j'ai un visuel d'une page qui se recharge, après l'exécution de la (bonne) 1re requête ajax...
Bizarre ce rechargement de page qui s'effectue sans que je lui demande...

Par contre, je n'ai toujours pas la solution !

Dans la console javascript de chrome, j'ai un drôle de message :
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

Et sur celle de firefox, j'ai aussi :
L’utilisation d’XMLHttpRequest de façon synchrone sur le fil d’exécution principal est obsolète à cause de son impact négatif sur la navigation de l’utilisateur final. Consulter http://xhr.spec.whatwg.org/ pour plus d’informations.

Ne serait-ce pas le réel problème ?
J'ai essayé de résoudre ce essage. En vain, je n'y arrive pas.

Merci d'avance pour votre aide.
Bonne journée à tous.
Modifié par jytest (27 Sep 2016 - 08:35)
Modérateur
Bonjour,

le lien appelle le javascript puis exécute son comportement par défaut, il recharge la page. Pour éviter cela il faut stopper l’exécution par défaut:

on peut passer l'évènement dans la fonction:

<script>
function salut(e, nom){
  e.preventDefault(); // prévient l'exécustion du comportement par défaut
  alert('salut '+nom);
}
</script>
<a href="http://forum.alsacreations.com" onclick="salut(event, 'Roger');">clique pour dire bonjour</a>

ou simplement retourner false, ce qui préviendra le comportement par défaut et empêcher la propagation.


<script>
function salut(nom){
  alert('salut '+nom);
  return false;
}
</script>
<a href="http://forum.alsacreations.com" onclick="salut('Roger');">clique pour dire bonjour</a>

Modifié par kustolovic (27 Sep 2016 - 08:34)
Bonjour,

Tu as un évènement onclick sur tes liens de pages ... donc quand ti cliques dessus, ta fonction pageX s'exécute, cependant, une fois ta fonction exécutée, la fonctionnalité par défaut du lien s'exécute aussi. C'est pourquoi ta page se recharge.

Met un "return false" à la fin de ta fonction pageX pour éviter cela.

J'ai vu que tu chargeais jQuery dans ta page. Tu devrais l'utiliser pour déclarer tes évènements ainsi que pour lancer tes requêtes ajax, mais bon, c'est toi qui code.

Voilà.
Modifié par loicbcn (27 Sep 2016 - 08:36)
Merci pour votre aide.

Je viens de suivre votre conseil.
Mais le rajout de "return false" à la fin de la fonction ne résoud malheureusement pas mon souci.
Voici la fonction modifiée :

function pageX(pg) {
    var requete = creerRequete();
    var pgm = "php/allerPage.php";
    requete.open("POST", pgm, false);
    requete.onreadystatechange = function() {
        if (requete.readyState == 4 && requete.status == 200) {
            var resultat = requete.responseText;
            document.getElementById('deuxpaves').innerHTML = resultat;
            alert(resultat);
        }
        return false;
    }
    requete.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    requete.send("stringVignette="+escape(ligneVignette[pg]));
}

Modifié par jytest (27 Sep 2016 - 08:44)
Grâce à vous 2, j'ai trouvé une 2e erreur !
il ne faut pas faire :

$retour .= "&nbsp;<a href='' onclick='pageX(".$iPage.");'>".$iPage."</a>&nbsp;";

mais plutôt :

$retour .= "&nbsp;<a href='#' onclick='pageX(".$iPage.");'>".$iPage."</a>&nbsp;";

L'erreur est donc bien aussi dans les liens href !!!

Un très grand merci à tous les 2 pour votre très précieuse aide !!!
Modifié par jytest (27 Sep 2016 - 08:59)
Modérateur
Ce n'est pas la bonne réponse:

Une ancre vide ne recharge pas la page, mais renvoie en haut de la page, ce qui est tout de même peu agréable. Il faut tout de même bloquer le comportement par défaut.

Le return false fonctionne, mais il faut le mettre en retour de la fonction pageX, là il a été mis en retour de onreadystatechange.
Modifié par kustolovic (27 Sep 2016 - 10:29)
Sujet clos
Aller à