Capítulo 14 AJAX y la librería jQuery

Presentación del tema: "Capítulo 14 AJAX y la librería jQuery"— Transcripción de la presentación:

1 Capítulo 14 AJAX y la librería jQuery

2 14.1 El método POST en AJAX Es independiente de XML y de JSON, ya que mandaremos información al servidor y no importa el formato en que lo enviemos, como cuando tenemos algún formulario y deseamos enviarlo a un script de un servidor, como PHP o ASP. Para este ejemplo también necesitamos un servidor Web, ya sea local o remoto, pues estamos llamando a un archivo PHP. Para enviar la información debemos de armar una cadena con los datos del formulario y enviarlo como parámetro dentro del método send(). Un buen script siempre regresa la confirmación del resultado de su operación, la cual puede ser una simple cadena como “OK” o “ERROR”, o todo el registro en el formato que a usted más le guste.

3 En este listado hay que resaltar que le estamos indicando la forma en que vamos a enviar los datos con el método: La información será guardada en formato urlencoded. El estatus de la operación, si fue correcta o incorrecta, y la recibimos en el archivo HTML. Aunque obviamente faltan muchas validaciones, mostramos la mecánica del proceso de envío de las variables con POST.

4 14.2 AJAX y JQuery Una de las librerías más utilizadas de JavaScript es jQuery. Las fortaleza de esta librería es el manejo de AJAX, ya que lo hace en forma sencilla y a la vez muy potente. Para obtener la librería tiene que entrar a la dirección en la opción de descarga o “download”. Podrá observar que hay dos versiones: una para desarrollo y otra para producción. Las dos hacen exactamente lo mismo, la única diferencia es que la primera tiene espacios y tabuladores, que la hace más legible para nosotros los humanos, pero más pesada para la descarga. La segunda es una versión comprimida y más ligera. Una tercera opción es utilizar un CDN, queson servidores enormes alojados por grandes compañías como Google o Microsoft, quienes tienen el archivo y ya no es necesario bajarlo a su computadora. Una vez que se ha bajado el archivo, necesitamos instalarlo dentro de una carpeta, a la cual podemos llamar js, lib, etcétera. Al tener instalado el archivo, ya sea el de desarrollo o el de producción, hay que llamarlodesde el archivo HTML por medio de la etiqueta <script>.

5 jQuery Una buena práctica cuando utilizamos jQuery es renombrar el archivo quitándole la versión, ya que si deseamos actualizar la versión de la librería, deberíamos cambiar todos aquellos archivos donde la usamos, y créame, una vez que aprenda los beneficios de ésta, la querrá manejar en todas sus aplicaciones. En el listado anterior estamos llamando a la librería desde la etiqueta <script>, y en vez de utilizar el evento window.onload(), como lo hemos hecho a lo largo de este libro, llamaremos a la función de carga; una vez que todas las etiquetas HTML han sido ya representadas con $(document).ready(), dentro de ésta estamos llamando a una función anónima, es decir, que no tiene nombre. Si todo ha sido bien instalado y escrito, una vez que ejecute este pequeño script, deberá aparecer en su navegador, la ventana con el mensaje de saludo desde jQuery.

6 14.3 El método Load() de jQuery
jQuery tiene varios métodos que utilizan AJAX para traer información del servidor. Este es el caso del método load(), el cual nos servirá principalmente para leer achivos, ya sean de texto plano, XML o JSON. Este método tiene las siguiente sintaxis:

7 Los parámetros de este método son:

8 14.4 El método Get() En el método get() solicitamos un recurso del servidor por medio del método GET del http. Su sintaxis general es: Donde los parámetros son:

9 14.5 La función Callback En los métodos AJAX de jQuery tendremos una función de callback. Los tres parámetros que podemos recibir se muestran en la sección del método load(). Al momento de terminar de cargarse el archivo, se lanza la función onCarga y recibe tres parámetros: los datos, si es que el script regresa datos; el estado de la solicitud, según la tabla que vimos de parámetros en secciones anteriores; y el objeto XMLHttepRequest que fue utilizado en el proceso, el cual posee mucha información.

10 14.6 El método Post() de jQuery El método post hace la solicitud por medio del método http. Pasamos los datos como un objeto y lanzamos una función de callback. El archivo php se muestra a continuación El método Ajax() de jQuery Ajax(), que es la instrucción más completa del repertorio. Tiene los siguientes parámetros:

11