Salut,
A vrai dire, ce n'est pas génial de planquer le contenu ainsi, tu t'en doutes bien.
Tu peux gérer l'affichage via php uniquement ou alors, si vraiment tu veux te prendre le chou, tu peux associer en surplus quelques touches d'Ajax.
Je te laisse un "petit" exemple que tu peux potasser et adapter à tes besoins... (je ne renvoie pas les données à partir d'une bdd mais ça tu peux le faire en modifiant la fonction getTexte
) :
index.php
<?php
header('Content-type: text/html; charset=utf-8');
ob_start('ob_gzhandler');
function getTexte($num)
{
switch($num)
{
case '1':
echo 'test n°1';
break;
case '2':
echo 'test n°2';
break;
case '3':
echo 'test n°3';
break;
case '4':
echo 'test n°4';
break;
case '5':
echo 'test n°5';
break;
default:
echo 'erreur';
}
return true;
}
if(!empty($_GET['ajaxlink']))
getTexte(htmlspecialchars($_GET['ajaxlink']));
else
{
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Exemple Ajax</title>
<style type="text/css"><!--
@media screen, projection {
p
{
background-color: #58F;
width: 200px;
padding: 10px;
border: 2px solid #2C5;
}
}
--></style>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<ul class="test">
<li><a href="index.php?link=1">lien n°1</a></li>
<li><a href="index.php?link=2">lien n°2</a></li>
<li><a href="index.php?link=3">lien n°3</a></li>
<li><a href="index.php?link=4">lien n°4</a></li>
<li><a href="index.php?link=5">lien n°5</a></li>
</ul>
<?php
if(!empty($_GET['link']))
{
echo '<p>';
getTexte(htmlspecialchars($_GET['link']));
echo '</p>';
}
?>
</body>
</html>
<?php
}
?>
ajax.js
(function() {
var oO =
{
bXHRSupport: (typeof XMLHttpRequest != "undefined"),
bActiveXSupport: (window.ActiveXObject),
aMSXML: ["Microsoft.XMLHTTP",
"MSXML2.XMLHTTP", "MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.7.0"],
oCreateXHR: function()
{
if(oO.bXHRSupport)
return new XMLHttpRequest;
else if(oO.bActiveXSupport)
{
var iI = oO.aMSXML.length - 1;
for(; iI >= 0; iI--)
{
try
{
return new ActiveXObject(oO.aMSXML[iI]);
}
catch(oError) { }
}
throw new Error("L'objet XHR n'a pas été créé.");
}
},
fnGetXHR: function(sUrl)
{
var oXHR = oO.oCreateXHR();
oXHR.open('get', sUrl, true);
oXHR.onreadystatechange = function()
{
if(oXHR.readyState === 4)
if(oXHR.status && /200|304/.test(oXHR.status))
return oO.oSetData(oXHR.responseText);
}
oXHR.send(null);
return false;
},
oSetData: function(sData)
{
if(oO.oId('result'))
return oO.oId('result').innerHTML = sData;
else
{
var oResult = document.createElement('p');
oResult.id = 'result';
document.body.appendChild(oResult);
return oO.oId('result').innerHTML = sData;
}
},
fnConnect: function(oElem, sEvType, fn, bCapture)
{
return document.addEventListener ?
oElem.addEventListener(sEvType, fn, bCapture):
oElem.attachEvent ?
oElem.attachEvent('on' + sEvType, fn):
false;
},
oId: function(sId)
{
if(document.getElementById(sId))
return document.getElementById(sId);
return false;
},
aTag: function(oEl, sTag)
{
if(oEl && sTag && oEl.getElementsByTagName(sTag))
return oEl.getElementsByTagName(sTag);
return false;
},
bCancelClick: function(e)
{
if(e && e.stopPropagation && e.preventDefault)
{
e.stopPropagation();
e.preventDefault();
}
else if(e && window.event)
{
window.event.cancelBubble = true;
window.event.returnValue = false;
}
return false;
},
oGetSource: function(e)
{
return e.target || e.srcElement;
},
fnPrepaRequest: function(e)
{
var oSource = oO.oGetSource(e),
sParam = oSource.href.substring(oSource.href.lastIndexOf('=') + 1),
sUrl = 'index.php?ajaxlink=';
sUrl += encodeURIComponent(sParam);
return oO.fnGetXHR(sUrl);
},
oInit: function()
{
var oBody = document.body,
aUls = oO.aTag(oBody, 'ul'),
iI = aUls.length;
while(iI > 0)
if(aUls[--iI].className === 'test')
{
var aAs = oO.aTag(aUls[iI], 'a'),
iJ = aAs.length;
do
oO.fnConnect(
aAs[--iJ],
'click',
function(e)
{
oO.fnPrepaRequest(e);
return oO.bCancelClick(e);
},
false
);
while(iJ > 0);
}
}
};
oO.fnConnect(window, 'load', oO.oInit, false);
})();
... ce qui donne
ceci.
Dans le cas présent, si tu conserves la partie Ajax, il faut rétablir l'historique et la possibilité de bookmarker. Tu peux le faire via une librairie par exemple (Je te le conseille d'ailleurs parce que ce n'est vraiment pas simple à coder
)
