[AJAX] Generation d'une image Captcha

**Cvbdev** · 16/09/2009, 10h02

Bonjour,

Je viens chercher des compétences en AJAX. J'ai un code me permettant de générer des captcha selon certains paramètres.
Ca fonctionne parfaitement.

Seulement j'aimerai l'adapter en utilisant de l'AJAX. Quel le client puisse le regenerer le code sans recharger la page.
Je vous mets l'ensemble du code dessous avec les explications...

Captcha

Génération de l'image Captcha :
Ce code génére une image au format que l'on désire.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php 
session_start();
include_once 'captcha.class.php';
 
// image PNG
$I = new captcha('JPEG');
 
// on génère une chaine aléatoire de 10 caractères
$I->setStringLenght(8);
// bordure rouge de 5 px
$I->setImageHeight(45);;
$I->setBorderColor(110,19,4);
$I->setTextColor( 255 , 255 , 255 );
$I->setBorderWidth(2);
 
// police Tuffy de taille 15
$I->setFont('fonts/amsterdam.ttf' , 25);
 
// génération de l image
//$I->getImage();
 
// on met la chaîne générée en session pour le contrôle
$_SESSION['captcha-control'] = $I->getRandString();
 
session_write_close();
?>

Class Générant l'image selon des paramètres :
Je vous mets une partie du code notament en ce qui concerne le Header.
Car je pense que mon problème avec AJAX vient de là (Cf. Code suivant)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
	private function makeHeaders() {
 
(...)
		header('Expires: Mon, 01 Jan 2000 00:00:00 GMT');
		header('Last-Modified: ' . gmdate("D, d M Y H:i:s") . ' GMT');
		header('Cache-Control: no-store, no-cache, must-revalidate');
		header('Cache-Control: post-check=0, pre-check=0', false);
		header('Pragma: no-cache');
		header('Content-Type: image/' . $this->type);
	}
 
(...)
}

AJAX

Code JavaScript :
Dans ce code là j'apelle la page "Captcha.php", le premier code que j'ai mis dans ce post.
Qui lui génére un image. Seulement, ça ne fonctionne pas. L'image ne m'est pas renvoyé par le fichier "Captcha.php"...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
		<script type='text/JavaScript'>
 
	 		function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
             return xhr
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr()
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
 
					}
				}
				xhr.open("GET","captcha/captcha.php",true);
				xhr.send(null);
			}
		</script>

Code HTML :
J'aimerais afficher l'image généré dans la balise image ci-dessous.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
(...)
<body>
<img src="" id="image"/>
<input type='button' value='Dis quelque chose !' onclick='go()' id="livre" />
</body>
(...)

Pour résumer...

Le code pour générer le Captcha fonctionne trés bien sans aucun problème.
Seulement, je ne sais pas comment l'associer à de l'AJAX afin que le client puisse le regenérer facilement.

Je ne maitrise pas la technologie AJAX parfaitement.Je pense que le problème vient des Headers.
Je pense que je dois rajouter un élèments dans la page "Captcha.php", un peu comme réalisé dans ce tutoriel et ce code, afin qu'il puisse me renvoyer une image.
Je n'ai aucune certitude malgré tout !

http://siddh.developpez.com/articles/ajax/

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<?php
   $buffer  = '<?xml version="1.0"?>';
   $buffer .= "<reponse><message>Bonjour de PHP &amp; d'XML</message></reponse>";
 
   header('Content-Type: text/xml');
   echo $buffer;
?>

J'espère avoir été suffisament clair dans ma description du problème...

Je vous remercie par avance des réponses que vous allez m'apporter !
Cordialement,
M.

**DoubleU** · 16/09/2009, 10h28

Ajax ne peut te retourner que des données textuelles (texte libre, texe formaté en xml, en json), donc pas d'images.

Ce que tu devrais faire, c'est faire pointer le src de ton image sur ton script php qui va la générer aléatoirement, avec les headers qui vont bien et un code aléatoire en argument (genre captcha.php?seed=12345). Pour recharger ton captcha, tu modifies via javascript le src de l'image avec une nouvelle graine.

Pas d'ajax donc.

**Cvbdev** · 16/09/2009, 10h38

Envoyé par DoubleU

Ajax ne peut te retourner que des données textuelles (texte libre, texe formaté en xml, en json), donc pas d'images.

Ce que tu devrais faire, c'est faire pointer le src de ton image sur ton script php qui va la générer aléatoirement, avec les headers qui vont bien et un code aléatoire en argument (genre captcha.php?seed=12345). Pour recharger ton captcha, tu modifies via javascript le src de l'image avec une nouvelle graine.

Pas d'ajax donc.

Ok, donc j'oublie AJAX. Merci

Je vais essayer de mettra la méthode donc tu me parle en place !

Merci, je vous tiens au courant...

++

[AJAX] Generation d'une image Captcha

AJAX

Discussions similaires

Partager

Partager