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)
PHP script in nieuw venster Selecteer het PHP script
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
<?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;
  }

?>


js.js
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
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 '';
}


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(), ...

« Lees de omschrijving en reacties

Inhoudsopgave

  1. Inleiding
  2. Het AJAX object aanmaken.
  3. Eerste voorbeelden
  4. Navigatie - bookmarken
  5. JSON
  6. XML
  7. UNICODE - Slot

PHP tutorial opties

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.