AJAX

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?
4
Het verschil onderhuids
5
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 vennootschapsbelasti
ng. 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
• PDAs, smartphones, e.d.
• Gebruikers met een functiebeperking

7

• Toegankelijkheid
• Toegankelijkheid
• En Toegankelijkheid
• Iedereen en alles TOEGANG!!!

8

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

9
(No Transcript)
10
Voordelen

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

11
Goedkoper?

• Bouwkosten zijn ongeveer gelijk
• Exploitatie is goedkoper
• Bandbreedte
• Performance bij piekbelasting
• Beheer
• Overdraagbaarheid
• Migratie

12
Styling

• Externe stylesheets
• Apparaat-afhankelijk

13
Strategiën

• Gracefull degradation
• Progressive enhancement

14
Gracefull degradation

• lta hrefhttp//www.phpfreakz.nl/pagina10
• onclickopenSubmenu() return falsegt
• submenult/agt
• (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

• lta hrefhttp//www.phpfreakz.nl/pagina10
• idsubmenu gtsubmenult/agt

17
http//www.en.wikipedia.org/wiki/Progressive_Enhan
cementility

• 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 extras

19

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

20

• lta hrefhttp//www.phpfreakz.nl/pagina10
• idsubmenu gtsubmenult/agt
• maar dat submenu dan?
• extern javascript
• waarvoor het id het aanhaakpunt vormt

21
de xhtml

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
  1-strict.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"
  lang"nl" xmllang"nl"gt
• ltheadgt
• ltscript typetext/javascript src/script.jsgtlt/
  scriptgt
• lt/headgt
• ltbodygt
• ltpgt
• lta hrefhttp//www.phpfreakz.nl/pagina10
  idsubmenu gtsubmenult/agt
• lt/pgt
• lt/bodygt
• lt/htmlgt

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

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

31

• Bron http//www.adaptivepath.com/publications/ess
  ays/archives/000385.php

32
(No Transcript)
33
(No Transcript)
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_ex
  ample.asp

36
de XHTML

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
  1-strict.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml"
  lang"nl" xmllang"nl"gt
• ltheadgt
• ltscript type"text/javascript" src"ajax.js"gtlt/scr
  iptgt
• lt/headgt
• ltbodygt
• ltform method"post" actionindex.php"gt
• ltlabel for" voornaam "gtVoornaam lt/labelgt
• ltinput type"text" idvoornaam"gt
• lt/formgt
• ltpgtSuggesties ltspan idsuggesties"gtlt/spangtlt/pgt
• lt/bodygt
• lt/htmlgt

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

38
en een functie voor het XMLHttp-object

• function GetXmlHttpObject()
• var objXMLHttpnull
• try
• objXMLHttpnew ActiveXObject("Msxml2.XMLHTTP")
• catch(e)
• try
• objXMLHttpnew ActiveXObject("Microsoft.XMLHTTP
  ")
• catch(e)
• if (objXMLHttpnull)
• objXMLHttpnew XMLHttpRequest()
• return objXMLHttp

39
ajax.php

• lt?php
• header('Content-type text/html charsetutf-8')
• sQuery "SELECT voornaam FROM personeel WHERE
  voornaam LIKE '".mysql_real_escape_string (
  _GET'voornaam' )."'"
• if(false (rResult mysql_query(sQuery,rDBC
  onnection)))
• echo 'foutmelding'
• else
• if(mysql_affected_rows() ! 0)
• echo 'ltp id"suggesties"gtsuggestieslt/pgt'
• echo 'ltselect size"17" id"selectBox"gt'
• while (aRow mysql_fetch_assoc(rResult))
• echo 'ltoption value"'.aRow'voornaam'.'"gt'.
  aRow'voornaam'.'lt/optiongt'
• echo 'lt/selectgt'
• else

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').val
  ue // pak de invoer
• if (str.length0) // terug als leeg
• document.getElementById(suggestie").innerHTML"
  "
• return
• xmlHttpGetXmlHttpObject() // maak xmlHttp
• if (xmlHttpnull) // 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').val
  ue
• if (str.length0)
• document.getElementById(suggestie").innerHTML"
  "
• return
• xmlHttpGetXmlHttpObject()
• if (xmlHttpnull) 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" )

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,
  arrays, events en AJAX
• Te vinden op http//prototype.conio.net/
• Goede documentatie op www.bouwkamp.com/ajax/proto
  type.js.html

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

• lta href idajax-examplegtKlik hierlt/agt
• ltscript typetext/javascriptgt
• (ajax-example).onclick function()
• new Ajax.Request(/get,
• parameters id1,
• onComplete function(response)
• alert(response.responseText)
• ,
• )
• lt/scriptgt

50
Ajax.Updater

• ltdiv idajax-examplegt
• lta hrefgtKlik hierlt/agt
• lt/divgt
• ltscript typetext/javascriptgt
• (ajax-example a).each(function(element)
• element.onclick function()
• new Ajax.Updater(ajax-example, /get,
• method get,
• parameters id1
• )
• )
• lt/scriptgt

51
Leuke linkjes

• http//www.webaim.org/techniques/javascript/event
  handlers.php
• http//www.quirksmode.org/js/introevents.html
• http//www.naarvoren.nl/artikel/modern_javascript
  /
• http//www.maxkiesler.com/index.php/weblog/commen
  ts/how_to_make_your_ajax_applications_accessible/