Ajax PHP MVC OOP
Doel: Rich webapplicatie, met ajax/PHP, MVC indeling en OOP.
Vraag 1: Wat is de slimste mannier om navigatie op te zetten met Ajax en PHP? Laat ik dat door javascript door sturen, werken met ID?
Vraag 2: Betreft de MVC indeling, zie ook http://glyphobet.net/blog/wp-content/uploads/2008/01/mvc-4-i.png, hoe kan ik het beste doen met database classes en als ik de mvc indeling gebruik, moet ik dat de hele opmaak/view ook in een class zien?
Als iemand me opweg zou kunnen/willen helpen heel graag, andere tips, Do en Dont's voor het opzetten van rich webapplicatie zijn ook welkom.
Alvast bedankt
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
46
47
48
49
50
51
52
53
54
55
56
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
<?
$ajaxContent = "";
switch ($_GET['pagina'])
{
case 'gastenboek':
$ajaxContent = '
<h3>Gastenboek</h3>
<p>Hier zou je dus verbinding kunnen maken met de database om de berichten op te vragen.</p>';
break;
case 'foto':
$ajaxContent = '
<h3>Foto\'s</h3>
<li>fotoreeks 1</li>
<li>fotoreeks 2</li>
<li>fotoreeks 3</li>
<li>fotoreeks 4</li>
';
break;
case 'contact':
$ajaxContent = '
<p>Contacteer de webmaster</p>
<p><a href="mailto: [email protected]">[email protected]</a></p>
';
break;
}
if ($_GET['pagina'])
{
echo $ajaxContent; // wordt als ajax request gestuurd
}
else
{
// gewone pagina
echo '
<html>
<script src="js.js" language="javascript" type="text/javascript"></script>
<head>
<title>Ajax voorbeeldje</title>
<style>
* { margin: 0; padding: 0;}
#menu{height: 400px; width: 150px; padding: 3px; border: 1px solid #555555; float: left;}
#content{height: 400px; width: 500px; padding: 3px; border: 1px solid #555555;}
</style>
</head>
<body >
<div id="menu">
<li><a href="javascript: navigeer(\'gastenboek\');">gastenboek</a></li>
<li><a href="javascript: navigeer(\'foto\');">foto\'s</a></li>
<li><a href="javascript: navigeer(\'contact\');">contact</a></li>
</div>
<div id="content"></div>
</body>
</html>
';
}
?>
$ajaxContent = "";
switch ($_GET['pagina'])
{
case 'gastenboek':
$ajaxContent = '
<h3>Gastenboek</h3>
<p>Hier zou je dus verbinding kunnen maken met de database om de berichten op te vragen.</p>';
break;
case 'foto':
$ajaxContent = '
<h3>Foto\'s</h3>
<li>fotoreeks 1</li>
<li>fotoreeks 2</li>
<li>fotoreeks 3</li>
<li>fotoreeks 4</li>
';
break;
case 'contact':
$ajaxContent = '
<p>Contacteer de webmaster</p>
<p><a href="mailto: [email protected]">[email protected]</a></p>
';
break;
}
if ($_GET['pagina'])
{
echo $ajaxContent; // wordt als ajax request gestuurd
}
else
{
// gewone pagina
echo '
<html>
<script src="js.js" language="javascript" type="text/javascript"></script>
<head>
<title>Ajax voorbeeldje</title>
<style>
* { margin: 0; padding: 0;}
#menu{height: 400px; width: 150px; padding: 3px; border: 1px solid #555555; float: left;}
#content{height: 400px; width: 500px; padding: 3px; border: 1px solid #555555;}
</style>
</head>
<body >
<div id="menu">
<li><a href="javascript: navigeer(\'gastenboek\');">gastenboek</a></li>
<li><a href="javascript: navigeer(\'foto\');">foto\'s</a></li>
<li><a href="javascript: navigeer(\'contact\');">contact</a></li>
</div>
<div id="content"></div>
</body>
</html>
';
}
?>
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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
//////////////////////////////////////////////////////
//ajax
var http = null; // global
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;
}
/////////////////////////////////////////////////////////////////////////////
// gebruik van Ajax
function handleHttpResponse()
{
if(http.readyState == 4)
{
document.getElementById('content').innerHTML = http.responseText;
}
}
function navigeer(pagina)
{
http = createHTTPHandler();
var url = "index.php?pagina=" + pagina;
http.open("GET", url, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
[/CODE]
//ajax
var http = null; // global
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;
}
/////////////////////////////////////////////////////////////////////////////
// gebruik van Ajax
function handleHttpResponse()
{
if(http.readyState == 4)
{
document.getElementById('content').innerHTML = http.responseText;
}
}
function navigeer(pagina)
{
http = createHTTPHandler();
var url = "index.php?pagina=" + pagina;
http.open("GET", url, true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
[/CODE]
In die functie maak je een Ajax object aan: var http .
In die functie stuur je een http request op. Je vraagt Ajax (heel beleefd) om te surfen naar een bepaalde pagina, hier zijnde bv. "index.php?pagina=foto".
Je wacht tot Ajax die pagina heeft opgehaald.
in handleHttpResponse() wordt de response geregeld.
Er zijn 5 staten van 'klaar zijn'. Bij if(http.readyState == 4) is de pagina helemaal opgehaald.
Bij if(http.readyState < 4) zou je eventueel iets kunnen doen zoals je cursor op 'wait' zetten.
De pagina, die Ajax heeft opgehaald, zit nu in http.responseText;
De html van die pagina kan je eventueel in een div pompen.
Andere dingen zijn ook nog mogelijk.
icon, je bumpt 3 keer achter elkaar :)
Bumpen::
Twee of meer keer achter elkaar in een topic posten heet bumpen. Bumpen is pas na 24 uur toegestaan en kan een reden zijn voor de admins en moderators om een topic te sluiten. Gebruik indien nodig de knop om je tekst aan te passen.
knop om je tekst aan te passen.SanThe.
Edit: Oeps, beetje laat, had de pagina blijkbaar nog niet ververst.
Gewijzigd op 01/01/1970 01:00:00 door - SanThe -
Als je voor de echte RIA gaat zou ik serieus eens overwegen te kijken naar bijvoorbeeld SproutCore of Adobe Flex of iets vergelijkbaars. Het Javascript-gedeelte dat in de browser draait kan je dan heel goed opbouwen via het MVC paradigma. De server wordt eigenlijk gedegradeerd tot een service, een soort database. MVC is daar niet echt meer nodig dan.
Ben er even mee bezig geweest maar ben helaas geen ster in javascript.
En heb 1 klein vraagje.
Ik heb geprobeerd om het script aan te passen zodat de div die aangepast moet worden meegegeven kan worden in de link. Wat het een stuk generieker zal maken.
Voorbeeld:
<li><a href="javascript: navigeer(\'gastenboek\', \'content\');">gastenboek</a></li>
gastenboek is de pagina die aangeroepen moet worden.
content is de div die aangepast moet worden
Door dit aan te passen:
function handleHttpResponse(element)
{
if(http.readyState == 4)
{
document.getElementById('content').innerHTML = http.responseText;
}
}
function navigeer(pagina, element)
{
http = createHTTPHandler();
var url = "index.php?pagina=" + pagina;
http.open("GET", url, true);
http.onreadystatechange = handleHttpResponse(element);
http.send(null);
}
echter loopt het stuk op de volgende regel:
http.onreadystatechange = handleHttpResponse(element);
Kan ik die functie 'handleHttpResponse' zo niet aanroepen?
Wie kan mij verder helpen?
Gewijzigd op 01/01/1970 01:00:00 door Mark Eilander
