7. ASTEA (2016/03/08): Web Orrialde Dinamikoak: JSP eta AJAX
19
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)
-
Upload
oskar-casquero -
Category
Education
-
view
641 -
download
3
Transcript of 7. ASTEA (2016/03/08): Web Orrialde Dinamikoak: JSP eta AJAX
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)
Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 2
• 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
<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
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
Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 4
• Demagun web orrialdea 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
<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
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
JSPZERBITZARIAFitxategi
bakarra
Java
exekutatu
Bezeroari (nabigatzaileari) bidaltzen zaiona
for() -aren barnean gelditzen den HTML kodea for() -a exekutatzen den
bezain beste aldiz inprimitzen da
Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática
WEB APLIKAZIO DINAMIKOA – SHAREINFOJARDUERA: JSP BAT SORTU DATUAK ESKAERAN PARTEKATUZ
6
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 fecha = new Date();
document.write("Client Date: ");
document.write(fecha);</script>
</footer>
JSP: zerbitzariak
exekutatzen du
...<footer> Server Date: Fri Mar 04 08:43:33 CET 2016
<script language="javascript"> var fecha = new Date();
document.write("Client Date: ");
document.write(fecha);</script>
</footer>Bezeroari heltzen zaiona
Zerbitzaria
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 fecha = new Date();
document.write("Client Date: ");
document.write(fecha);</script>
</footer>
JAVASCRIPT VS JAVA SERVER PAGE
8
JavaScript: bezeroak
exekutatzen du
Server Date: Fri Mar 04 08:43:33 CET 2016 Client Date: Mon Mar 07 2016 16:04:47 GMT+0100
Bezeroari heltzen zaiona
Bezeroan bistaratzen dena
Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 9
• 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
AJAXASYNCHRONOUS JAVASCRIPT AND XML
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.
Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 10
AJAXADIBIDEA: ERLOJUA – EGITURA
Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 11
AJAXADIBIDEA: ERLOJUA – FUNTZIONAMENDUA
nabigatzailea zerbitzaria
/html/ajaxJSON.html
/servlet/getTime
GET
/servlet/getTime
GET
Erabiltzaileak egindako eskuzko deia
JS-ak egindako dei automatikoak
web.xml
NTP.java
web orria
HMTL + JS
JSON
JSON
web orria
JavaScript-ak JSON datuak hartu eta HTML dokuaren DOM-a aldatzen du
c
JS
1s -ro
web orria’
JS
web orria’’
Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 12
AJAXADIBIDEA: 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” osagarraia 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
Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 13
AJAXADIBIDEA: 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>
Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 14
AJAXADIBIDEA: ERLOJUA – AJAXJSON.HTML: DOM ZUHAITZA
html
head
document
scripttitle
body
p
span span spanspanspanspantext text
texttext text text text text
Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 15
AJAXADIBIDEA: 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);}
Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 16
AJAXADIBIDEA: 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
Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 17
AJAXADIBIDEA: ERLOJUA – REQUEST.ONREADYSTATECHANGE
Table extracted from:http://www.w3schools.com/ajax/ajax_xmlhttprequest_onreadystatechange.asp
Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática
AJAXADIBIDEA: 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);
Oskar Casquero y María Luz Álvarez Dpto. Ingeniería de Sistemas y Automática 19
Datuen aurkezpenerako formatuaDatu trukea egiteko datu formatuak
DATUEN FORMATUAXML VS JSON --- HTML
<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> XML
JSON
HTML
