[AJAX] Script d'affichage d'une liste

A
Anonymous
Guest
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:
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:
<!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:
<?
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
 
Nouveau WRInaute
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.
 
WRInaute accro
disons que les gens qui s interressent à l'ajax ont téléchargés scriptaculous, et ils y ont trouvé leur bohneur :)
 
WRInaute impliqué
Bonsoir,

Je vais encore faire l'avocat du diable... mais très 8)
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???
 
WRInaute discret
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
 
WRInaute discret
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...
 
Discussions similaires
Haut