Ajax

797 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
797
On SlideShare
0
From Embeds
0
Number of Embeds
58
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ajax

  1. 1. Ajax med Java Erik Dybner X 
  2. 2. Vad är Ajax? <ul><li>” Ajax, Ajax och Ajax. Det blir de hetaste teknikområdena på webben 2007. ” –Computer Sweden 2006-12-05 </li></ul>
  3. 3. Vad är Ajax? <ul><li>Asynchronous JavaScript + XML </li></ul><ul><li>The artist formerly known as DHTML (and Remote Scripting) </li></ul><ul><li>Gamla tekniker, delvis nya knep </li></ul><ul><li>Möjliggör webbapplikationer med dynamiska användargränssnitt </li></ul>
  4. 4. Exempel på Ajax-applikationer <ul><li>Outlook Web Access </li></ul><ul><li>Google Maps </li></ul><ul><li>Netvibes </li></ul>
  5. 5. Klassisk webapplikation Server Webbrowser Session HTML HTML HTML Login Datamodell Affärslogik Logout
  6. 6. Ajax-applikation Server Webbrowser Session Login Data- modell Affärslogik Klient- applikation Partiell- datamodell HTML Logout
  7. 7. Hur? <ul><li>Webbservern levererar data, t.ex. XML, inte HTML </li></ul><ul><li>Klienten använder JavaScript för att kommunicera med servern och bygga upp sin datamodell </li></ul><ul><li>Klienten uppdaterar sitt gränssnitt dynamiskt mha CSS och DOM-script </li></ul>
  8. 8. XMLHttpRequest <ul><li>ActiveX- kontroll skrevs av Microsoft för Outlook Web Access 2000 </li></ul><ul><li>Stöds nu i IE, Firefox, Netscape, Opera, Safari </li></ul><ul><li>”Browser i browsern” styrs via JavaScript </li></ul><ul><li>Hämtar textbaserad data, inte nödvändigtvis XML </li></ul>
  9. 9. XMLHttpRequest <ul><li>//Skapa objektet (OBS endast icke-MS i exemplet) xmlHttp = new XMLHttpRequest(); </li></ul><ul><li>//Öppna koppling xmlHttp.open(&quot;GET&quot;, url, true); </li></ul><ul><li>//Ange callback-funktion xmlHttp.onreadystatechange = updatePage; </li></ul><ul><li>//Skicka request xmlHttp.send(null); </li></ul>
  10. 10. XMLHttpRequest <ul><li>//Hantera svaret function updatePage() { if (xmlHttp.readyState == 4) { if(xmlHttp.status == 200){ </li></ul><ul><li>var response = xmlHttp.responseText; </li></ul><ul><li>//response innehåller nu svaret från servern… </li></ul><ul><li>} </li></ul><ul><li>} } </li></ul>
  11. 11. autocomplete <ul><li>Litet exempel, Ajax utan XML eller ramverk </li></ul>
  12. 12. Serialisering <ul><li>Hur skicka objekt från server till klient? </li></ul><ul><li>Text </li></ul><ul><li>XML </li></ul><ul><li>JSON </li></ul>Klient Server <item id=1><name>b..
  13. 13. Serialisering - Text <ul><li>+ Bra för enkla värden </li></ul><ul><li>+ Liten overhead för klienten </li></ul><ul><li>- Inte bra för kompletta objekt </li></ul>
  14. 14. Serialisering - XML <ul><li>+ Bra server-side stöd för XML </li></ul><ul><li>+ Bra för att definiera kontrakt klient-server </li></ul><ul><li>+ Bra stöd för XML i browsern </li></ul><ul><li>+ Öppnar för icke-Ajax klienter (SOA) </li></ul><ul><li>- Overhead för klienten </li></ul><ul><li>- Klumpigt DOM-api </li></ul>
  15. 15. Serialisering - XML <ul><li>Stöd för XML i XMLHttpRequest //responseXML istället för responseText </li></ul><ul><li>orderHistoryDoc = objXmlHttpRequest.responseXML; </li></ul><ul><li>orders=orderHistoryDoc.getElementsByTagName(&quot;order&quot;); </li></ul><ul><li>lastOrder = orders[orders.length - 1]; </li></ul><ul><li>firstItem = lastOrder.getElementsByTagName(&quot;item&quot;)[0]; </li></ul><ul><li>itemNameElement = firstItem.firstChild; </li></ul><ul><li>itemNameText = itemNameElement.firstChild.data; </li></ul>
  16. 16. Serialisering - XML <ul><li>Litet exempel, Ajax med XML </li></ul>
  17. 17. Serialisering - JSON <ul><li>JavaScript Object Notation </li></ul><ul><li>Statiskt definierade objekt-grafer </li></ul><ul><li>var band = { name: &quot;The Beatles&quot;, members: [ { name: &quot;John&quot;, instruments: [&quot;Vocals&quot;,&quot;Guitar&quot;,&quot;Piano&quot;] }, { name: &quot;Paul&quot;, instruments: [&quot;Vocals&quot;,&quot;Bass&quot;,&quot;Piano&quot;,&quot;Guitar&quot;] }, { name: &quot;George&quot;, instruments: [&quot;Guitar&quot;,&quot;Vocals&quot;] }, { name: &quot;Ringo&quot;, instruments: [&quot;Drums&quot;,&quot;Vocals&quot;] } ] }; var musician = band.members[3]; alert( musician.name + &quot; played &quot; + musician.instruments[0] + &quot; with &quot; + band.name ); </li></ul>
  18. 18. Serialisering - JSON <ul><li>”Instant Coffee” för JavaScript </li></ul><ul><li>var jsonExpression = &quot;(&quot; + req.responseText + &quot;)&quot;; </li></ul><ul><li>var customer = eval(jsonExpression); </li></ul><ul><li>var lastOrder = customer.orders[customer.orders.length-1]; </li></ul><ul><li>var name = lastOrder.items[0].name; </li></ul><ul><li>prisjakt.nu </li></ul>
  19. 19. Serialisering - JSON <ul><li>+ låg overhead för klienten </li></ul><ul><li>+ inget bök med parsning </li></ul><ul><li>- JavaScript-specifikt </li></ul>
  20. 20. Ajax Ramverk för Java <ul><li>DWR </li></ul>JSON-RPC-Java Echo 2 Google Web Toolkit ThinWire WebWork 2.2 Dojo
  21. 21. DWR – Direct Web Remoting <ul><li>Exponerar server-side objekt direkt i JavaScript </li></ul><ul><li>Skriv dina Java-klasser på servern </li></ul><ul><li>Editera dwr.xml för att ge tillgång till din klass </li></ul><ul><li>Inkludera DWR .js filerna i din HTML </li></ul><ul><li>Anropa server-objekten från browsern! </li></ul>
  22. 22. DWR – Direct Web Remoting <ul><li>+ Elegant ramverk </li></ul><ul><li>+ Snabbjobbat </li></ul><ul><li>- Potentiell säkerhetsrisk </li></ul><ul><li>- Man måste fortfarande behärska JavaScript </li></ul>
  23. 23. DWR – Direct Web Remoting <ul><li>Exempel DBPager </li></ul>
  24. 24. Säkerhetsrisker <ul><li>Ajax skiljer sig inte säkerhetsmässigt från vanliga webbapplikationer </li></ul><ul><li>Men… </li></ul><ul><li>Större ”attack-yta” i och med högre komplexitet </li></ul><ul><li>Kom ihåg, fortfarande duger inte client-side säkerhetskontroller och valideringar </li></ul>
  25. 25. Tänk på <ul><li>Presentera ”progress-bar” så att användaren får feedback vid långsam anslutning </li></ul><ul><li>Se upp för back-knappen samt bookmarks </li></ul><ul><li>Se upp för minnesläckor </li></ul>
  26. 26. Tänk på <ul><li>” This is real coding and requires discipline ” (Dave Crane Ajax IN ACTION) </li></ul>
  27. 27. Alternativ till Ajax <ul><li>Flash </li></ul><ul><li>Java Applets </li></ul><ul><li>Java Web Start </li></ul><ul><li>.NET No-touch Deployment </li></ul><ul><li>ActiveX </li></ul>
  28. 28. Läs mer <ul><li>IBM DeveloperWorks Web development http ://www-128.ibm.com/developerworks/web </li></ul><ul><li>Ajax IN ACTION (ISBN: 1932394613) http://www.manning.com/crane </li></ul><ul><li>DWR Framework http ://getahead.ltd.uk/dwr </li></ul>

×