Curso AJAX 01 PDF

INSTITUTO PERUANO DE CIENCIAS DE LA INFORMACION
Av Diez Canseco 442 Piso 9

Edificio El Ejecutivo Miraflores
www.LibrosDigitales.Net
Introduccin a AJAX
AJAX no es precisamente una nueva tecnologa web, podra definirse como el uso
coordinado de distintas tecnologias que en conjunto permiten una navegacin ms
gil y rapida, como consecuencia logrando la interaccin en una aplicacin dinmica
basada en web, muy similar a las aplicaciones de escritorio.
AJAX se ejecuta del lado del cliente, es decir en el navegador y mantiene

comunicacin asncrona con el servidor en segundo plano. Esto permite ejecutar la
aplicacin sobre la misma pgina sin necesidad de recargarla.
AJAX es independiente al lenguaje (PHP, ASP, JSP) que se usa en el Servidor, sin
embargo es preciso interactuar con ste para conseguir la dinamicidad y el acceso a
datos, los ejemplos que se plantearn estarn orientados al uso de PHP.
AJAX = Asynchronous JavaScript And XML

(JavaScript y XML Asincrono)
Para el mejor comprendimiento del curso, sugiero revisar los siguientes temas:
HTML: Formularios y Controles de Formularios

Javascript: Gestores de Evento
Integracin del Javascrip en documentos HTML
XML
Fundamentos del lenguaje PHP
Tecnologa al Servicio del Hombre

Historia
Actualmente la mayora de las actividades del usuario se desarrollan en la web

(Correo, Chats, compartir informacin)

Tecnologas usadas por AJAX

XHTML y hojas de estilo en cascada (CSS) para la presentacin de datos
DOM (Document Object Model) para mostrar e interactuar dinmicamente con la

informacin presentada.
XML y XLST, para intercambiar y manipular datos con el Servidor
XMLHTTPRequest, para la recuperacin y envo de datos de modo asncrono.
JavaScript como nexo de unin

Gestin de Peticiones y Respuestas

El protocolo HTTP se usa para realizar una peticion de una pgina al Servidor http asi
como para gestionar la respuesta, en trminos mas simples, es quien se encarga de
facilitar la conversacin entre el Navegador (Cliente http) y el Servidor (Servidor http).
En la presente gua describiremos unicamente aquellos puntos relacionados al uso de
AJAX.
El protocolo HTTP, gestiona la peticin a travs de HTTPRequest y la respuesta

mediante HTTPResponse.
HTTP Request:
Inicia una peticion al servidor web

Luego de abrir una conexion, el navegador transmite una peticion, el cual puede ser
de tipo POST o GET
HTTP Response:
Gestiona la respuesta del servidor, podemos obtener un Codigo de Estatus y una

Razon

Los cdigos de estatus se clasifican en 5 grupos:
Codigo de estatus Razn

1XX Informacin
2XX xito
3X X Redireccin
4XX Error Cliente
5XX Error Servidor
Los cdigos que habitualmente se muestran y que usaremos son:
Codigo de estatus Razon Descripcin

200 OK Peticin correcta
204 No Content Documento sin datos
301 Mover permanently Recurso movido
401 Not Authorized Requiere autenticacin
403 Forbidden Rechazado por el servidor
404 Not Found No existe en el Servidor
408 Request timeout Tiempo sobrepasado
500 Server error Error de Servidor
Todo esto ocurre en segundo plano por lo cual en una aplicacin web tradicional no
se ve el resultado ni la razon explicativa, sin embargo esto servir para que el motor
AJAX pueda determinar la accion que se deba realizar.
Para conocer visite: w3.org

Envio de datos mediante vnculos y Formulrios

Por lo general uma peticin http es iniciada en una pgina por un vnculo, un
Formulario o un control de Formulario. Dependiendo de ello la peticin puede ser de
tipo POST o GET
Metodo GET
GET = GETting (Obtener-recuperar)
Este mtodo generalmente se usa cuando la peticin es iniciada por un vnculo o

cuando explcitamente en un Formulario se especifica en el parmetro METHOD.
Los datos son enviados dentro de una cadena de consulta (Query string), aadido a
la URL
Metodo POST
POST = Subir datos o enviar datos al servidor
Este mtodo es usado cuando la peticin es iniciada por un Formulario, los datos son
enviados en el cuerpo del mensaje (message body)
En ambos casos la informacin no se encripta.

Arquitectura de una Aplicacin Tradicional Web
Una aplicacin web tradicional, la pagina es un todo, si la pagina llama a otra pagina,
esta debe cargarse de nuevo. Por tanto al presionar un boton o vinculo debemos
esperar hasta que cargue la pagina.
No debe volverse a presionar el boton, pues esto iniciara de nuevo una peticin. Una
caracteristica es la demora mientras se ejecuta algun proceso debiendo el usuario
esperar a que el servidor devuelva la pagina.

Arquitectura de una Aplicacin AJAX

Una aplicacin AJAX permite que el uso de las paginas sea interactivas,
respondiendo a las acciones del usuario de forma inmediata sin interrupcipon
realizando los procesos en segundo plano mientras el usario pueda seguir usando la
aplicacin sin problemas
En el esquema, AJAX crea una capa extra de procesamiento entre el usuario y el

servidor, denominado motor AJAX, lo que hace es interceptar las peticiones del
usuario y en un segundo plano maneja las comunicaciones con el servidor en
silencio y asincronicamente, por eso las peticiones y respuestas del servidor no
necesitan coincidir con las acciones del usuario, sino que puede pasar en cualquier
momento sin que el navegador se congela y espera que el servidor complete la ultima
peticin, por tanto el usuario podr continuar interactuando con la aplicacin.

Interaccin en una Aplicacin basada en AJAX
Analicemos los componentes:
Objeto XMLHTTPRequest, se encarga de gestionar la peticion, y controlar el

procesamiento
Monitorizacin: a traves de sus propiedades se puede monitorear el estatus de la

peticion
Obtenida la respuesta, se procesa los datos devueltos

El Objeto XMLHTTPRequest
Propiedades
Mtodos

Codigo del lado del cliente usando Javascript
Para facilitar la creacin del objeto XMLHTTPRequest, desarrollaremos la funcin:
La funcin getXMLHTTPRequest()
Archivo: ajax.js
function getXMLHTTPRequest() {
var req;
try {
req = new XMLHttpRequest();
} catch(err1) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (err2) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (err3) {
req = false;
}
}
}
return req;
}

Transferir y procesar datos mediante valores
El siguiente ejemplo muestra como desde un formulario se ingresa los valores y luego
se envia al motor AJAX para su procesamiento, el motor AJAX interactua con una
pagina PHP quien devuelve el valor a manera de una cadena.
Ejemplo01.htm
<head>
<title>Primer ejemplo</title>
</head>
<script language="javascript" src="ajax.js">
</script>
<script language="javascript">
http = getXMLHTTPRequest();
msg = "Procesando";
function procesar(){
var myurl = 'procesar1.php';
var n1 = form1.n1.value;
var modurl = myurl + "?n1=" + n1 + "&n2=" + n2;
http.open("GET", modurl, true);
http.onreadystatechange = useHTTPResponse;
http.send(null);
}
function useHTTPResponse() {
if (http.readyState == 4) {
if(http.status == 200) {
form1.suma.value = http.responseText;
}
} else {
form1.suma.value=msg;
}
}
</script>
<body>

<form name="form1">
n1: <input type="text" name="n1" /><br />
suma: <input type="text" name="suma" disabled="disabled" /><br />
<input type="button" value="Calcular" onclick="procesar();" />
</form>
</body>
</html>
La pagina PHP que realiza el proceso, simplemente imprime el valor, el que luego es
recepcionado por el motor AJAX
Ejemplo01.php
<?php
$n1 = $_GET["n1"];
$n2 = $_GET["n2"];
$s = $n1 + $n2;
echo $s;
?>

Transferir y procesar datos mediante el uso de XML

En este ejemplo se realiza una operacin similar al ejemplo anterior, solo que esta
vez el valor se decepciona en formato XML
Ejemplo02.htm
<head>
<title>Segundo ejemplo</title>
</head>
<script language="javascript" src="ajax.js"></script>
<script language="javascript">
msg = "Procesando";
function procesar(){
var myurl = 'procesar2.php';
var modurl = myurl + "?n1=" + n1 + "&n2=" + n2;
http.onreadystatechange = useHTTPResponse;
http.send(null);
}
function useHTTPResponse() {
var suma = http.responseXML.getElementsByTagName("suma")[0];
form1.suma.value = suma.childNodes[0].nodeValue;
}
} else {
form1.suma.value=msg;
msg = right(msg,1) + left(msg,len(msg)-1);
}
}
</script>

<body>
<form name="form1">
suma: <input type="text" name="suma" disabled="disabled" /><br />
<input type="button" value="Calcular" onclick="procesar();" />
</form>
</body>
</html>
La pagina PHP procesa, luego imprime el resultado en formato XML
Ejemplo02.php
<?php
header('Content-Type: text/xml');
$n1 = $_GET["n1"];
$n2 = $_GET["n2"];
$s = $n1 + $n2;
echo "<?xml version=\"1.0\"?>";
echo "<rpta><suma>";
echo $s;
echo "</suma></rpta>";
?>

Procesando resultados en formato HTML

Este ejemplo muestra como podemos generar contenidos y controles dinamicos
usando AJAX.
Aqu usamos innerHTML para escribir dentro de una capa, en este caso dentro de la capa
"codigohtml", escribimos el resultado devuelto por el archivo PHP
Ejemplo03.htm
<html>
<head>
<title>Mi aplicacin AJAX</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" src="ajax.js"></script>
<script Language="JavaScript">
function obtenerTextoServidor() {
var myurl = 'ejemplo03.php';

myRand = parseInt(Math.random()*999999999999999);
var modurl = myurl+"?rand="+myRand;
http.onreadystatechange = useHttpResponse;
http.send(null);
}
function useHttpResponse() {
var miTexto = http.responseText;
document.getElementById('codigohtml').innerHTML = (miTexto);
}
} else {
document. getElementById('codigohtml').innerHTML = '<img src="anim.gif">'; }
}
</script>
</head>

<body onLoad="obtenerTextoServidor()">
Aqu est el texto devuelto por el servidor:<br>
<div id="codigohtml"></div>
</body>
</html>
El archive PHP, imprime el resultado con ayuda de la funcin utf8_encode()
Ejemplo03.php
<?php
$dias = array ('Lunes','Martes','Mircoles','Jueves','Viernes','Sbado','Domingo');
echo "<table border='2'>";
echo utf8_encode ("<tr><th>Nmero Da</th><th>Nombre Da</th></tr>");
for($i=0;$i<7;$i++)
{
echo utf8_encode ("<tr><td>".$i."</td><td>".$dias[$i]."</td></tr>");
}
echo "</table>";
?>

Ejercicio 1:
Desarrolle un programa que calcule el salario de un obrero, el calculo se hara en
funcion de la categora del obrero, de la prenda confeccionada, de la cantidad y del
turno:
Se dispone de las tablas:
Tabla: obrero
Idobrero int autonumerico
Obrero varchar 50
Categora varchar 1
La categora puede ser: A, B o C
Tabla: articulo
Idarticulo int autonumerico
Articulo varchar 50
El calculo se realiza:
Categora del Obrero Costo Mano de Obra por prenda

A 30
B 20
C 15
Se dispone de 3 turnos: Maana, Tarde y Noche
Los obreros de la categora A que trabajaen en la tarde tienen 10% de gratificacin y

si es la noche 20%
Los obreros de la categora B que trabajen en la noche tienen 15% de gratificacin

Ejercicio 2:
Se tiene una tabla de Paises y una tabla de Ciudades, deber construir un programa
que muestre una lista con los Paises, de acuerdo al Pais seleccionado se mostrar
las Ciudades

Curso AJAX 01 PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Curso AJAX 01 PDF

Hochgeladen von

Copyright:

Verfügbare Formate

INSTITUTO PERUANO DE CIENCIAS DE LA INFORMACION

Av Diez Canseco 442 Piso 9

AJAX se ejecuta del lado del cliente, es decir en el navegador y mantiene

AJAX = Asynchronous JavaScript And XML

HTML: Formularios y Controles de Formularios

Tecnologa al Servicio del Hombre

Actualmente la mayora de las actividades del usuario se desarrollan en la web

Tecnologa al Servicio del Hombre

Tecnologas usadas por AJAX

DOM (Document Object Model) para mostrar e interactuar dinmicamente con la

XML y XLST, para intercambiar y manipular datos con el Servidor

XMLHTTPRequest, para la recuperacin y envo de datos de modo asncrono.

JavaScript como nexo de unin

Tecnologa al Servicio del Hombre

Gestin de Peticiones y Respuestas

El protocolo HTTP, gestiona la peticin a travs de HTTPRequest y la respuesta

Inicia una peticion al servidor web

Gestiona la respuesta del servidor, podemos obtener un Codigo de Estatus y una

Tecnologa al Servicio del Hombre

Los cdigos de estatus se clasifican en 5 grupos:

Codigo de estatus Razn

Los cdigos que habitualmente se muestran y que usaremos son:

Codigo de estatus Razon Descripcin

Para conocer visite: w3.org

Tecnologa al Servicio del Hombre

Envio de datos mediante vnculos y Formulrios

GET = GETting (Obtener-recuperar)

Este mtodo generalmente se usa cuando la peticin es iniciada por un vnculo o

POST = Subir datos o enviar datos al servidor

En ambos casos la informacin no se encripta.

Tecnologa al Servicio del Hombre

Arquitectura de una Aplicacin Tradicional Web

Tecnologa al Servicio del Hombre

Arquitectura de una Aplicacin AJAX

En el esquema, AJAX crea una capa extra de procesamiento entre el usuario y el

Tecnologa al Servicio del Hombre

Interaccin en una Aplicacin basada en AJAX

Analicemos los componentes:

Objeto XMLHTTPRequest, se encarga de gestionar la peticion, y controlar el

Monitorizacin: a traves de sus propiedades se puede monitorear el estatus de la

Obtenida la respuesta, se procesa los datos devueltos

Tecnologa al Servicio del Hombre

Tecnologa al Servicio del Hombre

Codigo del lado del cliente usando Javascript

Para facilitar la creacin del objeto XMLHTTPRequest, desarrollaremos la funcin:

Tecnologa al Servicio del Hombre

Transferir y procesar datos mediante valores

Tecnologa al Servicio del Hombre

Tecnologa al Servicio del Hombre

Transferir y procesar datos mediante el uso de XML

Tecnologa al Servicio del Hombre

La pagina PHP procesa, luego imprime el resultado en formato XML

Tecnologa al Servicio del Hombre

Procesando resultados en formato HTML

var myurl = 'ejemplo03.php';

Tecnologa al Servicio del Hombre

El archive PHP, imprime el resultado con ayuda de la funcin utf8_encode()

Tecnologa al Servicio del Hombre

Se dispone de las tablas:

La categora puede ser: A, B o C

Categora del Obrero Costo Mano de Obra por prenda

Se dispone de 3 turnos: Maana, Tarde y Noche

Los obreros de la categora A que trabajaen en la tarde tienen 10% de gratificacin y