11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'essaye d'effectuer un traitement sur une page d'inscription, de sorte à ce que lorsque l'utilisateur rentre un pseudo, la page lui affiche une coche s'il est valide ou une croix rouge s'il ne l'est pas.

Ce traitement a pour but de comparer l'avatar d'un joueur Xbox (identifié par son pseudo) avec l'avatar d'un compte inconnu (avatar générique).

Voici comment on récupère les informations du joueur :


echo "<input type=\"radio\" name=\"support\" value=\"xbox\" id=\"xbox\" checked=\"checked\" /><label style=\"margin-right:20px; padding-left:5px;\" for=\"xbox\">Xbox</label>";

echo "<input type=\"radio\" name=\"support\" value=\"ps3\" id=\"ps3\" />";?><label style=\"margin-right:20px; padding-left:5px;\" for=\"ps3\">PS3</label>";

echo "<input type=\"radio\" name=\"support\" value=\"pc\" id=\"pc\" /><label style=\"margin-right:20px; padding-left:5px;\" for=\"pc\">PC</label>";

[...]

<td class="g"><label for="JOU_LIC"><?php echo __('com.txt.licence'); ?> <font style="color:red">*</font></label></td>
<td class="d"><?php echo "<input type=\"text\" maxlength=\"50\" name=\"licence\" id=\"licence\" onBlur=\"req_compte(this.value);\"> <span id=\"pseudo_check\"></span>"; ?></td>
</tr>




La fonction Javascript de traitement :


function req_compte(compte) { 

	if(document.all) 
		var XhrObj = new ActiveXObject("Microsoft.XMLHTTP"); //Internet Explorer 
	else 
		var XhrObj = new XMLHttpRequest(); //Mozilla 
		
	support = document.getElementById("xbox").checked;    //on vérifie si c'est "xbox" qui a été choisi
	
	if (support == true) { //Ne s'applique que pour les joueurs Xbox
		content = document.getElementById("pseudo_check");     //zone d'affichage 

		XhrObj.open("POST", "verif_compte/verif_compte.php"); 
		
		//Ok pour la page cible 
		XhrObj.onreadystatechange = function() 
		{ 
			if ((XhrObj.readyState == 4) && (XhrObj.readyState == 200)) {
				if (XhrObj.responseText == 'OK') { 
					// ok nouveau pseudo 
					content.innerHTML='<img src="verif_compte/images/accepter.png" alt="Compte valide"/>'; 
				} 
				else 
				{
					if (XhrObj.responseText == 'FALSE') {
						// erreur pseudo déjà existant 
						content.innerHTML='<img src="verif_compte/images/refuser.png" alt="Compte inexistant ou déjà utilisé"/>'; 
					}
					else
					{
						// erreur dans l'utilisation de la fonction 
						content.innerHTML='<img src="verif_compte/images/inconnu.png" alt="Erreur dans le résultat"/>'; 
					}
				} 
			}
		} 

		XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
		XhrObj.send('p='+compte); 
	}
}



Et enfin, la page php "verif_compte.php" appelée lors du traitement :


	// fonction de comparaison
	function comparaison_img($img1, $img2){

		$im1 = ImageCreateFromPng($img1);
		list($width_img1,$height_img1) = getimagesize($img1);

		$im2 = ImageCreateFromPng($img2);
		list($width_img2,$height_img2) = getimagesize($img2);


		$width = ($width_img1 > $width_img2)?$width_img1:$width_img2;
		$height = ($height_img1 > $height_img2)?$height_img1:$height_img2;

		$image_resultat_1 = imagecreatetruecolor($width,$height);
		$image_resultat_2 = imagecreatetruecolor($width,$height);

		$diff_totales = 0;


		for ($x=0;$x<$width;$x++) {
			for ($y=0;$y<$height;$y++) {

				$rgb_img1 = ImageColorAt($im1, $x, $y);
				$r_img1 = ($rgb_img1 >> "16") & 0xFF;
				$g_img1 = ($rgb_img1 >> "8") & 0xFF;
				$b_img1 = $rgb_img1 & 0xFF;


				$rgb_img2 = ImageColorAt($im2, $x, $y);
				$r_img2 = ($rgb_img2 >> "16") & 0xFF;
				$g_img2 = ($rgb_img2 >> "8") & 0xFF;
				$b_img2 = $rgb_img2 & 0xFF;


				$r = 255 - abs($r_img1 - $r_img2) ;
				$g = 255 - abs($g_img1 - $g_img2) ;
				$b = 255 - abs($b_img1 - $b_img2) ;

				//resultat 1 : image par gradiant
				$color_resultat_1 = imagecolorallocate($image_resultat_1,$r,$g,$b);
				imagesetpixel($image_resultat_1, $x, $y, $color_resultat_1);


				//resultat 2 : image N/B des différences
				if($r_img1 != $r_img2 or $g_img1 != $g_img2 or $b_img1 != $b_img2) {
					$color_resultat_2 = imagecolorallocate($image_resultat_2, "0", "0", "0");
					$diff_totales++;
				}
				else 
					$color_resultat_2 = imagecolorallocate($image_resultat_2, "255", "255", "255");

				imagesetpixel($image_resultat_2, $x, $y, $color_resultat_2);

			}
		}

		return $diff_totales;
	}
	
	$compte = htmlentities(addslashes($_POST['p']));
	
	if (!empty($compte)) { 
	
		$res = mysql_query("select JOU_CLE from tab_joueurs where JOU_LIC='".$compte."'");  
		
		$row = mysql_fetch_array($res);
		
		if($row == 0)
		{	
				
			$compte1 = str_replace(" ","%20",$compte);
			$compte2 = str_replace(" ","",$compte); 
		
			copy("http://avatar.xboxlive.com/avatar/".$compte1."/avatar-body.png","upload/".$compte2.".png");
		
			$comparaison_img1_img2 = comparaison_img("upload/".$compte2.".png","images/no-avatar.png");

		
			if ($diff_totales > 1000)
				echo "OK";
			else
				echo "FAIL";
		}
		else
		{
			echo "FAIL";
		}
	}
	else
	{
		echo "FAIL";
	}
}	



Lorsque j'entre un pseudo, la fonction Javascript récupère bien celui-ci. Elle créé correctement l'objet issu de XMLHttpRequest(), mais l'appel de la page "verif_compte.php" ne s'effectue pas. J'ai mis un alert() dans cette page, celui ci ne fonctionne pas.

Quelqu'un aurait-il une idée ?

En vous remerciant;

Guillaume
Modifié par Killaman (11 Aug 2011 - 11:22)
if (([#red]XhrObj.readyState == 4[/#]) && ([#red]XhrObj.readyState == 200[/#])) { 
                if (XhrObj.responseText == 'OK') {  
                    // ok nouveau pseudo  
                    content.innerHTML='<img src="verif_compte/images/accepter.png" alt="Compte valide"/>';  
                }  
                else  
                { 
                    if (XhrObj.responseText == 'FALSE') { 
                        // erreur pseudo déjà existant  
                        content.innerHTML='<img src="verif_compte/images/refuser.png" alt="Compte inexistant ou déjà utilisé"/>';  
                    } 
                    else 
                    { 
                        // erreur dans l'utilisation de la fonction  
                        content.innerHTML='<img src="verif_compte/images/inconnu.png" alt="Erreur dans le résultat"/>';  
                    } 
                }  
            } 


tester qu'une même variable est égal à 4 et 200 à la fois, ça risque de pas être "vrai" bien souvent.
si j'me trompe pas, c'est XhrObj.status == 200

PS : tu test si le retour est OK ou FALSE alors que ton fichier php renvoi OK ou FAIL.
Modifié par Yannick-00 (11 Aug 2011 - 14:20)
Merci pour les réctifications, ce sont des bêtes erreurs de copier/coller Smiley rolleyes

J'ai toujours mon problème, néanmoins.

Est-ce que ma méthode d'appel du fichier verif_config.php est bonne ? Il se trouve bien dans un dossier au même nom.
Killaman a écrit :

Est-ce que ma méthode d'appel du fichier verif_config.php est bonne ? Il se trouve bien dans un dossier au même nom.

c'est verif_config ou verif_compte ?
par rapport à la page qui fait appel à lui, il se trouve bien dans un sous-dossier "verif_truc" ?
si tu tapes directement l'adresse de ce verif_truc.php, tu y accedes ?
si non, probleme d'autorisation (htaccess ou autre dispositif permettant de limiter les acces).
Yannick-00 a écrit :

c'est verif_config ou verif_compte ?
par rapport à la page qui fait appel à lui, il se trouve bien dans un sous-dossier &quot;verif_truc&quot; ?
si tu tapes directement l'adresse de ce verif_truc.php, tu y accedes ?
si non, probleme d'autorisation (htaccess ou autre dispositif permettant de limiter les acces).


C'est verif_compte, quand on fait plusieurs trucs en même temps, on écrit n'importe quoi ! ^^

J'ai tapé directement l'adresse de la page, j'y accède et celle-ci me renvoit bien FAIL (le "FAIL" du test sur la présence de la variable $_POST['p'])
J'ai vraiment l'impression que le problème vient de l'appel de la page verif_compte. J'ai placé une alert js en dessous du
$compte = htmlentities(addslashes($_POST['p'])); 
, je n'ai aucun retour lors de l’exécution.
a écrit :
Dans tous les cas commence par utiliser Firebug et l'onglet "Console".

Et dis nous ce qu'il se passe.


C'est un outil puissant, fait pour aider ...

EDIT : Un Alert JS dans du PHP appelé par AJAX ? ça ne marchera jamais....
Modifié par vincentD83 (12 Aug 2011 - 18:10)
vincentD83 a écrit :
Dans tous les cas commence par utiliser Firebug et l'onglet &quot;Console&quot;.

Et dis nous ce qu'il se passe.


C'est un outil puissant, fait pour aider ...

EDIT : Un Alert JS dans du PHP appelé par AJAX ? ça ne marchera jamais....

Au temps pour moi ^^

Bon j'ai executé la console avec firebug, le script s'execute correctement.
Mais il me retourne mon code d'erreur correspondant à un nombre de différence insuffisant entre l'avatar du joueur et l'avatar d'un compte inexistant.

J'ai vérifié, les deux avatars sont bien différents. J'ai utilisé le code que j'avais déjà executé sur mon autre site : http://team-btk.fr/TEST (GamerTag de test : Killamasta60). et ça fonctionne sur celui-ci.

J'ai testé la valeur de $diff_totales, ça ne me renvoies rien... Problème sur l'appel de la fonction de comparaison ?

Je vous remet le fichier, modifié au fil du temps :



	// fonction de comparaison
	function comparaison_img($img1, $img2){

		$im1 = ImageCreateFromPng($img1);
		list($width_img1,$height_img1) = getimagesize($img1);

		$im2 = ImageCreateFromPng($img2);
		list($width_img2,$height_img2) = getimagesize($img2);


		$width = ($width_img1 > $width_img2)?$width_img1:$width_img2;
		$height = ($height_img1 > $height_img2)?$height_img1:$height_img2;

		$image_resultat_1 = imagecreatetruecolor($width,$height);
		$image_resultat_2 = imagecreatetruecolor($width,$height);

		$diff_totales = 0;


		for ($x=0;$x<$width;$x++) {
			for ($y=0;$y<$height;$y++) {

				$rgb_img1 = ImageColorAt($im1, $x, $y);
				$r_img1 = ($rgb_img1 >> "16") & 0xFF;
				$g_img1 = ($rgb_img1 >> "8") & 0xFF;
				$b_img1 = $rgb_img1 & 0xFF;


				$rgb_img2 = ImageColorAt($im2, $x, $y);
				$r_img2 = ($rgb_img2 >> "16") & 0xFF;
				$g_img2 = ($rgb_img2 >> "8") & 0xFF;
				$b_img2 = $rgb_img2 & 0xFF;


				$r = 255 - abs($r_img1 - $r_img2) ;
				$g = 255 - abs($g_img1 - $g_img2) ;
				$b = 255 - abs($b_img1 - $b_img2) ;

				//resultat 1 : image par gradiant
				$color_resultat_1 = imagecolorallocate($image_resultat_1,$r,$g,$b);
				imagesetpixel($image_resultat_1, $x, $y, $color_resultat_1);


				//resultat 2 : image N/B des différences
				if($r_img1 != $r_img2 or $g_img1 != $g_img2 or $b_img1 != $b_img2) {
					$color_resultat_2 = imagecolorallocate($image_resultat_2, "0", "0", "0");
					$diff_totales++;
				}
				else 
					$color_resultat_2 = imagecolorallocate($image_resultat_2, "255", "255", "255");

				imagesetpixel($image_resultat_2, $x, $y, $color_resultat_2);

			}
		}

		return $diff_totales;
	}
	
	$compte = htmlentities(addslashes($_POST['p']));
	
	if (!empty($compte)) { 
	
		$db = @mysql_connect('db373990097.db.1and1.com', 'dbo373990097', '17569921') or die ("<div style=\"text-align: center;\">Error ! Database connexion failed<br />" . mysql_error() . "</div>");
		$connect = @mysql_select_db('db373990097', $db) or die ("<div style=\"text-align: center;\">Error ! Database connexion failed<br />Check your database's name<br />" . mysql_error() . "</div>");
	
		$res = mysql_query("select JOU_CLE from tab_joueurs where JOU_LIC='".$compte."'");  
		
		$row = mysql_fetch_array($res);
		
		if($row == 0)
		{	
				
			$compte1 = str_replace(" ","%20",$compte);
			$compte2 = str_replace(" ","",$compte); 
		
			copy("http://avatar.xboxlive.com/avatar/".$compte1."/avatar-body.png","upload/".$compte2.".png");
		
			$comparaison_img1_img2 = comparaison_img("upload/".$compte2.".png","images/no-avatar.png");
					
			if ($diff_totales > 1000)
				echo "OK";
			else
				echo "FAIL - DIFF";
		}
		else
		{
			echo "FAIL - ROW";
		}
	}
	else
	{
		echo "FAIL - EMPTY";
	}	


Modifié par Killaman (18 Aug 2011 - 01:54)