AJAX
51
AJAX een korte introductie Koen Willems & Edwin Vlieg PHPFreakz, 18-11-2006
description
AJAX. een korte introductie. Koen Willems & Edwin Vlieg PHPFreakz, 18-11-2006. We werken conform webstandaarden!!! zie bijv. http://webrichtlijnen.overheid.nl. oud. nieuw. Bush MB 60 (1957). Bush TR 82 (1959). Een verschil?. oud: buizenradio. nieuw: transistorradio. - PowerPoint PPT Presentation
Transcript of AJAX
AJAXeen korte introductie
Koen Willems & Edwin VliegPHPFreakz, 18-11-2006
We werken conform webstandaarden!!!
zie bijv. http://webrichtlijnen.overheid.nl
Een verschil?
Bush MB 60 (1957)
oud
Bush TR 82 (1959)
nieuw
oud: buizenradio
Bush MB 60 (1957)
nieuw: transistorradio
Bush TR 82 (1959)
Het verschil: onderhuids
Makkelijk kunnen we het niet maken?
Bron: www.overheid.nl/op
Antwoord:[…]“Windows 98 is niet geschikt voor het doen van elektronische aangifte met behulp van de voorziening die de Belastingdienst biedt voor de inkomstenbelasting (winst) en vennootschapsbelasting.”[…]“In totaal gaat het naar verwachting om tussen de 5.000 en 15.000 aangiften inkomstenbelasting (winst) op een totaal van 1.000.000. Deze ondernemers kunnen alleen zelf aangifte doen als zij overstappen op een nieuwer besturingssysteem.”[…]
want:
Groepen gebruikers ondervinden hinder bij de toegang tot informatie en diensten op internet:
– Apple en Linux computers– Firefox, Mozilla, Netcape, Safari, Konqueror,
Opera en andere, minder populaire browsers– PDA’s, smartphones, e.d.– Gebruikers met een functiebeperking
• Toegankelijkheid
• Toegankelijkheid
• En Toegankelijkheid
• Iedereen en alles TOEGANG!!!
Strikte scheiding tussen
• Inhoud (XHTML)
• Vorm (CSS)
• Gedrag (bijv. javascript)
Voordelen
Van een website van de nieuwe generatie
...en van een transistorradio:
• Relatieve eenvoud van het ontwerp
• Lichter
• Sneller
• Goedkoper
• Bouwkosten zijn ongeveer gelijk
• Exploitatie is goedkoper– Bandbreedte– Performance bij piekbelasting– Beheer– Overdraagbaarheid– Migratie
Goedkoper?
Styling
• Externe stylesheets
• Apparaat-afhankelijk
Strategiën
- Gracefull degradation
- Progressive enhancement
Gracefull degradation
<a href=”http://www.phpfreakz.nl/pagina10”
onclick=“openSubmenu(); return false;”>
submenu</a>(voorbeeld van een uitklapmenu)
• Uitgangspunt is de moderne browser
• Doel is oudere browsers dezelfde functionaliteit te bieden
• In oudere browsers wordt wordt de informatie beperkter, maar toegankelijk gepresenteerd.
• Nodigt uit tot upgraden
Progressive enhancement
<a href=“http://www.phpfreakz.nl/pagina10”
id=“submenu” >submenu</a>
http://www.en.wikipedia.org/wiki/Progressive_Enhancementility
een strategie van webdesign,
die op een gelaagde wijze de nadruk legt op toegankelijkheid, semantische opmaak en externe layout- en scripttechnologien,
die iedereen toegang biedt tot de basisinhoud en basisfunctionaliteit bij iedere browser of internetverbinding,
terwijl diegenen met een geavanceerder browser of een betere internetverbinding software wordt aangeboden om een betere versie van de pagina te ervaren
Dus:- Iedereen dezelfde functionaliteit- Waar mogelijk iets extra’s
GD: toegankelijkheid verbeteren zonder
veel gebruiksvriendelijkheid in te
leveren
PE: niveau van gebruiksvriendelijheid
verhogen zonder toegankelijkheid in te
leveren
<a href=“http://www.phpfreakz.nl/pagina10”id=“submenu” >submenu</a>
maar dat submenu dan?
extern javascriptwaarvoor het id het aanhaakpunt vormt
de xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
<head>
<script type=“text/javascript” src=“/script.js”></script>
</head>
<body>
<p>
<a href=“http://www.phpfreakz.nl/pagina10” id=“submenu” >submenu</a>
</p>
</body>
</html>
script.jswindow.onload = function(){
Listener();}
function Listener() {var Elm = document.getElementById(‘submenu’);if(window.attachEvent) {
Elm.attachEvent(‘onclick’, openSubmenu);}else if(window.addEventListener) {
Elm.addEventListener(‘click’,openSubmenu, false);}
}
function openSubmenu() {// functie
}
function (add) { if(document.getElementById(‘submenu’) { addEvent(document.getElementById('submenu'), 'click', openSubmenu); }}
function openSubmenu() { // functie}
function addEvent(obj, evType, fn) { if (obj.addEventListener) { // W3C-model obj.addEventListener(evType, fn, false); return true; } else if (obj.attachEvent) { // IE obj.attachEvent('on'+evType, fn); return true; } else { return false; }}
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } }}
addLoadEvent(add);
Unobtrusive javascript
Ehm … dat hebben we net gemaakt!
Let er wel op dat de events die je aan een element toevoegd apparaat-onafhankelijk zijn (drempelsvrij, WCAG 1.0)
Device independent events
• onfocus
• onblur
• onselect
• onchange
• onclick (bij een link of een formulier
Device dependent events
• onmouseover
• onmouseout
• ondblclick
• onkeydown
• onkeyup
• Etc.
Het probleem van internet
internet is stateless(server weet niet wat de browser doet)
World Wide Wait
steeds moet de hele pagina geladen te worden
Gebruikers hebben het gevoel te moeten wachten.
klik – stop – klik – stop – klik - stop
oplossing?
- Een handjevol protocollen aanpassen
- Het WWW resetten
oplossing
slechts onderdelen van een pagina ophalen of verversen
het probleem is zo oud als internetAndere (deel)benaderingen:– cache– iframes (+ javascript) niet doen!!!– cookies en sessions– .........
AJAX suggereert het gevoel van een desktop-applicatie
Asynchronous Javascript and XMLAJAX
• XHTML en CSS(presentatie)
• Document Object Model(dynamisch tonen van informatie en voor interactie;)
• XML en XSLT(voor de opslag, aanpassing en transport van gegevens) (niet per se nodig)
• XMLHttpRequest object(voor asynchrone communicatie)
• JavaScript(om alles aan elkaar te binden)
Bron: http://www.adaptivepath.com/publications/essays/archives/000385.php
in gewoon Nederlands
‘we zorgen er voor dat javascript op de achtergrond gegevens van de server haalt en stoppen die gegevens in het DOM’
dat is alles
- een opstap hoe je dat maakt
- gebaseerd op http://www.w3schools.com/ajax/ajax_example.asp
de XHTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
<head><script type="text/javascript" src="ajax.js"></script></head><body>
<form method="post" action=“index.php"><label for=" voornaam ">Voornaam: </label><input type="text" id=“voornaam"></form>
<p>Suggesties: <span id=“suggesties"></span></p>
</body></html>
javascript: eerst twee standaardfuncties
function addEvent(obj, evType, fn) { if (obj.addEventListener) { // W3C-model obj.addEventListener(evType, fn, false); return true; } else if (obj.attachEvent) { // IE obj.attachEvent('on'+evType, fn); return true; } else { return false; }}
function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } }}
en een functie voor het XMLHttp-object
function GetXmlHttpObject() { var objXMLHttp=null;try {
objXMLHttp=new ActiveXObject("Msxml2.XMLHTTP");}catch(e) {
try {objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
}catch(e) {}
}
if (objXMLHttp==null) {objXMLHttp=new XMLHttpRequest();
}return objXMLHttp;
}
ajax.php<?phpheader('Content-type: text/html; charset=utf-8');
$sQuery = "SELECT voornaam FROM personeel WHERE voornaam LIKE '%".mysql_real_escape_string ( $_GET['voornaam'] )."%'";
if(false === ($rResult = mysql_query($sQuery,$rDBConnection))) {echo 'foutmelding';
}
else {if(mysql_affected_rows() != 0) {
echo '<p id="suggesties">suggesties:</p>';echo '<select size="17" id="selectBox">';while ($aRow = mysql_fetch_assoc($rResult)) {
echo '<option value="'.$aRow['voornaam'].'">'.$aRow['voornaam'].'</option>';}echo '</select>';
}else {
echo '<div id="geen-suggestie">Geen suggestie gevonden</div>';}
}?>
en nu maken we het werkend
addLoadEvent(checkInput); // we starten checkInput
function checkInput() { // die een event koppelt
addEvent(document.getElementById(‘voornaam'), 'keyup', showHint);
}
function showHint() {var str = document.getElementById(‘voornaam').value; // pak de invoerif (str.length==0) { // terug als leeg
document.getElementById(“suggestie").innerHTML="";return
}xmlHttp=GetXmlHttpObject() // maak xmlHttpif (xmlHttp==null) { // terug als niet
alert (“Uw browser ondersteunt deze functionaliteit niet"); mogelijkreturn;
} var url = “ajax.php“ // url makenurl = url + "?q=“ + str;url = url + "&sid=“ + Math.random(); // uniek makenxmlHttp.onreadystatechange = stateChanged ; // doe functiexmlHttp.open("GET",url,true); // open objectxmlHttp.send(null); // versturen
}
function stateChanged() {
// hebben we hem terug?
if ( xmlHttp.readyState == 4 || xmlHttp.readyState == "complete" ) {
// zet de XHTML die we van ajax.php kregen in het DOM
document.getElementById(‘suggesties').innerHTML = xmlHttp.responseText ;
}
}
Noot: innerHTML is geen DOM, maar wel de snelste manier
Dus:
addLoadEvent(checkInput);function checkInput() {
addEvent(document.getElementById(‘voornaam'), 'keyup', showHint);}function showHint() {
var str = document.getElementById(‘voornaam').value;if (str.length==0) {
document.getElementById(“suggestie").innerHTML="";return
}xmlHttp=GetXmlHttpObject()if (xmlHttp==null) {alert (“Uw browser ondersteunt deze functionaliteit niet"); return;} var url = “ajax.php?q=“ + str + "&sid=“ + Math.random(); xmlHttp.onreadystatechange = stateChanged ;xmlHttp.open("GET",url,true);xmlHttp.send(null);
} function stateChanged() {
if ( xmlHttp.readyState == 4 || xmlHttp.readyState == "complete" ) { document.getElementById(‘voornaam').innerHTML = xmlHttp.responseText
;}
}
plus de standaardfuncties!!!
maar:
- voor iedere letter die ingetypt wordt wordt een query gedraaid
- Usability kan ernstig gevaar lopen bij een trage verbinding (bijv. als je submitbuttons laat verdwijnen)
Doe het altijd
unobtrusive !!!
Frameworks
•AJAX prima ‘met de hand’ te doen,
•maar Frameworks bieden een hoop comfort,
•voornamelijk vanwege de browser compatibility problemen
Prototype
•Uitbreiding van JavaScript op gebied van DOM, array’s, events en AJAX
•Te vinden op http://prototype.conio.net/
•Goede documentatie op: www.bouwkamp.com/ajax/prototype.js.html
AJAX & Prototype
•Ajax.Request(url, options)Laad de externe url
•Ajax.Updater(container, url, options)Laad de inhoud van de externe url in de container
Ajax.Request
<a href=”#” id=”ajax-example”>Klik hier</a>
<script type=”text/javascript”>
$(‘ajax-example’).onclick = function(){new Ajax.Request(‘/get’, {
parameters: “id=1”,
onComplete: function(response){alert(response.responseText);
},
});
}
</script>
Ajax.Updater
<div id=”ajax-example”><a href=”#”>Klik hier</a>
</div>
<script type=”text/javascript”>
$$(‘#ajax-example a’).each(function(element){element.onclick = function(){
new Ajax.Updater(‘ajax-example’, ‘/get’, {method: “get”,
parameters: “id=1”
});
}
});
</script>
Leuke linkjes
http://www.webaim.org/techniques/javascript/eventhandlers.php
http://www.quirksmode.org/js/introevents.html
http://www.naarvoren.nl/artikel/modern_javascript/
http://www.maxkiesler.com/index.php/weblog/comments/how_to_make_your_ajax_applications_accessible/
