AJAX een korte introductie Koen Willems & Edwin Vlieg PHPFreakz, 18-11-2006.

Presentatie over: "AJAX een korte introductie Koen Willems & Edwin Vlieg PHPFreakz, 18-11-2006."— Transcript van de presentatie:

1 AJAX een korte introductie Koen Willems & Edwin Vlieg PHPFreakz, 18-11-2006

2 We werken conform webstandaarden!!! zie bijv. http://webrichtlijnen.overheid.nl

3 Een verschil? Bush MB 60 (1957) oud Bush TR 82 (1959) nieuw

4 oud: buizenradio Bush MB 60 (1957) nieuw: transistorradio Bush TR 82 (1959) Het verschil: onderhuids

5 Makkelijk kunnen we het niet maken? Bron: www.overheid.nl/opwww.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.” […]

6 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

7 Toegankelijkheid En Toegankelijkheid Iedereen en alles TOEGANG!!!

8 Strikte scheiding tussen Inhoud (XHTML) Vorm (CSS) Gedrag (bijv. javascript)

9

10 Voordelen Van een website van de nieuwe generatie...en van een transistorradio: Relatieve eenvoud van het ontwerp Lichter Sneller Goedkoper

11 Bouwkosten zijn ongeveer gelijk Exploitatie is goedkoper –Bandbreedte –Performance bij piekbelasting –Beheer –Overdraagbaarheid –Migratie Goedkoper?

12 Styling Externe stylesheets Apparaat-afhankelijk

13 Strategiën -Gracefull degradation -Progressive enhancement

14 Gracefull degradation <a href=”http://www.phpfreakz.nl/pagina10” onclick=“openSubmenu(); return false;”> submenu (voorbeeld van een uitklapmenu)

15 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

16 Progressive enhancement <a href=“http://www.phpfreakz.nl/pagina10” id=“submenu” >submenu</a>

17 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

18 Dus: -Iedereen dezelfde functionaliteit -Waar mogelijk iets extra’s

19 GD:toegankelijkheid verbeteren zonder veel gebruiksvriendelijkheid in te leveren PE:niveau van gebruiksvriendelijheid verhogen zonder toegankelijkheid in te leveren

20 <a href=“http://www.phpfreakz.nl/pagina10”http://www.phpfreakz.nl/pagina10 id=“submenu” >submenu maar dat submenu dan?  extern javascript  waarvoor het id het aanhaakpunt vormt

21 de xhtml submenu http://www.phpfreakz.nl/pagina10

22 script.js window.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 }

23 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);

24 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)

25 Device independent events onfocus onblur onselect onchange onclick (bij een link of een formulier

26 Device dependent events onmouseover onmouseout ondblclick onkeydown onkeyup Etc.

27 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

28 oplossing? -Een handjevol protocollen aanpassen -Het WWW resetten

29 oplossing slechts onderdelen van een pagina ophalen of verversen het probleem is zo oud als internet Andere (deel)benaderingen: –cache –iframes (+ javascript) niet doen!!! –cookies en sessions –......... AJAX suggereert het gevoel van een desktop-applicatie

30 Asynchronous Javascript and XML AJAX 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)

31 Bron: http://www.adaptivepath.com/publications/essays/archives/000385.php

32

33

34 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

35 -een opstap hoe je dat maakt -gebaseerd op http://www.w3schools.com/ajax/ajax_example.asp

36 de XHTML Voornaam: Suggesties:

37 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(); } } }

38 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; }

39 ajax.php <?php header('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 ' suggesties: '; echo ' '; while ($aRow = mysql_fetch_assoc($rResult)) { echo ' '.$aRow['voornaam'].' '; } echo ' '; } else { echo ' Geen suggestie gevonden '; } } ?>

40 en nu maken we het werkend addLoadEvent(checkInput);// we starten checkInput function checkInput() {// die een event koppelt addEvent(document.getElementById(‘voornaam'), 'keyup', showHint); }

41 function showHint() { var str = document.getElementById(‘voornaam').value;// pak de invoer if (str.length==0) { // terug als leeg document.getElementById(“suggestie").innerHTML=""; return } xmlHttp=GetXmlHttpObject()// maak xmlHttp if (xmlHttp==null) {// terug als niet alert (“Uw browser ondersteunt deze functionaliteit niet"); mogelijk return; } var url = “ajax.php“// url maken url = url + "?q=“ + str; url = url + "&sid=“ + Math.random(); // uniek maken xmlHttp.onreadystatechange = stateChanged ;// doe functie xmlHttp.open("GET",url,true);// open object xmlHttp.send(null);// versturen }

42 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

43 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!!!

44 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)

45 Doe het altijd unobtrusive !!!

46 Frameworks AJAX prima ‘met de hand’ te doen, maar Frameworks bieden een hoop comfort, voornamelijk vanwege de browser compatibility problemen

47 Prototype Uitbreiding van JavaScript op gebied van DOM, array’s, events en AJAX Te vinden op http://prototype.conio.net/http://prototype.conio.net Goede documentatie op: www.bouwkamp.com/ajax/prototype.js.ht ml www.bouwkamp.com/ajax/prototype.js.ht ml

48 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

49 Ajax.Request Klik hier $(‘ajax-example’).onclick = function(){ new Ajax.Request(‘/get’, { parameters: “id=1”, onComplete: function(response){ alert(response.responseText); }, }); }

50 Ajax.Updater Klik hier $$(‘#ajax-example a’).each(function(element){ element.onclick = function(){ new Ajax.Updater(‘ajax-example’, ‘/get’, { method: “get”, parameters: “id=1” }); } });

51 Leuke linkjes http://www.webaim.org/techniques/javascript/eve nthandlers.php http://www.quirksmode.org/js/introevents.html http://www.naarvoren.nl/artikel/modern_javascri pt/ http://www.maxkiesler.com/index.php/weblog/co mments/how_to_make_your_ajax_applications_ accessible/