[AJAX] Tuto : Moteur de recherche

http://www.sutekidane.net/blog/creer...st-et-php.html

J'aimerais bien faire la même chose, mais comme a chaque totorial, ca ne fonctionne pas du premier coup.

Si vous pouviez me donner un coup de main.
j'ai tout mis dans un .rar, il faut décompresser, créer la table, renseigner le mot de passe et lancer la page form.php

codejava.js :

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
39
40
41
42
43
44
45
// JavaScript Document
// Déclaration de la fonction de Callback
// + ----------------------------------------------------------------------------------
// + afficherResultats
// + Affiche ou non le conteneur en fonction du résultat de la recherche
// + ----------------------------------------------------------------------------------
function afficherResultats(obj) {
     // Construction des noeuds
     var tabResult = obj.responseXML.getElementsByTagName('resultat');
     document.getElementById('zoneResultats').innerHTML = '';
     if (tabResult.length > 0) {
          // On définit la hauteur de la liste en fonction du nombre de rsultats et de la hauteur de ligne
          var hauteur = tabResult.length * 22; 
          with(document.getElementById('zoneResultats').style) {
               visibility = 'visible';
               height = hauteur + 'px';
          };
          for (var i = 0; i < tabResult.length; i++) {
               resultat = tabResult.item(i); 
               var egt = document.createElement('li');
               var lnk = document.createElement('a');
               var texte = document.createTextNode(resultat.getAttribute('titre'));
               lnk.appendChild(texte);
               lnk.setAttribute('href', resultat.getAttribute('url'));
               lnk.setAttribute('title', resultat.getAttribute('titre'));
               egt.appendChild(lnk);
               document.getElementById('zoneResultats').appendChild(egt);
          }
     }
     else {
          document.getElementById('zoneResultats').style.visibility = 'hidden';
     }
}
// Déclaration de la fonction qui lance la recherche
function loadData() {
     // Création de l'objet
     var XHR = new XHRConnection();
     XHR.appendData("foo", document.getElementById('foo').value);
     // On soumet la requête
     // Signification des paramètres:               
     //      + On indique à l'objet qu'il faut appeler le fichier search.php
     //      + On utilise la méthode POST, adaptée l'envoi d'information
     //      + On indique quelle fonction appeler lorsque l'opération a été effectuée
     XHR.sendAndLoad("search.php", "POST", afficherResultats);
}

Config.php

Code:

1
2
3
4
5
<?php
        mysql_connect('localhost', 'root', 'MOTDEPASSE');
        mysql_select_db('recherche_ajax');
 
?>

form.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
39
40
41
42
 
<?php
        require_once('CConnexion.php');
        require_once('config.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
 
<style type="text/css" media="screen">
	#formulaire { padding:5px; margin:10px 0 0 10px; border:1px dashed #999; width:590px; }
	#formulaire fieldset {	border:0; margin:0; padding:0; }
	#formulaire fieldset label {	display:block; }
	#formulaire legend {	margin:0 0 5px; }
	#formulaire p {	display:block; padding:5px 0 0; margin:10px 0 0; width:580px;}
	#zoneResultats {	border:1px solid #000; background-color:#fff; display:block; overflow:auto; margin:0;padding:0; position:absolute; width:400px;}
	#zoneResultats li {	background:#fff;display:block; margin:0; padding:0; }
	#zoneResultats li a{	display:block; padding:2px; text-decoration:none;}
	#zoneResultats li a:hover{	background-color:#ffffc0; }		
	input {	margin:0; }
</style>
 
</head>
<body>
<script type="text/javascript" src="codejava.js"></script>
 
<form id="formulaire" action="index.php" method="post">
     <fieldset>
     <p>
          <label for="foo">Saisissez les chaines à rechercher dans le champ de formulaire ci-desous :</label>
          <input type="text" name="foo" id="foo" value="" onkeyup="loadData();" />
     </p>
     <ul id="zoneResultats" style="visibility:hidden;"></ul>
     <p>
          Texte à placer pour tester que les réponses s'affichent par dessus... Lorem ipsum ...
     </p>
     </fieldset>
</form>
</body>
</html>

search.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
<?php
require_once('CConnexion.php');
require_once('config.php');
 
header("Pragma: no-cache");
header("Expires: 0");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Content-type: application/xml"); 
 
if(!empty($_REQUEST["foo"]))
{
	$rqListBillet = "SELECT * FROM `recherche_ajax`
						WHERE `ajax_nom` like '" . $_REQUEST["foo"] . "%'
						ORDER BY `ajax_nom` DESC";
	$rsListBillet = mysql_query($rqListBillet);
	$xml = "<resultats nb=\"" .  mysql_num_rows($rsListBillet) . "\">";
	if (mysql_num_rows($rsListBillet) > 0)
	{
		while ($billet = mysql_fetch_object($rsListBillet))
		{
			$xml .= "\n<resultat titre=\"" . str_replace('"', "", $billet->titre) . "\" url=\"/blog/" . $billet->url_page . ".html\" />";
		}
	}
}
else
{
	$xml = "<resultats nb=\"0\">";
}
$xml .= "\n</resultats>";
echo utf8_encode($xml);
?>

La table :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
CREATE TABLE `recherche_ajax` (
	  `ajax_id` int(11) NOT NULL auto_increment,
	  `ajax_date` datetime NOT NULL,
	  `ajax_nom` varchar(512) collate utf8_bin NOT NULL,
	  `ajax_chaine` longtext collate utf8_bin NOT NULL,
	  PRIMARY KEY  (`ajax_id`)
	) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_bin AUTO_INCREMENT=8 ;
 
	-- 
	-- Contenu de la table `recherche_ajax`
	-- 
 
	INSERT INTO `recherche_ajax` (`ajax_id`, `ajax_date`, `ajax_nom`, `ajax_chaine`) VALUES 
	(1, '2007-07-27 12:00:15', 0x4e6f6d31, 0x426c61626c7a6c6971686466206c736a66730d0a6673640d0a660d0a73660d0a730d0a660d0a73660d0a73640d0a6673646673646673646673660d0a),
	(2, '2007-07-27 12:00:29', 0x4e6f6d32, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a71640d0a7173),
	(3, '2007-07-27 12:00:38', 0x416f686f686f68, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a71640d0a7173),
	(4, '2007-07-27 12:00:51', 0x4168616861686168, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a71640d0a7173),
	(5, '2007-07-27 12:01:01', 0x41686168616861, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a71640d0a7173),
	(6, '2007-07-27 12:01:11', 0x4368616d7032, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a71640d0a7173),
	(7, '2007-07-27 12:01:21', 0x4d706f6c736471, 0x710d0a73640d0a7173647173640d0a71730d0a64710d0a640d0a710d0a640d0a71730d0a640d0a71640d0a7173);
*/

Il me manquais le fichier http://xhrconnection.sutekidane.net/...RConnection.js ...

Ce n'est pas mieux avec.

Salut,

Peux-tu en dire plus sur ton problème ? Qu'est-ce qui bloque ? Où ça bloque ?
Qu'est-ce qui marche ?

Rien ne s'affiche, la requête est bonne et je n'ai pas touché au code d'origine.

Essaie de mettre une alert comme ça:
Dans ta fonction afficherResultat
Code:

1 2 3 4 5 6 ... if(tabResult.length>0) alert("affichage"); else alert("rien à afficher");
Histoire de voir s'il y a bien une réponse. Normalement tu devrais voir "Affichage" car ta requète est bonne.
Dans ce cas essaie d'afficher quelque chose dans ta zone de résultat:
Code:

1 2 3 document.getElementById('zoneResultats').style.visibility= "visible"; document.getElementById('zoneResultats').innerHTML = "Ca marche";
Une question, tu utilises quel navigateur ? Avec Firefox, tu peux voir dans la console s'il y a des erreurs, tu peux également installer l'extension firebug qui te permet de suivre ce qui se passe lorsque tu utilises Ajax.

Rien a afficher ...

Table :
http://img90.imageshack.us/img90/2818/ikiolph7.png

search.php :
http://img209.imageshack.us/img209/6651/oiokqu8.png

Et pourtant ma requête renvoie un résultat.
http://img444.imageshack.us/img444/8474/azaxz9.png

Et tu as essayé de mettre des alert dans ton code javascript ?
Quel navigateur utilises tu ?