[AJAX] Generation d'une image Captcha
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:
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:
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:
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:
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:
1
2
3
4
5
6
7
| <?php
$buffer = '<?xml version="1.0"?>';
$buffer .= "<reponse><message>Bonjour de PHP & 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.
