Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

7. ASTEA (2016/03/08): Web Orrialde Dinamikoak: JSP eta AJAX

768 views

Published on

Web Orrialde Dinamikoak: JSP eta AJAX

Published in: Education
  • Be the first to comment

  • Be the first to like this

7. ASTEA (2016/03/08): Web Orrialde Dinamikoak: JSP eta AJAX

  1. 1. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 1 Web Sistemak by Oskar Casquero & María Luz Álvarez is licensed under a Creative Commons Reconocimiento 4.0 Internacional License. WEB ORRIALDE DINAMIKOAK: JSP ETA AJAX Web Sistemak 7. ASTEA (2016/03/08)
  2. 2. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática • Printzipioz, HTML orrialdeak dokumentu estatikoak dira, hau da, – web orrialde baten eduki jakin batentzako HTML dokumentu jakin bat dago. – web orrialdearen edukia aldatu nahi bada, HTML dokumentua aldatu beharra dago. • Demagun web orrialde batean ordua inprimatu nahi dela. Printzipioz, denbora bereiztasuna bezain beste HTML behar dira. JAVA SERVER PAGE 2 <html> ... <footer> Server Date: Fri Mar 04 08:43:33 CET 2016 </footer> … </html> HTML 1 <html> ... <footer> Server Date: Fri Mar 04 08:43:34 CET 2016 </footer> … </html> HTML 2 <html> ... <footer> Server Date: Fri Mar 04 08:43:59 CET 2016 </footer> … </html> HTML N
  3. 3. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática JAVA SERVER PAGE 3 Java + HTML <%@ page language="java" …%> <%@ page import="java.util.*"%> <html> ... <footer> Server Date: <%= new Date().toString() %> </footer> … </html> <html> ... <footer> Server Date: Fri Mar 04 08:43:33 CET 2016 </footer> </html> HTML instantzia JSP ZERBITZARIAFitxategi bakarra Java exekutatu Bezeroari (nabigatzaileari) bidaltzen zaiona
  4. 4. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática • Demagun web orrialde batean datu base baten edukiak inprimatu nahi direla t=2, t=4 eta t=6 aldiuneetan. – t=1 aldiunean datu baseak erregistro bat dauka. – t=3 aldiunean datu basean beste erregistro bat gordetzen da. – t=5 aldiunean datu basean beste erregistro bat gordetzen da. • Printzipioz, aldiune bakoitzean datu baseak dituen datu erregistro bezain beste lerro dituzten HTML taulak behar dira. JAVA SERVER PAGE 4 <html> ... <table> <tr><td>Oskar</td></tr> </table> … </html> HTML t=2 <html> ... <table> <tr><td>Oskar</td></tr> <tr><td>Mariluz</td></tr> </table> … </html> HTML t=4 <html> ... <table> <tr><td>Oskar</td></tr> <tr><td>Mariluz</td></tr> <tr><td>Galder</td></tr> </table> … </html> HTML t=6
  5. 5. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática JAVA SERVER PAGE 5 Java + HTML <%@ page language="java" …%> <%@ page import="java.util.*"%> <% ArrayList<Str> userList = (ArrayList) request.getAttribute(“userList"); %> <html> ... <table> <% for(int i = 0; i < userList.size(); i++) { Str username = userList.get(i); %> <tr><td><%= username %></td></tr> <% } %> </table> … </html> <html> ... <table> <tr><td>Oskar</td></tr> <tr><td>Mariluz</td></tr> <tr><td>Galder</td></tr> </table> … </html> HTML instantzia JSP ZERBITZARIAFitxategi bakarra Java exekutatu Bezeroari (nabigatzaileari) bidaltzen zaiona for() -aren barnean gelditzen den HTML kodea for() -a exekutatzen den bezain beste aldiz inprimitzen da
  6. 6. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática WEB APLIKAZIO DINAMIKOA – SHAREINFO JARDUERA: JSP BAT SORTU DATUAK ESKAERAN PARTEKATUZ 6
  7. 7. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática JAVASCRIPT VS JAVA SERVER PAGE 7 <%@ page import="java.util.*"%> ... <footer> Server Date: <%= new Date().toString() %> <script language="javascript"> var data = new Date(); document.write("Client Date: "); document.write(data); </script> </footer> JSP: zerbitzariak exekutatzen du ... <footer> Server Date: Fri Mar 04 08:43:33 CET 2016 <script language="javascript"> var data = new Date(); document.write("Client Date: "); document.write(data); </script> </footer> Bezeroari heltzen zaiona Zerbitzaria
  8. 8. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática ... <footer> Server Date: Fri Mar 04 08:43:33 CET 2016 <script language="javascript"> var data = new Date(); document.write("Client Date: "); document.write(data); </script> </footer> JAVASCRIPT VS JAVA SERVER PAGE 8 JavaScript: bezeroak exekutatzen du Server Date: Fri Mar 04 08:43:33 CET 2016 Client Date: Fri Mar 04 08:43:33 GMT+0100 Bezeroari heltzen zaiona Bezeroan bistaratzen dena
  9. 9. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática • Bezeroaren aldeko aplikazio interaktiboak sortzeko balio du – Interneteko Aplikazio Aberastuak (RIA -Rich Internet Applications-) sortzeko oinarrietako bat da. Baliabideak: • Desarrollo de Aplicaciones Web Enriquecidas ikasgaia • HTML5 aurreratua MOOC-a • AJAX-ek bezeroan exekutatzen den zerbitzariarekiko komunikazio asinkronoari erreferentzia egiten dio. Horrela, web orriak aldatu edo eguneratu daitezke horiek birkargatu gabe. – OHARRA: aldaketa edo eguneratze hori bezeroaren memorian emoten da. • JavaScript-en oinarriturik dago. Komunikazio asinkronoa ahalbideratzen duen objetua XMLHttpRequest motakoa da. • Adibidea: erlojua: https://www.dropbox.com/s/k2o5lybqiqz9lhw/ntp.war?dl=0 AJAX ASYNCHRONOUS JAVASCRIPT AND XML 9 OHARRA: adibidean AJAX kodea era gordinean programatuko da, goi-mailako liburutegirik erabili gabe. Hala ere, badira AJAX programazioa errazten duten JavaScript liburutegiak, horietatik ezagunena jQuery delarik. jQuery-k gertaerak, HTML dokumentuaren DOM-a eta AJAX erabiltzea errazten du, besteak beste.
  10. 10. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 10 AJAX ADIBIDEA: ERLOJUA – EGITURA
  11. 11. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 11 AJAX ADIBIDEA: ERLOJUA – FUNTZIONAMENDUA nabigatzailea zerbitzaria /html/ajaxJSON.html /servlet/getTime /servlet/getTime Erabiltzaileak egindako eskuzko deia JS-ak egindako dei automatikoak web.xml NTP.java web orria JavaScript-ak JSON datuak hartu eta HTML dokuaren DOM-a aldatzen du c JS web orria’ JS web orria’’
  12. 12. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 12 AJAX ADIBIDEA: ERLOJUA – FUNTZIONAMENDUA • “JavaScript-ak JSON datuak hartu eta HTML dokumentuaren DOM-a aldatzen du”  Beraz, deskargatzen dugun web orriak eta nabigatzailean bistaratzen denak ez dute kode berdina. • Ariketa: – Firefox-en “View Source Chart” osagarria instalatu – Adibidearen web orri nagusia bistaratu http://localhost:8080/ntp/html/ajaxJSON.html – Web orrian eskumako botoia sakatu eta • “View Page Source” aukeratu • “View Source Chart” aukeratu emaitzak alderatu
  13. 13. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 13 AJAX ADIBIDEA: ERLOJUA – AJAXJSON.HTML <html> <head> <title>AJAX example</title> <script type="text/javascript"> function GetTimeIO() {} </script> </head> <body onload="GetTimeIO()"> <p> day is <span class="day">0</span><br/> month is <span class="month">0</span><br/> year is <span class="year">0</span><br/> hour is <span class="hour">0</span><br/> minute is <span class="minute">0</span><br/> second is <span class="second">0</span><br/> </p> </body> </html>
  14. 14. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 14 AJAX ADIBIDEA: ERLOJUA – AJAXJSON.HTML: DOM ZUHAITZA html head document scripttitle body p span span spanspanspanspantext text texttext text text text text
  15. 15. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 15 AJAX ADIBIDEA: ERLOJUA – FUNCTION GETTIMEIO() function GetTimeIO() { nocache = "nocache=" + Math.random() * 1000000; var request = new XMLHttpRequest(); request.onreadystatechange = function() { if (request.readyState == 4) { if (request.status == 200) { if (request.responseText != null) { var jsonObj = JSON.parse(request.responseText); document.getElementsByClassName("day")[0].innerHTML = jsonObj.day; document.getElementsByClassName("month")[0].innerHTML = jsonObj.month; document.getElementsByClassName("year")[0].innerHTML = jsonObj.year; document.getElementsByClassName("hour")[0].innerHTML = jsonObj.hour; document.getElementsByClassName("minute")[0].innerHTML = jsonObj.minute; document.getElementsByClassName("second")[0].innerHTML = jsonObj.second; } } } }; request.open("POST", "/ntp/servlet/getTime?" + nocache, true); request.send(null); setTimeout("GetTimeIO()", 1000); }
  16. 16. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 16 AJAX ADIBIDEA: ERLOJUA – AJAXJSON.HTML: DOM ZUHAITZA html head document scripttitle body p span span spanspanspanspantext text texttext text text text text document.getElementsByClassName("day")[0].innerHTML
  17. 17. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 17 AJAX ADIBIDEA: ERLOJUA – REQUEST.ONREADYSTATECHANGE Table extracted from: http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp
  18. 18. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática AJAX ADIBIDEA: ERLOJUA – SERVLET 18 public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException { Calendar cal = Calendar.getInstance(); response.setContentType("application/json"); PrintWriter out = response.getWriter(); HashMap<String, Object> hashMap = new HashMap<String, Object>(); hashMap.put("day",cal.get(Calendar.DAY_OF_MONTH)); hashMap.put("month",cal.get(Calendar.MONTH)); hashMap.put("year",cal.get(Calendar.YEAR)); hashMap.put("hour",cal.get(Calendar.HOUR_OF_DAY)); hashMap.put("minute",cal.get(Calendar.MINUTE)); hashMap.put("second",cal.get(Calendar.SECOND)); Gson gson = new Gson(); String json = gson.toJson(hashMap); out.println(json); out.flush(); out.close(); // Log System.out.println("JSON ntp servlet has been hit"); System.out.println(json);
  19. 19. Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática Datuen aurkezpenerako formatuaDatu trukea egiteko datu formatuak DATUEN FORMATUA XML VS JSON --- HTML 19 <html> <head> <title>AJAX example</title> </head> <body onload="GetTimeIO()"> <p> day is <span class="day">6</span><br/> month is <span class="month">2</span><br/> year is <span class="year">2016</span><br/> hour is <span class="hour">19</span><br/> minute is <span class="minute">24</span><br/> second is <span class="second">14</span><br/> </p> </body> </html> {"month": 2, "hour": 19, "year": 2016, "day": 6, "minute": 24, "second": 14} <?xml version="1.0"?> <time> <day>6</day> <month>2</month> <year>2016</year> <hour>19</hour> <minute>23</minute> <second>7</second> </time>

×