Utilisez AJAX pour recharger le captcha

Question

Cette question a peut-être déjà été posée - mais malheureusement, je n'ai trouvé aucune réponse satisfaisante. Je vais juste demander pour mon cas concret et demander aux administrateurs de ne pas supprimer la question pendant au moins quelques jours afin que je puisse l'essayer ...

J'ai une page. Il utilise un captcha. Comme si:

<?php 
session_start(); // the captcha saves the md5 into the session 
?> 
<img src="captcha.php" onclick="this.src = this.src" /> 

C'était mon premier code. Cela n'a pas fonctionné, car le navigateur a jugé inutile de recharger une image si la source est la même. Ma solution actuelle est de passer un parametre:

onclick="this.src = 'captcha.php?randomNumber='+ranNum" 

La variable JavaScript var ranNum est généré au hasard chaque fois que l'événement se déclenche onclick. Cela fonctionne bien, encore, je n'aime pas la possibilité, si le cas - bien qu'improbable - de deux nombres soit le même deux fois de suite. Bien que le nombre aléatoire varie entre -50 000 et 50 000, je ne l'aime toujours pas. Et je ne pense pas que la méthode soit correcte. Je voudrais connaître la méthode «righter», au moyen d'AJAX. Je sais que c'est possible. J'espère que tu sais comment c'est possible ^^ Dans ce cas, montre-moi s'il te plaît.

Merci d'avance!

Soit dit en passant - si j'épelle cap (t) cha autrement, jamais l'esprit, la référence au fichier PHP est juste dans mon code: J'utilise randomImage.php

EDIT: Le nombre aléatoire en JavaScript est généré uniquement pour que l'image se recharge. Captcha.php ne se soucie pas du paramètre $ _GET. La chaîne est vraiment aléatoire.

EDIT: Ainsi, ce que je voudrais savoir, c'est comment rendre le navigateur relaod l'image sans passer différents paramètres de get chaque fois que l'événement se déclenche.

Answer 1

Malheureusement, AJAX ne fournit pas un bon moyen de charger dynamiquement des images. Même en utilisant l'astuce "préchargement" javascript, le navigateur charge chaque image une fois par URL. Le seul moyen pour que le navigateur charge une autre image de la même source consiste à utiliser un paramètre différent, comme vous le faites actuellement. Et, comme d'autres réponses l'ont indiqué, l'horodatage devrait suffire à cela.

Answer 2

Avez-vous envisagé d'utiliser un horodatage à la place?

onclick="this.src='captcha.php?ts='+Math.round(new Date().getTime()/1000)" 

Answer 3

utiliser Just:

<img src="captcha.php" onclick='this.src = "captcha.php&time=" + new Date().getTime();' />

Vous pouvez jeter le paramètre de temps et de générer le nombre aléatoire en PHP. :)

Answer 4

Vous pouvez également obtenir l'image à partir d'une requête Ajax encodée en base64 et la mettre dans la balise img aussi.

Bien sûr, je pense que c'est exagéré et un fichier encodé en base64 est environ 4/3 de la taille de l'original. (Une image de 3 Ko serait d'environ 4 Ko sur base64).

Edit: pour avoir l'attribut img src comme

données: image/png; base64, base64encodedimage