Microsoft PowerPoint - AJAX_JSON_public
Click here to load reader
-
Upload
sampetruda -
Category
Documents
-
view
706 -
download
0
Transcript of Microsoft PowerPoint - AJAX_JSON_public
![Page 2: Microsoft PowerPoint - AJAX_JSON_public](https://reader037.fdocuments.co/reader037/viewer/2022100601/557ae5bfd8b42a63778b5411/html5/thumbnails/2.jpg)
2©
Agenda
Introducción
Proceso
![Page 3: Microsoft PowerPoint - AJAX_JSON_public](https://reader037.fdocuments.co/reader037/viewer/2022100601/557ae5bfd8b42a63778b5411/html5/thumbnails/3.jpg)
3©
Introducción
Objetivo
Actualizar dinámicamente una página con datos de un servidor,
sin recargar completamente la página
1. Seleccionar usuario
2. Actualizar form con datos
del usuario descargados del
servidor sin recargar la página
![Page 4: Microsoft PowerPoint - AJAX_JSON_public](https://reader037.fdocuments.co/reader037/viewer/2022100601/557ae5bfd8b42a63778b5411/html5/thumbnails/4.jpg)
4©
Introducción
JSON
� JSON (JavaScript Object Notation):
- Formato ligero de intercambio de datos.
- Texto, fácil de leer por humanos y de entender por programas.
- Menos redundante que XML.
- Convertible automáticamente a objetos JavaScript.
� http://www.json.org
![Page 5: Microsoft PowerPoint - AJAX_JSON_public](https://reader037.fdocuments.co/reader037/viewer/2022100601/557ae5bfd8b42a63778b5411/html5/thumbnails/5.jpg)
5©
Introducción
JComparación JSON - XML
XML: 32 chars datos, 96 chars tags JSON: 32 chars datos, 62 chars tags
<user>
<name>Domingo</name>
<surnames>
Piña Maza
</surnames>
<login>dpinya</login>
<password>xsslkdf45</password>
<type>1</type>
</user>
Menos redundante que XML, menos datos a enviar
user {
“name” : “Domingo”,
“surnames” : “Piña Maza”,
“login” : “dpinya”,
“password” : “xsslkdf45”,
“type” : 1
}
![Page 6: Microsoft PowerPoint - AJAX_JSON_public](https://reader037.fdocuments.co/reader037/viewer/2022100601/557ae5bfd8b42a63778b5411/html5/thumbnails/6.jpg)
6©
Introducción
AJAX
� AJAX (Asynchronous JavaScript And XML): - Tecnología para invocar una URL en un servidor y e incorporar a la página actual los datos devueltos mediante JavaScript.
- Generalmente los datos devueltos son XML (no en nuestro caso).
- Directamente mediante XmlHttpRequest, y utilizando una librería.
� Librerías AJAX:- Prototype: http://prototype.conio.net
- Dojo: http://dojotoolkit.org
- Yahoo UI: http://developer.yahoo.com/yui
- Muchas otras...
![Page 7: Microsoft PowerPoint - AJAX_JSON_public](https://reader037.fdocuments.co/reader037/viewer/2022100601/557ae5bfd8b42a63778b5411/html5/thumbnails/7.jpg)
7©
Introducción
Prototype
� Prototype:
- Librería JavaScript que proporciona:
• Funciones de utilidad para acceso a forms.
• AJAX.
• Manipulación de los nodos DOM.
• etc.
- No incorpora efectos visuales:
• Scriptaculous: http://script.aculo.us
- Pobre documentación.
� Artículos:
- http://www.sergiopereira.com/articles/prototype.js.html
![Page 8: Microsoft PowerPoint - AJAX_JSON_public](https://reader037.fdocuments.co/reader037/viewer/2022100601/557ae5bfd8b42a63778b5411/html5/thumbnails/8.jpg)
8©
Agenda
Introducción
Proceso
![Page 9: Microsoft PowerPoint - AJAX_JSON_public](https://reader037.fdocuments.co/reader037/viewer/2022100601/557ae5bfd8b42a63778b5411/html5/thumbnails/9.jpg)
9©
Proceso
Pasos en la llamada al servicio AJAX
� Proceso:
- Invocación AJAX.
- Generación string JSON.
- Generación página respuesta HTML.
- Recibir respuesta AJAX.
- Generar objeto JavaScript a partir de string JSON.
- Actualizar datos página local.
![Page 10: Microsoft PowerPoint - AJAX_JSON_public](https://reader037.fdocuments.co/reader037/viewer/2022100601/557ae5bfd8b42a63778b5411/html5/thumbnails/10.jpg)
10©
Proceso
Invocación AJAX
<select id=‘userSelect’ onChange=‘selectChanged();’>
<option value=“1”>Domingo Piña</option>
</select>
<script src=“/js/prototype-1.4.0.js” type=“text/javascript”></script>
<script>
function selectChanged() {
var userId = $F(‘userSelect’);
var url = ‘/dsp/ModifyUserCommand/ajax_user’;
var params = ‘userId=‘ + userId;
var userAjax = new Ajax.Request(url,
{ method:’get’, parameters: params, onComplete: updateForm });
}
</script>
![Page 11: Microsoft PowerPoint - AJAX_JSON_public](https://reader037.fdocuments.co/reader037/viewer/2022100601/557ae5bfd8b42a63778b5411/html5/thumbnails/11.jpg)
11©
Proceso
Generación string JSON
� http://www.json.org/java/index.html- Librería para generar Strings JSON (34 KB)
� Código para el servlet:JSONObject jsonUser = new JSONObject();
jsonUser.put(“name”,”Domingo”);
jsonUser.put(“surnames”,”Piña Maza”);
jsonUser.put(“login”,”dpinya”);
jsonUser.put(“password”,”xsslkdf45”);
jsonUser.put(“type”,1);
request.setAttribute(“user”,jsonUser);
![Page 12: Microsoft PowerPoint - AJAX_JSON_public](https://reader037.fdocuments.co/reader037/viewer/2022100601/557ae5bfd8b42a63778b5411/html5/thumbnails/12.jpg)
12©
Proceso
Generación página respuesta HTML
� La página HTML sólo contiene el string JSON de los datos
� Código JSP:
<%@page contentType=“text/plain”%>
<%
JSONObject jsonUser = request.getAttribute(“user”);
out.print(jsonUser.toString());
%>
![Page 13: Microsoft PowerPoint - AJAX_JSON_public](https://reader037.fdocuments.co/reader037/viewer/2022100601/557ae5bfd8b42a63778b5411/html5/thumbnails/13.jpg)
13©
var userAjax = new Ajax.Request(url,{ method:’get’, parameters: params, onComplete: updateForm });
Proceso
Recibir respuesta AJAX
Invocación
<script>function updateForm(userRequest) {...}</script>
Respuesta
![Page 14: Microsoft PowerPoint - AJAX_JSON_public](https://reader037.fdocuments.co/reader037/viewer/2022100601/557ae5bfd8b42a63778b5411/html5/thumbnails/14.jpg)
14©
Proceso
Generar objeto JavaScript a partir de string JSON
� Utilizar librería para parsear el string (método parseJSON)
- http://www.json.org/js.js (1.5 KB)
<script src=“/js/json.js” type=“text/javascript”></script>
<script>
function updateForm (userRequest) {
var jsonUser = userRequest.responseText;
var user = jsonUser.parseJSON();
...
}
</script>
![Page 15: Microsoft PowerPoint - AJAX_JSON_public](https://reader037.fdocuments.co/reader037/viewer/2022100601/557ae5bfd8b42a63778b5411/html5/thumbnails/15.jpg)
15©
Proceso
Actualizar datos página local
<script>
function updateForm (userRequest) {
var jsonUser = userRequest.responseText;
var user = jsonUser.parseJSON();
$(‘name’).value = user.name;
$(‘surnames’).value = user.surnames;
...
}
</script>
<input id=“name” type=“text” size=“50” />
<input id=“surnames” type=“text” size=“50” />
...
![Page 16: Microsoft PowerPoint - AJAX_JSON_public](https://reader037.fdocuments.co/reader037/viewer/2022100601/557ae5bfd8b42a63778b5411/html5/thumbnails/16.jpg)
16©
Valencia
+34 96 3467143
Oficina 107
C/ Prof. Beltrán Báguena 4,
46009 Valencia
Barcelona
Tel +34 93 5677200
Edificio Testa A
C/ Alcalde Barnils 64-68
St. Cugat del Vallès
08190 Barcelona
Madrid
+34 91 3349797
C/Pedro de Valdivia, 10
28100 Madrid
iSOCO
Para obtener más información sobre como puede
ayudar a su empresa a optimizar sus negocios digitales y aportar
una solución innovadora, contáctenos en
Domingo Piña
Software Architect
www. .com