microsoft powerpoint - ajax_json_public
TRANSCRIPT
2©
Agenda
Introducción
Proceso
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
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
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
}
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...
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
8©
Agenda
Introducción
Proceso
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.
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>
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);
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());
%>
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
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>
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” />
...
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