[AJAX] Script d'affichage d'une liste

**le Dim Déc 17, 2006 10:04**

On continue avec les scripts AJAX.

Cette fois c'est un exemple de base d'affichage d'une liste de produits avec une naviagtion de page en page...

LE SCRIPT

La table :

Code: Tout sélectionner: CREATE TABLE `fiche` ( `id` int(5) NOT NULL auto_increment, `online` varchar(5) NOT NULL default '0', `date` date NOT NULL default '0000-00-00', `titre` varchar(255) NOT NULL default '', `description` text, UNIQUE KEY `id` (`id`), ) TYPE=MyISAM AUTO_INCREMENT=1 ;

Sur la page fiche.php (cette page va afficher la liste des résultats + une navigation pour recharger en AJAX):

Code: Tout sélectionner: <!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>WRI</title> </head> <script type='text/JavaScript'> var xhr = null; function getXhr(){ if(window.XMLHttpRequest)xhr = new XMLHttpRequest(); else if(window.ActiveXObject){ try{ xhr = new ActiveXObject("Msxml2.XMLHTTP"); }catch (e){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } }else{ alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr = false; } } // CETTE FONCTION VA PEMETTRE DE NAVIGUER DE PAGE EN PAGE function ShowPage(start,nb_fiche_page){ getXhr() xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ document.getElementById('page').innerHTML=xhr.responseText; // ON AFFICHERA LES RESULTATS DANS LA DIV ID "page" } } // REQUETE EN GET AVEC EN PARAMETRES : // LA FICHE AVEC LAQUELLE ON COMMENCE LA LISTE "start" // LE NOMBRE DE FICHES A AFFICHER PAR PAGE "nb_fiche_page" xhr.open("GET","fiche-request.php?start="+start+"&nb_fiche_page="+nb_fiche_page,true); xhr.send(null); } </script> <?php include "./conf.php"; $nb_fiche_page = 3; // ON CHOISI LE NOMBRE DE FICHES A AFFICHER SUR LA PAGE echo '<body onLoad="ShowPage(0,'.$nb_fiche_page.')">'; $resultat = mysql_query("select id FROM fiche WHERE online = '1'"); // REQUETE SUR LA BASE $nbresultat = mysql_num_rows($resultat); // NOMBRE DE RESULTAT SUR LA REQUETE echo '<b>Les fiches</b> ('.$nbresultat.')<br /> <br /> <div id="page"> <br /><br /><h2>Chargement des données en cours...</h2><br><br><br /><br /><br /></div>'; // AFFICHAGE DE LA NAVIGATION DE PAGE EN PAGE AVEC LA FONCTION "SHOWPAGE" echo 'Pages: <a href="#" onClick="ShowPage(0,'.$nb_fiche_page.')">1</a> '; $nb02 = $nbresultat / $nb_fiche_page; for ($i=1; $i < $nb02; $i++) { $a = $i + 1; $b = $i * $nb_fiche_page; echo '<a href="#" onClick="ShowPage('.$b.','.$nb_fiche_page.')">'.$a .'</a> '; } echo '</body> </html>'; ?>

Sur la page fiche-request.php :

Code: Tout sélectionner: <? include "./conf.php"; header('Content-Type: text/html; charset=iso-8859-1'); // ON RECUPER LES VARIABLES $nb_fiche_page = $_GET['nb_fiche_page']; $start = $_GET['start']; echo '<ul>'; $resultat = mysql_query("select id,date,titre,description FROM fiche WHERE online = '1' ORDER BY date DESC, id DESC LIMIT ".$start.",".$nb_fiche_page); while($ligne = mysql_fetch_array($resultat)){ // ON RECUPERE LES 150 CARACTERES DE LA DESCRIPITON $description = (strlen($ligne['description']) > 150) ? ereg_replace("(.{150})( .*)$","\\1...", $ligne['description']) : $ligne['description']; echo "<li> <a href='affichage-fiche.php?id=". $ligne['id'] ."'><b>". $ligne['titre'] ."</b></a><br/> ".$description."<br/> </li>"; } echo '</ul>'; ?>

Pour les applications de ce script, je vous laisse imaginer.

Allez si ce script vous a intéressé, une petite RECO en haut à droite...

Xp

**le Dim Déc 17, 2006 10:52**

simple et pas idiot du tout ;-)

c'est recommandé et noté !

**le Lun Déc 18, 2006 22:46**

1 seul commentaire !

Ca n'intéresse personne :?:

**le Mar Déc 19, 2006 10:24**

Oui, pas mal du tout, sauf que du coup, si tu as 50 pages, ça ne t'en fait plus qu'une seule.

Comment Google gère ça ?

**le Mar Déc 19, 2006 11:21**

Dans ce cas la, vu que quand tu cliques sur "l'article", ca recharge la page, tu peux toujours faire de l'url rewriting, et avoir une page pour chaque id.

par contre, la question est pas mal si on traite l'apparition de chaque article article en ajax aussi.

**le Mar Déc 19, 2006 11:25**

disons que les gens qui s interressent à l'ajax ont téléchargés scriptaculous, et ils y ont trouvé leur bohneur

**le Mer Déc 20, 2006 21:37**

Bonsoir,

Je vais encore faire l'avocat du diable... mais très

A quoi sert ce script??? Pourquoi mettre de l'AJAX dans cette application???
Pour moi l'AJAX doit apporter de l'ergonomie et de l'interactivité, mais dans des cas ou le simple PHP ne peut suffir...

Vous en pensez quoi???

**le Jeu Déc 21, 2006 2:55**

Pas mal ce petit bout de code...

Ne serait il pas plus sage d'utiliser une fonction de callback pour parser les resultats, permettant ainsi une plus grande souplesse et l'ajout de fonctions supplémentaires?
Quitte à jouer avec AJAX, j'aurai utilisé soit du XML soit du texte avec séparateurs mis en forme par JS à l'arrivée, ainsi tu joues réellement l'économie de BP et la modularité du script puisque ca te permettra de récupérer les produits de différentes manières via un seul script PHP et plusieurs fonctions JS. C'est du détail mais AJAX est la pour rendre les détails fluides et aussi pour gagner beaucoup de BP sur les gros traffics...

L'idée est bonne mais c'est vrai que sans etres un expert en référencement, j'ai l'impression que l'on perds plus que l'on ne gagne...

Dans le cas d'un catalogue, j'ai du resister à mon envie de tout faire en ajax et me limiter aux fonctions d'ajout au panier, calcul du total, ... Ces petites fonctions qui n'interessent pas google mais peuvent couter cher en BP (photos et charte) et apportent le petit effet wow qui peut séduire un client potentiel. On peut aussi s'en servir pour recommander des produits différents après 30 sec passé sur une page.

Ca me semble dommage de tout passer en ajax car c'est soit la mort du référencement soit la mort du webaster qui devra faire une version noscript à chaque fois...

beau travail quand meme...

Amicalement

Sebastien

**le Ven Déc 29, 2006 14:18**

Merci pour le bout de script, c'est appréciable de voir que certains cherchent encore à partager

@OJAL : le php peut suffire dans tous les cas mais ergonomiquement, puisque tu en parles, un reload de page c'est ~bôf, autant rester sur la même unité...

@e-kiwi : sciptaculous, GWT, YUI, rico, prototype, dojotoolkit & caetera c'est bien... mais IMHO c'est chasser les mouches à l'explosif, si on veut juste afficher un texte...
Chercher à comprendre par soi-même ça peut se respecter aussi...

Hors la compréhension du mécanisme, ça devrait pouvoir s'utiliser (sans oublier le ref) pour
* ne pas mettre dans une page un contenu qui pourrait jeter le discrédit... (des commentaires non validés par ex.)
* afficher une info sans autre intérêt que pour le visiteur (valider la bonne prise en compte d'une action - passer un vote p.ex)
* faire une page de recherche à petit effet waow (puisque ce sera déja référencé dans le contenu...) avec raffinement de recherche et autres

enfin je dis ça... c'est les idées qui me viennent... Tellement plus facile de dénigrer...

[AJAX] Script d'affichage d'une liste

[AJAX] Script d'affichage d'une liste

Lectures recommandées sur ce thème :

Qui est en ligne