Scripts
site javascript-onafhankelijk maken
Vaak wordt hier - waarschijnlijk terecht - verwezen naar gebruikers die hun javascript af zetten (of een browser hebben die geen javascript heeft). Hier toon ik een manier van werken waarbij je er voor zorgt dat de site eerst volledig werkt zonder javascript. Daarna voeg je extra javasript/ajax functionaliteit toe. Je onderschept de gewone werking van een element en voert in de plaats een javascript functie uit. Indien javascript af staat, wordt de gewone werking van de site gevolgd. Wat is de rode draad? return false; Ik geef twee voorbeelden: - een formulier met onsubmit="return false;" // de false komt van een javascript functie - links met onclick="return false;" // de false komt van een javascript functie Wat ik verder doe, is een extra $_GET variabele mee geven. Indien die een waarde heeft, voer je de ajax afhandeling af. Anders hou je het op de klassieke manier. Je zou dit uiteraard ook in een s_SESSION, $_POST, ... kunnen zetten. Je ziet maar. Belangrijk lijkt me dat je de functionaliteit zo veel mogelijk op de zelfde plaats afhandelt, maar ja, ieder zijn stijl. Je kan dit uitbreiden voor zowat gelijk wat. Controleer zelf eens met een webbrowser waar javascript af staat. Wat je ook kan doen, is, bovenaan index.php, de define op false zetten. Eventueel kan je ook eens kijken naar dit: Ajax pagina's bookmarken
site-javascriptonafhankelijk-maken
index.php
<?php
session_start();
define('JAVASCRIPT_FILES_LADEN', true); // deze define de waarde false geven, zorgt er voor dat de javascript files niet geladen worden. Dit geeft dus een vergelijkbaar effect alsof je javascript af hebt staan.
$_GET['p'] = ( !empty($_GET['p']) ? $_GET['p'] : '');
if ( !empty($_POST) )
{ // afhandelen van post
switch ( $_GET['p'] )
{
case 'login': echo login(); break;
default:
break;
}
}
else
{ // gewone pagina's
switch ( $_GET['p'] )
{
default : echo main(); break;
case 'welkom' : echo welkom(); break;
case 'fotoalbum' : echo fotoalbum(); break;
case 'login' : echo loginForm(); break;
}
}
///////////////////////
function main()
{
return htmlOpmaak('');
}
function fotoalbum()
{
$fotos = getFotos();
$_GET['id'] = ( !empty($_GET['id']) ? (int) $_GET['id'] : 0);
if ($_GET['id'] >= count($fotos) )
$_GET['id'] = 0;
if (!empty($_GET['ajax'])) // enkel de url van de foto meegeven
{
$return = $fotos[ (int) $_GET['id'] ] ; // uiteraard geen html opmaak
}
else // volledige pagina
{
$return = '<div id="thumbnails">';
foreach ($fotos as $key => $foto)
$return .='<a onClick="return get_foto('. $key .')" href="index.php?p=fotoalbum&id='. $key .'"><img src="'. $foto .'"/></a>';
$return .= '</div>
<img id="grote_foto" src="'. $fotos[ (int) $_GET['id'] ] .'"></div>
';
$return = htmlOpmaak($return);
}
return $return;
}
function getFotos()
{
return array(
'http://www.planetperplex.com/img/escher_waterfall.jpg'
, 'http://blogimages.bloggen.be/artiest_escher/81550-10ab380c07a9a49af2bfc1a4521115b3.jpg'
, 'http://www.wadden.vuurwerk.nl/socrates/escher.gif'
, 'http://maths.ucd.ie/mathsupportcentre/ucdwebpage/images/escher_ascending_descending.jpg'
);
}
function welkom()
{
$ingelogd = 'niet ingelogd. <div><a href="index.php?p=login">Inloggen</a></div>';
if ( !empty($_SESSION['login']) )
$ingelogd = '
<div id="login_container">
Ingelogd als: '. $_SESSION['login'] .' (met de traditionele post)
</div>';
return htmlOpmaak($ingelogd);
}
function loginForm()
{
return htmlOpmaak('
<div id="login_container">
<form method="post" action="index.php?p=login" onsubmit="return submit_login();">
<h2>Inloggen</h2>
<div><label><input type="text" name="login" id="login"/> Login </label></div>
<div><label><input type="password" name="password" id="password"/> Paswoord </label></div>
<div><label><input type="submit" value="login"/></label></div>
</form>
</div>
');
}
function login()
{
$result='';
$sql = sprintf("SELECT id, login, password FROM users WHERE login='%s' AND password='%s' LIMIT 1"
, mysql_real_escape_string($_POST['login'])
, md5($_POST['password'])
);
// haal record uit db, ...
$_SESSION['login'] = $_POST['login'];
if ( empty($_GET['ajax']) )
{
header('location: index.php?p=welkom');
}
else
{
$result .= 'Ingelogd als: '. $_SESSION['login'] .' (met Ajax)' ;
}
return $result;
}
function getMenu()
{
return '
<span><a href="index.php?p=login">Inloggen</a></span>
| <span><a href="index.php?p=fotoalbum">Foto album</a></span>
';
}
function htmlOpmaak($body)
{
$js = false;
if(JAVASCRIPT_FILES_LADEN == true)
$js = '
<script src="ajax.js" language="javascript" type="text/javascript"> </script>
<script src="js.js" language="javascript" type="text/javascript"> </script>
';
return '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//NL" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
'.$js.'
<link href="css.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div id="menu">'. getMenu() .'</div>
<div id="content">'. $body .'</div>
</body>
</html>';
}
?>
js.js
[code]var http = new ajaxObject();
function submit_login()
{
var url = 'index.php?p=login&ajax=1';
var vars = 'login='+ document.getElementById('login').value + '&password='+ document.getElementById('password').value;
http.send(
url, // url
response_login, // callback
'post', // get / post
vars // string of variables, eg. 'id='+ escape(id) +'&action=delete';
);
return false;
}
function response_login()
{
var response = http.response('text');
if ( response != null )
{
document.getElementById('login_container').innerHTML = response;
}
}
function get_foto(id)
{
var url = 'index.php?p=fotoalbum&ajax=1&id='+ id;
http.send(
url, // url
response_foto, // callback
'get', // get / post
null // string of variables, eg. 'id='+ escape(id) +'&action=delete';
);
return false;
}
function response_foto()
{
var response = http.response('text');
if ( response != null )
{
document.getElementById('grote_foto').src = response;
}
}[/code]
ajax.js
[code]/*
// example of how to use:
var http = new ajaxObject();
var catSelected;
function getMeer(cat)
{
http.send(
'ajax.php?cat='+ cat, // url
response_links, // callback
'get', // get / post
null // string of variables, eg. 'id='+ escape(id) +'&action=delete';
);
}
function response_links()
{
var response = http.response('text');
if ( response != null )
{
var container = document.getElementById('categorie');
container.innerHTML = response;
}
}
*/
function ajaxObject()
{
this.http = createHTTPHandler();
}
ajaxObject.prototype.send = function(url, response, method, passData)
{
if (method == 'post')
{
this.http.open("POST", url, true);
this.http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
this.http.onreadystatechange = response;
this.http.send( passData );
}
else // default GET
{
this.http.open("GET", url, true);
this.http.onreadystatechange = response;
this.http.send(null);
}
}
ajaxObject.prototype.response = function(type)
{
try
{
if (this.http.readyState == 4)
{
switch (type)
{
default:
return this.http.responseText;
break;
case 'json':
return eval('(' + this.http.responseText + ')');
break;
case 'xml':
return this.http.responseXml;
break;
}
}
else
return null;
}
catch(e)
{
}
return null;
}
function createHTTPHandler()
{
httphandler = false;
// branch for native XMLHttpRequest object
if(window.XMLHttpRequest)
{
try
{
httphandler = new XMLHttpRequest();
} catch(e)
{
httphandler = false;
}
// branch for IE/Windows ActiveX version
}
else if(window.ActiveXObject)
{
try
{
httphandler = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e)
{
try
{
httphandler = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e)
{
httphandler = false;
}
}
}
return httphandler;
}[/code]
css.css
[code]
body
{
background-color: #000000;
color: #33eecc;
}
a
{
color: #ccee22;
text-decoration: none;
}
img
{
border: 0;
}
#grote_foto
{
height: 450px;
margin: 10px;
}
#thumbnails a img
{
height: 120px;
margin: 5px;
}[/code]
Reacties
0