1  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy IMPLEMENTACION DE APLICACIONES INTERNET.

Presentación del tema: "1  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy IMPLEMENTACION DE APLICACIONES INTERNET."— Transcripción de la presentación:

1 1  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy IMPLEMENTACION DE APLICACIONES INTERNET I Unidad 2: Desarrollo de aplicaciones PHP con JSON y AJAX

2 2  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy ¿Qué es JSON? JSON (JavaScript Object Notation - Notación de Objetos de JavaScript) es un formato ligero de intercambio de datos. Leerlo y escribirlo es simple para humanos, mientras que para las máquinas es simple interpretarlo y generarlo. Está basado en un subconjunto del Lenguaje de Programación JavaScript, Standard ECMA-262 3rd Edition - Diciembre 1999.Lenguaje de Programación JavaScriptStandard ECMA-262 3rd Edition - Diciembre 1999 JSON es un formato de texto que es completamente independiente del lenguaje pero utiliza convenciones que son ampliamente conocidos por los programadores de la familia de lenguajes C, incluyendo C, C++, C#, Java, JavaScript, Perl, Python, y muchos otros. Estas propiedades hacen que JSON sea un lenguaje ideal para el intercambio de datos.

3 3  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Estructura de JSON JSON está constituido por dos estructuras: Una colección de pares de nombre/valor. –En varios lenguajes esto es conocido como un objeto, registro, estructura, diccionario, tabla hash, lista de claves o un arreglo asociativo. Una lista ordenada de valores. –En la mayoría de los lenguajes, esto se implementa como arreglos, vectores, listas o secuencias. Estas son estructuras universales; virtualmente todos los lenguajes de programación las soportan de una forma u otra. Es razonable que un formato de intercambio de datos que es independiente del lenguaje de programación se base en estas estructuras.

4 4  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Estructuras en JSON En JSON, se presentan de estas formas: Un objeto es un conjunto desordenado de pares nombre/valor. Un objeto comienza con { (llave de apertura) y termine con } (llave de cierre). Cada nombre es seguido por : (dos puntos) y los pares nombre/valor están separados por, (coma). Un arreglo es una colección de valores. Un arreglo comienza con [ (corchete izquierdo) y termina con ] (corchete derecho). Los valores se separan por, (coma).

5 5  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Estructuras en JSON (2) Un valor puede ser una cadena de caracteres con comillas dobles, o un número, o true o false o null, o un objeto o un arreglo. Estas estructuras pueden anidarse. Una cadena de caracteres es una colección de cero o más caracteres Unicode, encerrados entre comillas dobles, usando barras divisorias invertidas como escape. Un carácter está representado por una cadena de caracteres de un único carácter. Una cadena de caracteres es parecida a una cadena de caracteres C o Java. Un número es similar a un número C o Java, excepto que no se usan los formatos octales y hexadecimales.

6 6  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Ejemplo de acceso a datos JSON usando JavaScript Archivos: uso_json_php.txt yuso_json_php.txt uso_json_javascript.txt

7 7  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Barra de menú con JSON y XML JSON: {"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] }

8 8  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Barra de menú con JSON y XML (2) XML:

9 9  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy ¿Qué es ? AJAX es el acrónimo de Asynchronous JavaScript And XML (JavaScript y XML asíncronos).JavaScriptXML Es una técnica de desarrollo Web para crear aplicaciones interactivas, las que se ejecutan en el cliente: el navegador del usuario. Se mantiene comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre la misma página sin necesidad de recargarla. Esto significa aumentar la interactividad, velocidad y usabilidad en la misma.

10 10  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Definiendo AJAX Ajax NO es una tecnología. Realmente son varias tecnologías, cada una floreciente por si misma, integradas como una única y potente herramienta:

11 11  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Tecnologías AJAX combina tres tecnologías ya existentes basadas en estándares abiertos: 1.XHTML (o HTML) y hojas de estilos en cascada (CSS) para el diseño que acompaña a la información.XHTMLHTMLhojas de estilos en cascada 2.Document Object Model (DOM) accedido con un lenguaje de scripting por parte del usuario, especialmente implementaciones ECMAScript como JavaScript y JScript, para mostrar e interactuar dinámicamente con la información presentada.Document Object ModelECMAScriptJavaScriptJScript 3.El objeto XMLHttpRequest para intercambiar datos asincrónicamente con el servidor Web. En algunos frameworks y en algunas situaciones concretas, se usa un objeto iframe en lugar del XMLHttpRequest para realizar dichos intercambios.XMLHttpRequest frameworksiframe XML y XSLT son los formatos comúnmente usados para la transferencia de vuelta al servidor, aunque cualquier formato puede funcionar, incluyendo HTML preformateado, texto plano, JSON y hasta EBML.XMLJSONEBML

12 12  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Enfoques de aplicación: Web clásica El modelo de trabajo de una aplicación Web clásica es: –La mayor parte de las acciones del usuario en la interfaz disparan una petición HTTP de retorno al servidor. –El servidor realiza algún tipo de procesamiento — recuperar datos, hacer cálculos, interrogar sistemas del legado histórico, etc. — para entonces devolver una página HTML al cliente. Este es un modelo adaptado a partir del uso original de la Web como un medio de hipertextos, pero que no necesariamente hace a la Web buena para aplicaciones de software.

13 13  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Enfoques de aplicación: uso de AJAX

14 14  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Comparación de arquitecturas Clásica AJAX

15 15  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Ejemplo de AJAX con PHP Archivo uso_ajax_php.txt, que contiene:uso_ajax_php.txt Test.php: Archivo que muestra formulario, y que recibirá el resultado de la petición AJAX. Incluye el guión JavaScript para peticiones POST y GET. Consulta.php: Guión que recibe la petición AJAX y envía la respuesta solicitada al cliente.

16 16  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Ejemplo de acceso a datos JSON usando XMLHTTPRequest var http_request = new XMLHttpRequest(); // Esta URL debería devolver datos JSON: var url = "http://example.net/jsondata.php"; // Descarga los datos JSON del servidor: http_request.onreadystatechange = handle_json; http_request.open("GET", url, true); http_request.send(null); function handle_json() { if (http_request.readyState == 4) { if (http_request.status == 200) { var json_data = http_request.responseText; var the_object = eval("(" + json_data + ")"); } else { alert("Ha habido un problema con la URL."); } http_request = null; }

17 17  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Página simple con xajax y PHP 1)Incluir con PHP el archivo donde está la clase xajax //incluímos la clase ajax require ('xajax/xajax.inc.php'); 2)Creamos una instancia de un objeto de la clase xajax //instanciamos el objeto de la clase xajax $xajax = new xajax(); 3)Escribimos una función en PHP, que luego llamaremos con por medio de ajax

18 18  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Página simple … (2) Esta función es todo lo complicado que se requiera. Realizará acciones del lado del servidor y por tanto puede acceder a bases de datos, abrir ficheros o cualquier cosa que se nos ocurra. Luego en la propia función realizaremos una instancia de un objeto AjaxResponse, que utilizaremos para mostrar resultados en la página. El objeto xajaxResponse() sirve para realizar acciones en la página sin tener que recargar el documento. Dispone de varios métodos o funciones, como por ejemplo addAssign() que sirve para asignar un valor a una propiedad de un elemento de la página. En este caso se asigna el valor contenido en la variable $salida al innerHTML de la capa "respuesta", con lo que se altera el texto contenido en esa capa.

19 19  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Función PHP function si_no($entrada){ if ($entrada=="true"){ $salida = "Marcado"; }else{ $salida = "No marcado"; } //instanciamos el objeto para generar la respuesta con ajax $respuesta = new xajaxResponse(); //escribimos en la capa con id="respuesta" el texto que aparece en $salida $respuesta->addAssign("respuesta","innerHTML",$salida); //tenemos que devolver la instanciación del objeto xajaxResponse return $respuesta; }

20 20  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Página simple … (3) 4) Asociamos la función PHP al objeto xajax //asociamos la función creada anteriormente al objeto xajax $xajax->registerFunction("si_no"); Esta asociación permitirá ejecutar la función PHP desde una llamada a una función Javascript. 5) Antes de enviar cualquier contenido a la página, tenemos que ejecutar un método del objeto xajax para procesar las peticiones del que puedan llegar a la página. //El objeto xajax tiene que procesar cualquier petición $xajax->processRequests(); Insistimos, esta llamada al método se tiene que hacer antes de escribir ningún contenido dentro del código de la página, es decir, antes que llegue al cliente ningún carácter de código HTML.

21 21  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Página simple … (4) 6) Escribir el código javascript necesario para procesar las llamadas a ajax. //En el indicamos al objeto xajax se encargue de generar el javascript necesario $xajax->printJavascript("xajax/"); Lo ideal es hacer esta llamada al método printJavascript() dentro del de la página. Si nos fijamos, el método recibe un parámetro, que es la ruta relativa para acceder al directorio donde están los archivos xajax descomprimidos. 7) Podemos hacer llamadas a las funciones PHP en cualquier lugar del código, como respuesta a las acciones del usuario con javascript.

22 22  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Página simple … (5) Como podemos ver, desde un elemento de la página, como en este caso una casilla de verificación, al cambiar su estado, se llama a una función javascript para ejecutar la función PHP escrita anteriormente. Es decir, al pulsar el chechbox se desencadena el evento onchange y con él se llama a la función xajax_si_no() enviándo como parámetro el estado (chequeado o no) de la casilla de verificación. Con esto es todo tenemos todo lo necesario para entender el ejemplo. Podemos verlo en ejecución en una página aparte. Podemos ver el código del ejemplo completo a continuación, pero tener en cuenta que para que funcione tiene que disponer del código de la clase xajax, que en este caso debe estar en un subdirectorio que cuelgue del directorio donde está el archivo del ejemplo.verlo en ejecución El código completo está en el archivo si_no_xajax_php.txtsi_no_xajax_php.txt

23 23  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Referencias sobre AJAX AJAX (en español)AJAX Tutorial de AJAX (Asynchronous JavaScript + XML) AJAX: Asynchronous Java + XML? NetBeans 5.0 Tutorials/Articles Categories Mastering Ajax Ajax: A New Approach to Web Applications Build dynamic Java applications Ajax with Direct Web Remoting Java object serialization for Ajax Call SOAP Web services with Ajax Ajax Learning Guide AJAX Revolution

24 24  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Documentación Mozilla Developer Center (en español) Primeros pasos con AJAX –Este artículo te guiará por los conceptos básicos de AJAX y te proporcionara dos ejemplos prácticos para que empieces. Ajax con PHP, JSON y CSS –Con este tutorial puedes programar con AJAX utilizando PHP y JSON, un nuevo estándar más simple que XML. Programarás en AJAX, PHP y CSS de forma simple y natural. Ajax Upload File –Artículo en el que se explica la carga de archivos de un formulario usando ajax y php, además de otros ejemplos en los que se puede visualizar la barra de progreso de la carga. Creando formulario editables in situ –Breve tutorial que nos muestra como crear nuestros formularios editables in situ con AJAX PHP y MySQL, al estilo Flickr. Arquitectura Cliente Servidor con AJAX –Artículo avanzado que muestra un patrón de diseño para desarrollar con AJAX, haciendo el modelo de la aplicación como web-services, la interface (view) con HTML y el controlador (controller) en Javascript, para crear aplicaciones siguiendo el paradigma MVC. Herramientas: Prototype, JSON y CSS

25 25  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Otros enlaces en español AJAX XMLHttpRequest Introducción a AJAX con PHP y formularios Tutorial Ajax manejo de paso de datos por métodos GET y POSTTutorial Ajax manejo de paso de datos por métodos GET y POST AJAX-PHP-MySQL: Consulta de registros Ejemplo de uso de AJAX + PHP

26 26  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Referencias XAJAX y JSON Xajax: Ajax para PHP Recibir y procesar formulario con Ajax y PHP Introducting xajax 0.2.4 DescargaIntroducting xajax 0.2.4Descarga –Ejemplos: Multiply Demonstrates a very basic xajax implementation Code: multiply.common.php | multiply.server.php | multiply.phpMultiplymultiply.common.phpmultiply.server.php multiply.php Graffiti Wall Demonstrates an xajax implementation of a Graffiti Wall Code: thewall.common.php | thewall.server.php | thewall.phpGraffiti Wallthewall.common.phpthewall.server.phpthewall.php Signup Form Demonstrates a simple multipage form using xajax and the xajax.getFormValues() function. Code: signup.common.php | signup.server.php | signup.phpSignup Formsignup.common.phpsignup.server.phpsignup.php JSON –Referencia: http://www.json.org/json-es.html –Descarga: http://pecl.php.net/package/json Wikipedia: JSONJSON

27 27  2007 Universidad de Las Américas - Escuela de Ingeniería - Aplicaciones Internet - Dr. Juan José Aranda Aboy Paquetes de herramientas AJAX Google Toolkit: gwt-windows-1.0.21.zip Ajax.NET Professional 5.11.4.1 ejemplos y manual.zip BackBase Zapatec sajax-0.12.zip … y otras muchas en Internet!