Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Curso de ajax
ProgramacionWeb.net
Ajax Tutorial
w3schools.com
Manual de Ajax, Juan Mariano Fuentes (en PDF)
elrincondeajax.com
Taller Ajax
Desarrollo Web
Turorial de Ajax
cristalab.com
Introduccción a Ajax - Javier Eguíluz Pérez
librosweb.es
mini tutorial de Ajax
Bog de Ale Muñoz en Sofa Naranja.
Using POST method in XMLHTTPRequest
Artículo de openjs.com
Tip Para Solucionar Problema con Acentos al Utilizar AJAX
webadictos.com

AJAX I

Qué es AJAX

Definición

AJAX son las siglas de Asynchronous JavaScript And XML, (Javascript asíncrono y XML). No es en sí un lenguaje de programación, sino una nueva técnica que combina varios lenguajes de programación.

La ventaja de ajax respecto a otros lenguajes de programación web es la asincronía. Esto consiste en que cuando queremos intercambiar datos con el servidor (por ejemplo enviar o combrobar un formulario, consultar una base de datos, etc), la página no se queda parada esperando la respuesta, sino que se pueden seguir ejecutando acciones mientras tanto.

Con ajax podemos crear páginas interactivas. En éstas solicitamos datos al servidor, los cuales podemos tener guardados en otras páginas o en bases de datos. El servidor devuelve los datos, los cuales se cargan en la misma página y en segundo plano. Lo de "segundo plano" significa que mientras esperamos que se reciban los datos la página no se queda parada, y el usuario puede seguir haciendo otras cosas.

Para poder entender este manual debemos tener conocimientos de HTML, CSS, y Javascript. Es conveniente también tener nociones de XML y acceso al DOM. Para las últimas páginas necesitamos también tener conocimientos de PHP, ya que es el lenguaje que se emplea para procesar los datos en el servidor. De todo esto encontrarás manuales en Aprende Web

Componentes de AJAX

Ajax es una combinación de los siguientes lenguajes de programación y elementos:

Como aquí también trabajaremos con PHP sería conveniente para poder seguir los ejemplos que tengamos instalado en el ordenador un servidor local. Si has seguido el curso de PHP tendrás instalado el programa XAMPP. Sin no es así en el curso de PHP página: 1.3 Instalar XAMPP se indica cómo instalarlo.

Cómo funciona ajax

Usando sólo PHP u otros lenguajes de servidor, al hacer una petición, el servidor realiza una serie de tareas y después nos devuelve los datos. Mientras se realiza este proceso la página permanece en espera, es decir está parada. Esto puede que no tenga importancia si se manejan pocos datos y el servidor tiene potencia para responder rápidamente. Sin embargo si se manejan muchos datos o hay muchas peticiones a la vez (páginas muy visitadas), el tiempo de respuesta puede ser más largo. Mientras se espera la respuesta la página permanece parada.

Con ajax al trabajar de forma asincrona, permite que el usuario pueda seguir haciendo otras cosas o la página pueda mostrar otras cosas mientras se produce la respuesta.

Los siguientes gráficos muestran la forma de trabajar pidiendo datos al servidor de forma sincrona (sin ajax) o asíncrona (con ajax):

Forma clásica de trabajar al interactuar con el servidor:

subir archivos, clásico

Forma de trabajar con ajax al interactuar con el servidor

subir archivos, ajax

Ajax es particularmente útil en paginas que manejan gran cantidad de datos o que son usadas por una gran cantidad de usuarios. Algunos ejemplos de páginas que usan ajax son Gmail (el correo de Google) o Google Maps.







En la siguiente página empezaremos a ver cómo funciona ajax en la práctica. Empezaremos por insertar en la página un archivo de texto

Insertar texto



Manual Ajax

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo