Navigatie - bookmarken
Werkend voorbeeld
http://www.manutechnica.com/tutorials/ajax/phphulp/navig/
Een logische opmerking, die de ronde doet, is dat je Ajax moeilijk kan gebruiken voor navigatie. Je kan de pagina niet bookmarken.
Wel, er is een oplossing. Zet aan het eind van de url een # (hash teken). Daar rechts van kan je informatie kwijt. Al wat in de url rechts van het # staat, wordt niet naar de server gestuurd. Je kan die dan ook niet opspeuren met php. Lokaal kan je dat wel opsporen, met javascript.
Zo kan je dus bv. de pagina opslaan in de url, na de #.
Laat ons het eerste voorbeeld eens uitbreiden.
index.php
Code (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
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
switch($_GET['pagina'])
{
default:
echo '<html>
<head>
<script src="ajax.js" type="text/javascript"></script>
<script src="js.js" type="text/javascript"></script>
<style>
#menuDiv {border: 1px solid #333333; height: 450px; width: 250px; float: left; margin: 0 3px 0 0;}
#content{border: 1px solid #333333; height: 450px; width: 450px; float: left;}
</style>
</head>
<body onLoad="onLoad();">
<h3>navigatie - bookmarken</h3>
<div>Voorbeeld van navigatie. De pagina wordt meegegeven in de url, na het # teken. Je kan dit soort pagina dus ook bookmarken.</div>
<div id="menuDiv">
<div><a href="javascript: surf(1);">pagina 1</a></div>
<div><a href="javascript: surf(2);">pagina 2</a></div>
<div><a href="javascript: surf(3);">pagina 3</a></div>
</div>
<div id="content"></div>
</body>
</html>
';
break;
case 'navigeer':
// Ajax
if (! empty($_GET['id']))
{
$berichten = array(
1 => 'pagina 1. <br/><br/>Hier volgt dan de pagina',
'pagina 2. <br/><br/>Maar hier gaat het even juist om de Ajax.',
'pagina 3. <br/><br/>Kwestie van door de bomen het bos nog te kunnen zien.'
);
echo $berichten[ (int) $_GET['id'] ];
}
break;
}
?>
switch($_GET['pagina'])
{
default:
echo '<html>
<head>
<script src="ajax.js" type="text/javascript"></script>
<script src="js.js" type="text/javascript"></script>
<style>
#menuDiv {border: 1px solid #333333; height: 450px; width: 250px; float: left; margin: 0 3px 0 0;}
#content{border: 1px solid #333333; height: 450px; width: 450px; float: left;}
</style>
</head>
<body onLoad="onLoad();">
<h3>navigatie - bookmarken</h3>
<div>Voorbeeld van navigatie. De pagina wordt meegegeven in de url, na het # teken. Je kan dit soort pagina dus ook bookmarken.</div>
<div id="menuDiv">
<div><a href="javascript: surf(1);">pagina 1</a></div>
<div><a href="javascript: surf(2);">pagina 2</a></div>
<div><a href="javascript: surf(3);">pagina 3</a></div>
</div>
<div id="content"></div>
</body>
</html>
';
break;
case 'navigeer':
// Ajax
if (! empty($_GET['id']))
{
$berichten = array(
1 => 'pagina 1. <br/><br/>Hier volgt dan de pagina',
'pagina 2. <br/><br/>Maar hier gaat het even juist om de Ajax.',
'pagina 3. <br/><br/>Kwestie van door de bomen het bos nog te kunnen zien.'
);
echo $berichten[ (int) $_GET['id'] ];
}
break;
}
?>
js.js
Code (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
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
http = createHTTPHandler();
function onLoad()
{
var pagina = getUrl(window.location);
if (pagina != '')
navigeer(pagina);
}
function surf(pagina)
{
if (pagina != '')
{
window.location = "#" + pagina;
navigeer(pagina);
}
}
function navigeer(pagina)
{
var url = "index.php?pagina=navigeer&id=" + pagina;
http.open("GET", url, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function handleHttpResponse()
{
if(http.readyState == 4)
{
document.getElementById('content').innerHTML = http.responseText;
}
}
function getUrl(url)
{
var str = String(url);
var temp = new Array();
temp = str.split("#");
if (temp.length > 1)
return temp[1];
else
return '';
}
function onLoad()
{
var pagina = getUrl(window.location);
if (pagina != '')
navigeer(pagina);
}
function surf(pagina)
{
if (pagina != '')
{
window.location = "#" + pagina;
navigeer(pagina);
}
}
function navigeer(pagina)
{
var url = "index.php?pagina=navigeer&id=" + pagina;
http.open("GET", url, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function handleHttpResponse()
{
if(http.readyState == 4)
{
document.getElementById('content').innerHTML = http.responseText;
}
}
function getUrl(url)
{
var str = String(url);
var temp = new Array();
temp = str.split("#");
if (temp.length > 1)
return temp[1];
else
return '';
}
Zoals je ziet: javascript kan detecteren wat in de url na de # staat. Daarmee kan je dus een url maken die men kan bookmarken. Je kan zelf wel een functie scrijven die complexere gegevens uit de url kan halen. Het is een beetje spelen met split(), substring(), ...
« vorige pagina | volgende pagina »