navigatie.js
[code]
//////////////////////////////////////////////////////
//navigatie.js - copyleft Emmanuel Delay 2009 - emmanueldelay@hotmail.com
//
// Thanks to:
// * Fixing the Back Button and Enabling Bookmarking for AJAX Apps http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps
// * timer.js: http://www.codingforums.com/archive/index.php/t-10531.html
//
// gebruik:
// * zorg dat je navigatie.js en timer.js op hebt en laadt.
// * maak het navigatie object aan (bv. var m_navig).  Je geeft een callback mee met de constructor.  Dat is de functie waarmee je je ajax request regelt.  In die functie kan je m_navig.vars aanspreken.
// * Maak het object actief, bv. met <body onload="m_navig.init()">
// * that's it.
//
// voorbeeld van gebruik:
// index.php
/*
<html>
  <head>
    <script src="timer.js" language="javascript" type="text/javascript"></script> 
    <script src="ajax.js" language="javascript" type="text/javascript"></script> 
    <script src="navigatie.js" language="javascript" type="text/javascript"></script> 
    <script language="javascript">
      var m_navig = new navigatie(ajaxActie);
      function ajaxActie()
      {
        action = m_navig.getVarValue('action');
        switch(action)
          {
            case 'get_profiel': 
              var lid = m_navig.getVarValue('lid');
              if ( lid != false ) 
                get_profiel( Number(lid) ); 
              break;
          }
      }
      function get_profiel(lid)
      {
        // hier zou je dus een ajax request aanroepen
        // van daar ook ajax.js.  Dit hoor je zelf te regelen
        // om toch maar iets te tonen ... 
        document.getElementById("profiel").innerHTML = 'Hier zou dus het profiel van '+ lid +' komen';
      }
    </script>
    <title>Voorbeeld van Ajax navigatie</title>
  </head>
  <body onload="m_navig.init()">
    <div>
      <a href="#action=get_profiel&lid=5" onClick="get_profiel(5);" >Profiel van Mevr. 5 </a>
    </div>
    <div>
      <a href="#action=get_profiel&lid=8" onClick="get_profiel(8);" >Profiel van Mr. 8 </a>
    </div>
    <div id="profiel"></div>
  </body>
</html>
*/
///////////////////////////////////////////////////////////

// constructor
function navigatie(actieCallBack)
  {
    this.timerInterval = 200;
    this.actieCallBack = actieCallBack;
    this.idle = true;
    this.vars = null;
    this.timer = new Timer(this);
  }
// voer deze methode uit bv. bij body="onload"
navigatie.prototype.init = function ()
  {
    this.idle = false;
    this.urlVeranderd(0);
  }
navigatie.prototype.go = function ()
  {
    if (this.idle == true)
      this.init();
    var url = this.getUrl();
    this.vars = this.getVars(url);
    this.actieCallBack();
  }
navigatie.prototype.getVarValue = function (key)
  {
    for (var i=0; i< this.vars.length; i++)
      {
        if (this.vars[i][0] == key)
          return this.vars[i][1];
      }
    return false;
  }
navigatie.prototype.getUrl = function ()
  {
    var url = String(window.location);
    return this.getHash(url);
  }
navigatie.prototype.getVars = function (url)
  {
    var a = url.split("&");
    var result = Array();
    for (var i=0; i< a.length; i++)
      {
        var b = a[i].split("=");
        if ( b[1] == null)
          break;
        result[i] = b;
      }
  return result;
  }
navigatie.prototype.getHash = function(url)
{
    var temp = new Array();
    temp = url.split("#");
    if (temp.length > 1)
      return temp[1];
    else
      return '';
}
navigatie.prototype.urlVeranderd = function(location)
{
  // om de zoveel tijd peil je of de url veranderd is.
  if( this.getUrl() != location) 
    {
        this.go();
    }
    this.timer.setTimeout("urlVeranderd", this.timerInterval, this.getUrl()  );
}

///////////

// timer.js (niet van mijn hand, zeer handig)
/*
		Timer by Algorithm
		http://www.codingforums.com/archive/index.php/t-10531.html
	*/
	function Timer(){
		this.obj = (arguments.length)?arguments[0]:window;
		return this;
	}
	
	// The set functions should be called with:
	// - The name of the object method (as a string) (required)
	// - The millisecond delay (required)
	// - Any number of extra arguments, which will all be
	// passed to the method when it is evaluated.
	
	Timer.prototype.setInterval = function(func, msec){
		var i = Timer.getNew();
		var t = Timer.buildCall(this.obj, i, arguments);
		Timer.set[i].timer = window.setInterval(t,msec);
		return i;
	}
	Timer.prototype.setTimeout = function(func, msec){
		var i = Timer.getNew();
		Timer.buildCall(this.obj, i, arguments);
		Timer.set[i].timer = window.setTimeout("Timer.callOnce("+i+");",msec);
		return i;
	}
	
	// The clear functions should be called with
	// the return value from the equivalent set function.
	Timer.prototype.clearInterval = function(i){
		if(!Timer.set[i]) return;
		window.clearInterval(Timer.set[i].timer);
		Timer.set[i] = null;
	}
	Timer.prototype.clearTimeout = function(i){
		if(!Timer.set[i]) return;
		window.clearTimeout(Timer.set[i].timer);
		Timer.set[i] = null;
	}
	
	// Private data
	Timer.set = new Array();
	Timer.buildCall = function(obj, i, args){
		var t = "";
		Timer.set[i] = new Array();
		if(obj != window){
			Timer.set[i].obj = obj;
			t = "Timer.set["+i+"].obj.";
		}
		t += args[0]+"(";
		if(args.length > 2){
			Timer.set[i][0] = args[2];
			t += "Timer.set["+i+"][0]";
			for(var j=1; (j+2)<args.length; j++){
				Timer.set[i][j] = args[j+2];
				t += ", Timer.set["+i+"]["+j+"]";
			}
		}
		t += ");";
		Timer.set[i].call = t;
		return t;
	}
	Timer.callOnce = function(i){
		if(!Timer.set[i]) return;
		eval(Timer.set[i].call);
		Timer.set[i] = null;
	}
	Timer.getNew = function(){
		var i = 0;
		while(Timer.set[i]) i++;
		return i;
	}
[/code]