Introducing 

Prezi AI.

Your new presentation assistant.

Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.

Loading…
Transcript

Ajax / jQuery

Funcionamiento

Mostrar los datos al usuario

El usuario accede a la aplicación que es enviada por el servidor en formato HTML, JavaScript y CSS.

Luego el código JavaScript de la aplicación pide al servidor los datos que quiere mostrar y este, ejecuta un código de

lado de servidor que envía al navegador los datos en formato XML.

Cada vez que el usuario realiza una acción que significa mostrar unos datos, la capa javascript, repite la acción anterior de manera invisible al usuario y muestra los datos deseados.

¿Como mostramos los datos? Para mostrar los datos que hemos obtenido en el div que hemos creado, primero accederemos al objeto a través de su id ( miDiv1 en el ejemplo) usando el método getElementById y luego podremos usar innerHTML para indicarle el contenido en formato HTML que tendrá este div en su interior:

* <script> // Accedemos al DIV con getElementById miDiv = document.getElementById('miDiv1'); // Modificamos su contenido miDiv.innerHTML = '<b>Este es el nuevo contenido</b>'; </script>

El objeto XMLHttpRequest

Es una instancia de una API que nos permite la transferéncia de datos en formato XML

desde los script del

navegador ( JavaScript, JScrip, VBScript ... ) a los del servidor ( PHP, Perl, ASp, Java ... )

e inversamente.

Una vez hemos recibido y conocemos los datos que necesitamos del servidor, deberemos mostrarlos al usuario de alguna manera. En la mayoría de casos, lo que nos interesa, no es mostrar estos datos en un mensaje emergente usando la función alert, sino que queremos mostrar los datos en la misma página que está viendo el usuario sin usar refrescar. ¿Dónde mostramos los datos? Para mostrar estos datos, necesitamos un objeto HTML al que le podamos modificar su contenido de manera que el usuario pueda verlo. Normalmente aunque no siempre, usaremos un objeto div al que le podremos modificar su contenido usando la función innerHTML:

<div id="miDiv1">Aquí aparecerán los datos</div>

El objeto XMLHttpRequest

Eventos

Métodos y atributos:

Atributos:

onreadystatechange, readyState, esponseText, responseXML, Status, statusText

Métodos:

Abort, getAllResponseHeaders,

getResponseHeader, Open, Send,

setRequestHeader

Efectos

jQuery provee métodos para asociar controladores de eventos (en inglés event handlers) a selectores. Cuando un evento ocurre, la función provista es ejecutada. Dentro de la función, la palabra clave this hace referencia al elemento en que el evento ocurre. Para más detalles sobre los

eventos en jQuery, puede consultar http://api.jquery.com/category/events/.

La función del controlador de eventos puede recibir un objeto. Este objeto puede ser utilizado para determinar la naturaleza del evento o, por ejemplo, prevenir el comportamiento predeterminado de éste. Para más detalles sobre el objeto del evento,

visite http://api.jquery.com/category/events/event-object/.

Vincular Eventos a Elementos

jQuery ofrece métodos para la mayoría de los eventos — entre ellos $.fn.click, $.fn.focus,

$.fn.blur, $.fn.change, etc. Estos últimos son formas reducidas del método $.fn.bind de jQuery. El método bind es útil para vincular (en inglés binding) la misma función de controlador a múltiples eventos, para cuando se desea proveer información al controlador de evento, cuando se está trabajando con eventos personalizados o cuando se desea pasar un objeto a múltiples eventos y controladores.

Introducción

Con jQuery, agregar efectos a una página es muy fácil. Estos efectos poseen una configuración predeterminada pero también es posible proveerles parámetros personalizados. Además es posible crear animaciones particulares estableciendo valores de propiedades CSS.

Ajax

La respuesta AJAX

Implementaciones de AJAX

* Mandar estos encabezados con diferentes lenguajes de programación de lado de servidor, generalmente deberemos poner estos códigos al principio del todo del documento:

* <?php  header("Content-Type: text/xml");  header("Cache-Control: no-cache, must-revalidate");  header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");  ?>

#!/usr/bin/perl  print "Content-Type: text/xml";  print "Cache-Control: no-cache, must-revalidate";  print "Expires: Mon, 26 Jul 1997 05:00:00 GMT";

<%  response.ContentType="text/xml"  response.CacheControl="no-cache, must-revalidate"  response.Expires="Mon, 26 Jul 1997 05:00:00 GMT"  %>

Módulos de jQuery UI

- AJAX (Asynchronous JavaScript And XML) es una técnica de desarrollo Web para crear aplicaciones interactivas mediante la combinación de tres tecnologías ya existentes.

- JavaScript - Para manejar el objeto XMLHttpRequest y DOM tratar para los datos recibidos.

- HTML - Distribuye en la ventana del navegador los elementos de la aplicación y la información recibida por el servidor

- CSS - Define el aspecto de cada elemento y dato de la aplicación

- XML - Es el formato de los datos transmitidos del servidor al cliente (navegador) y que posteriormente serán mostrados.

- Lenguaje de servidor - Genera la información útil en XML y la envía al navegador.

Librerías de cliente Estas nos permiten trabajar fácilmente con llamadas al servidor y tratar los datos recibidos, la ventaja de estas es que no dependen de un lenguaje de servidor pero por esta misma razón suelen integrarse peor.

prototype - Esta interesante librería de JavaScript dispone de ( entre otros ) la clase Ajax, que nos facilitarán muchisimo el trabajo en AJaX

Librerías de cliente/servidor Este tipo de librerías nos permite hacer llamadas a funciones del servidor desde el cliente usando unas funciones JavaScript autogeneradas a las que llamaremos proxies.

Ajax.NET Professional - Conocido como AjaxPro nos permite crear una proxy para llamar a métodos .Net del servidor desde JavaScript.

xaJax - xaJax es un framework (marco de trabajo) escrito en PHP de código abierto que permite crear fácilmente aplicaciones web que utilizan AJaX

XOAD - XOAD es un proxy de PHP usando

XMLHttpRequest y JSON

Interacciones

jQuery UI añade comportamientos complejos a los elementos como lo son:

• Draggable: Hace al elemento arrastrable.

• Droppable: Permite que el elemento responda a elementos arrastrables.

• Resizable: Permite redimensionar el elemento.

• Selectable: Permite seleccionar entre una lista de elementos.

• Sortable: Ordena una lista de elementos.

jQuery

Widgets

Este es de los módulos de jQuery mas interesantes y mas usados, ya que es la parte donde le damos un toque especial a nuestros sitios web con estos widgets.

Cada control tiene un conjunto de opciones configurables y se les pueden aplicar estilos CSS.

 Accordion: Menú con efecto acordeón.

 Autocomplete: Caja con autocompletado.

 Button: Botón.

 Dialog: Ventanas con contenido.

 Slider: Elemento para elegir en un rango de valores.

 Tabs: Pestañas.

 Datepicker: Calendario gráfico.

 Progressbar: Barra de progreso.

Paso de parámetros

* En la petición AJAX podemos pasar parámetros tanto por POST como por GET a nuestro servidor. Para pasar parámetros por GET ( por URL ) , usaremos una URL con parámetros en la función open independientemente de usar el método GET o POST, por ejemplo:

* <script> 

// Creamos la variable parametro parametro = 'Datos pasados por GET'; // Creamos el objeto  oXML = <A&NBSP;HREF=" articulos articulo ?num='323""'>AJAXCrearObjeto(); 

// Preparamos la petición con parametros oXML.open('GET', 'pagina.php?parametro=' + escape(parametro)); 

// Preparamos la recepción oXML.onreadystatechange = leerDatos; 

// Realizamos la petición  oXML.send('');  </script>

Introducción

jQuery es una biblioteca de JavaScript que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web.

jQuery se está convirtiendo rápidamente en una herramienta que todo desarrollador de interfaces web debería de conocer. El propósito de este manual es proveer un resumen de la biblioteca, de tal forma que para cuando lo haya terminado de leer, será capaz de realizar tareas básicas utilizando jQuery y tendrá una sólida base para continuar el aprendizaje.

jQuery se encuentra escrito en JavaScript, un lenguaje de programación muy rico y expresivo. El manual está orientado a personas con conocimientos básicos en este lenguaje así que no se tomaran temas referentes a JavaScript, pero si usted esta interesado en aprender el lenguaje más en profundidad, puede leer el libro JavaScript: The Good Parts escrito por Douglas Crockford.

2.1 Objetos en JavaScript

Los objetos son elementos que pueden contener cero o más conjuntos de pares de nombres claves y valores asociados a dicho objeto. Los nombres claves pueden ser cualquier palabra o número válido. El valor puede ser cualquier tipo de valor: un número, una cadena, un arreglo, una función, incluso otro objeto.

[Definición: Cuando uno de los valores de un objeto es una función, ésta es nombrada como un método del objeto.] De lo contrario, se les llama propiedades.

Curiosamente, en JavaScript, casi todo es un objeto — arreglos, funciones, números, incluso cadenas — y todos poseen propiedades y métodos.

Creación del objeto XMLHttpRequest

Realizar una petición con AJAX

* El primer paso para establecer la comunicación con el servidor usando AJAX, es hacer la petición, posteriormente, el servidor nos preparará y devolverá una información que ya veremos más adelante como recibimos, tratamos e incorporamos en nuestra página. Existen dos tipos de petición al servidor, definidas con el método open, la petición síncrona y la asíncrona, pero por definición AJAX utiliza comunicación asíncrona.

* Realizar la petición al servidor. Para realizar la petición al servidor, utilizaremos los métodos open, onreadystatechange y send, que sirven respectivamente para preparar la petición, seleccionar la función de recepción e iniciar la petición. Al método open, hay que pasarle el método de petición (GET) y la URL que se enviará al servidor y mediante la cual, el servidor, creará la respuesta que posteriormente leeremos.

Ejemplo

<script>

// Creamos el objeto  oXML = <AHREF=" articulos articulo

? um='323""'>AJAXCrearObjeto();  // Preparamos la petición  oXML.open('GET', 'archivo.txt');  // Preparamos la recepción  oXML.onreadystatechange = leerDatos;  // Realizamos la petición  oXML.send(''); 

</script>

* El secreto de AJAX es la comunicación sin refresco entre el cliente y el servidor, esto es posible gracias a JavaScript y al objeto XMLHttpRequest. Este objeto, esta disponible para la mayoría de navegadores modernos excepto las versiones 5 y 6 de Internet Explorer, para las cuales tendremos que usar un objeto ActiveX llamado 'Microsoft XMLHT<script TP', por lo tanto , cuando creemos el objeto de comunicación con el servidor deberemos tener en cuenta el navegador con el que trabaja nuestro usuario. Para hacer el código más limpio, crearemos una función para realizar la conexión que usará variables locales, además es recomendable incluir todas las funciones que usaremos en un fichero .js externo e incluirlo en el documento HTML.

* <script>  function AJAXCrearObjeto(){   var obj;   if(window.XMLHttpRequest) { // no es IE   obj = new XMLHttpRequest();   } else { // Es IE o no tiene el objeto   try {   obj = new ActiveXObject("Microsoft.XMLHTTP");   }   catch (e) {   alert('El navegador utilizado no está soportado');   }   }   return obj;  }  </script>

* Ahora, llamaremos a la función AJAXCrearObjeto de la siguiente manera para obtener el objeto que utilizaremos más adelante:

<script> oXML = AJAXCrearObjeto(); </script>

Software a Utilizar

Para trabajar con el contenido de este manual necesitara varias de las siguientes herramientas:

• Un navegador web actualizado

• Un editor de textos planos(como Notepad++,Komodo,etc)

• Las bibliotecas jQuery y jQueryUI

* Descargar jQuery y jQueryUI

Podemos visitar la página oficial de jQuery para obtener la versión más actual y estable: http://docs.jquery.com/Downloading_jQuery y http://jqueryui.com/download. En este último nos da la opción de seleccionar o crear un tema para jQueryUI, nos mostrara ejemplos de componentes de jQuery UI y seleccionaremos el que necesitemos.

* Añadir JavaScript a una Página

Una vez descargado jQuery y el plugin jQueryUI debemos agregarlo a nuestra página web. Existen dos formas de insertar código JavaScript dentro de una pagina: escribiendo código en la misma o a través de un archivo externo utilizando la etiqueta script.

Learn more about creating dynamic, engaging presentations with Prezi