[Tuto][PHP,Javascript(AJAX)] Application AJAX accessible par
Rendre ses pages atteignables par url tout en utilisant ajax ?
C'est possible, et commander berze va vous l'expliquer:
A quoi ça sert ?
L'utilité pour un simple site est sans doute très limité. Mais pour une application web, c'est quasi essentiel. Regardez plutôt Yahoo Maps. Pendant que vous naviguez dans la carte, l'url change, en direct ! On y voit la latitude, la longitude, l'état du zoom.. Et quand on colle l'url dans une nouvelle page, ça marche ! On retrouve l'endroit ou vous étiez.
Ce guide est une approche simplissime de la technique utilisée.
Niveau:
Il faut déjà avoir baigné dans de l'ajax.
Langages:
Javascript, PHP, Html.
L'état des chôses:
Ajax, comme expliqué dans la faq, rend les pages web dynamiques, permettant d'en modifier le contenu sans devoir recharger tout la page, rendant le tout plus vif, plus rapide. Sa popularité est grandissante car elle permet aux applications web d'agir quasi comme des applications locales (que vous exécutez sur votre ordinateur), permettant de faire le pont entre les deux, comme google docs ou zoho.
Le problême:
Il n'y a plus de lien direct vers la page. C'est pourtant la une des bases d'internet: avoir une adresse, un lien vers ce qu'affiche votre navigateur, que vous pouvez enregistrer, partager, retenir, copier, coller, etc..
Autre souci, dont ne traite pas ce sujet, c'est que pendant qu'on navigue sur la page, plus rien n'est enregistré dans l'historique du navigateur.
La solution;
Modifier l'url, en utilisant javascript. Mais comment ? Comment modifier l'url sans rafraîcher la page ?
En modifiant le hash, en y injectant des variables et des valeurs. Le hash ? C'est la partie de l'url ou on retrouve les ancres:
monsite.be/index.php?q=wow#hash
(pour plus d'infos sur le dom et les éléments de l'url)
Pour ensuite charger la page, il suffit de récuperer le hash lors du chargement, en extraire les valeurs, et charger le contenu.
Application:
Deux pages:
index.php (page d'accueil, ou se retrouvera toute la partie javacscript et html, en gros la dynamique et affichage)
contenu.php (script qui envoie le contenu à index.php, lorsque celui-ci le demande, cf. ajax).
Le code utilisé pour la connexion asynchrone (ajax) a directement été repris du tuto de Ryle.
index.php:
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<html><head><title>Ma Planche</title>
<!-- partie javascript -->
<script type="text/javascript">
function charge_page(page) { // la fonction qui charge la page.
// Code pris du tutoriel Ajax.
if (window.XMLHttpRequest) { // On test si l'objet existe
xhr = new XMLHttpRequest(); // Firefox, Safari, ...
}
else if (window.ActiveXObject) { // Version ActiveX
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer
}
xhr.open('GET', './contenu.php?p='+page, true);
xhr.send(null);
xhr.onreadystatechange = function() { // traitement de la réponse
if (xhr.readyState == 4) { // la réponse a bien été renvoyée
if (xhr.status == 200) // on vérifie qu'il n'y a pas eu d'erreur
document.getElementById('contenu').innerHTML = xhr.responseText; // met à jour le contenu d'un div par ex
else // si la page n'est pas trouvée (404), les droits sont insuffisants (501), ...
alert ("Erreur : " + xhr.status);
}
}
// fin du code du tuto.
parent.location.hash = page; // Modification de l'url.
}
window.onload = function() { // Ce qu'il y a à exécuter lors du chargement de la page (récuperer le hash).
var hash = parent.location.hash; // on mets le hash dans une variable
if (hash != "") { // on verifie qu'il n'est pas vide et on agit en conséquence.
charge_page(hash.substring(1)); // on évite de prendre en compte le croisillon, et on charge le contenu. Fini !
} else {
charge_page("accueil"); // la page d'accueil est chargée par défaut.
}
};
</script>
</head>
<!-- le corps de la page, avec un titre, sous-titre et menu. -->
<body>
<center>
<h2 style="display:inline;">Ma planche: </h2>
<h3 style="display:inline;">J'ai une belle planche</h3><br>
<a href="javascript:charge_page('accueil');">accueil</a>
<a href="javascript:charge_page('materiau');">materiau</a>
<a href="javascript:charge_page('outil');">outil</a>
<p id="contenu">
<!-- le paragraphe ou sera injecté le texte -->
</p>
</center>
</body>
</html> |
contenu.php :
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
| <?php
// le contenu de mon mini-mini-site:
$contenu = array (
"accueil" => "Bienvenu sur mon site sur ma planche que dedans je fais des trous.",
"materiau" => "Ma planche est en bois bien dur.",
"outil" => "Et pour y faire des trous, j'utilise une foreuse");
// je récupère la page demandée
$page = $_GET["p"];
// j'envoie le tout encodé en UTF8.
echo utf8_encode($contenu[$page]);
?> |
[AJAX] accéder à de l'ajax par url
Répondre avec citation
Partager