Your SlideShare is downloading. ×
0
Microsoft PowerPoint - AJAX_JSON_public
Microsoft PowerPoint - AJAX_JSON_public
Microsoft PowerPoint - AJAX_JSON_public
Microsoft PowerPoint - AJAX_JSON_public
Microsoft PowerPoint - AJAX_JSON_public
Microsoft PowerPoint - AJAX_JSON_public
Microsoft PowerPoint - AJAX_JSON_public
Microsoft PowerPoint - AJAX_JSON_public
Microsoft PowerPoint - AJAX_JSON_public
Microsoft PowerPoint - AJAX_JSON_public
Microsoft PowerPoint - AJAX_JSON_public
Microsoft PowerPoint - AJAX_JSON_public
Microsoft PowerPoint - AJAX_JSON_public
Microsoft PowerPoint - AJAX_JSON_public
Microsoft PowerPoint - AJAX_JSON_public
Microsoft PowerPoint - AJAX_JSON_public
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Microsoft PowerPoint - AJAX_JSON_public

702

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
702
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. iSOCO iSOCOVal AJAX + JSON 8 / Noviembre / 2006 Autor: Domingo Piña, dpinya@isoco.com ©
  • 2. Agenda Introducción Proceso © 2
  • 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 © 3
  • 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 © 4
  • 5. Introducción JComparación JSON - XML Menos redundante que XML, menos datos a enviar XML: 32 chars datos, 96 chars tags JSON: 32 chars datos, 62 chars tags <user> user { <name>Domingo</name> “name” : “Domingo”, <surnames> “surnames” : “Piña Maza”, Piña Maza “login” : “dpinya”, </surnames> “password” : “xsslkdf45”, <login>dpinya</login> “type” : 1 <password>xsslkdf45</password> } <type>1</type> </user> © 5
  • 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... © 6
  • 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 © 7
  • 8. Agenda Introducción Proceso © 8
  • 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. © 9
  • 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> © 10
  • 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); © 11
  • 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()); %> © 12
  • 13. Proceso Recibir respuesta AJAX var userAjax = new Ajax.Request(url, Invocación { method:’get’, parameters: params, onComplete: updateForm }); <script> function updateForm(userRequest) { Respuesta ... } </script> © 13
  • 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> © 14
  • 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” /> ... © 15
  • 16. Domingo Piña Software Architect dpinya@isoco.com 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 www. .com Barcelona Madrid Valencia Tel +34 93 5677200 +34 91 3349797 +34 96 3467143 Edificio Testa A C/Pedro de Valdivia, 10 Oficina 107 C/ Alcalde Barnils 64-68 28100 Madrid C/ Prof. Beltrán Báguena 4, St. Cugat del Vallès 46009 Valencia 08190 Barcelona © 16

×