Quickstart AJAX... achieving your goals with AJAX

Gastcollege ‘The next web’

Wie ben ik? Frank Leegstra frank@mediact.nl 06 42 141 263 Hogere Informatica (hier) Bedrijfskunde (ergens anders)

mediaCT webinterieur Flink aan het groeien (12 man in Groningen) Website vormgeving, online marketing en

internet techniek Groningen, Amsterdam en Dokkum

Wie is mediaCT webinterieur Elk jaar een stagiair van CMD / Informatica

NHL Jasper Zeinstra (werkt nu fulltime) Egbert Veenstra Meint Span

Onderwerpen Vorige keer

Alles over API’s Vandaag

Quickstart AJAX 14 november

Case van een ‘succesvolle’ web 2.0 website Marketing Wat maakt ‘succes’?

Jullie hebben kennis van... JavaScript

Inhoud Wat is AJAX? Hoe werkt het? Toolkits Aan de slag Voorbeelden

Wat is AJAX

Quickstart AJAX

AJAX volgens wikiPedia

AJAX (Asynchronous Javascript And XML) is een term voor het ontwerp van interactieve webpagina's waarin asynchroon gevraagde gegevens worden opgehaald van de webserver. Daardoor hoeven dergelijke pagina's niet in hun geheel ververst te worden. Zo'n pagina is te vergelijken met een applicatie die in de browser draait. De term is op 18 februari 2005 door Jesse James Garrett gelanceerd en werd door grote spelers als Google en Amazon geadopteerd.

Door gebruik te maken van XMLHttpRequest, hoeft de webpagina niet opnieuw ververst te worden om nieuwe inhoud te krijgen. Google Suggest stelt bijvoorbeeld bij elke toetsaanslag een nieuwe reeks zoektermen voor zonder dat je pagina één keer hoeft te herladen.

Wat is AJAX? Asynchronous Javascript And XML XMLHttpRequest

Hoe werkt het?

Quickstart AJAX

Hoe werkt het?

AJAX, Cross-domain policy

Voorbeeld met Yahoo!

AJAX, Cross-domain policy

Proxy nodig?Kijk op http://developer.yahoo.com/javascript/howto-proxy.html

Toolkits

Quickstart AJAX

Toolkits Google Web Toolkit (GWT) jQuery Prototype (en scriptaculous) HTML_AJAX (PEAR) Xajax

Google Web Toolkit (GWT) Programmeren in JAVA Compilen van JAVA naar JS Debugmogelijkheden!

jQuery (1) Programmeren in Javascript Do more, write less Cross browser compatible http://www-128.ibm.com/developerworks/

library/x-ajaxjquery.html http://www.jquery.com http://docs.jquery.com/Ajax

jQuery (2)

jQuery (3)

HTML_AJAX (PEAR) Programmeren in PHP! Cross browser compatible http://htmlajax.org/ (beta)

HTML_AJAX (2)

Aan de slag

Quickstart AJAX

Aan de slag http://www.cursusajax.nl/examples/ Gebruik codevoorbeelden uit examples Zie ook www.jquery.com

Examples Basic AJAX (zie ook /include/ajax_basic.js) jQuery AJAX Last.fm: find related artists

Aan jullie: Flickr photos van een user Finetuning related artists Etc...

API: Last.fm

http://www.audioscrobbler.net/data/webservices/

API: Facebook

http://developers.facebook.com/documentation.php

API: Flickr

http://flickr.com/services/api/

Last.fm: find related artists

Voorbeelden

Quickstart AJAX

Voorbeeld: http://demo.backbase.com/RSS

Voorbeelden http://demo.backbase.com:8180/

dukeBookStore/mainpanel.jsf http://demo.backbase.com/RUI/shop.html