Tutorial AJAX Español - Parte 1

AJAX – W3Schools Tutorial
Traducido por Héctor Hugo Alpízar Ceseña
1. Introducción
1.1.¿Qué deberíamos saber ahorita?
Antes de entender esta herramienta debemos entender los siguientes lenguajes:
• HTML/XHMTL
• JavaScript
1.2.AJAX = JavaScript y XML asíncrono. (Asynchronous JavaScript and
XML).
AJAX no es un lenguaje de programación, pero es una técnica para la creación rápida, mejor, y mas
interactiva para aplicaciones web.
Con AJAX, JavaScript puede comunicarse directamente con el servidor, con el objeto de
XMLHttpRequest. Con este objeto, un JavaScript puede intercambiar datos con el servidor web, sin
necesidad de estar recargando la página.
AJAX usa una transferencia de datos asíncronas (peticiones HTTP) entre el explorador y el servidor
web, permitiendo que las paginas hacer peticiones con pequeños bits de información desde el
servidor en vez de una pagina entera.
Las técnicas de AJAX hacen aplicaciones para Internet mas pequeñas, mas rápidas y mas
amigables.
1.3.AJAX esta basado en los estándares de Internet
AJAX esta basado en los siguientes estándares web:
• JavaScript
• XML
• HTML
• CSS
Nota. Las aplicaciones AJAX son independientes de plataforma y de exploradores.
1.4.AJAX esta destinado a la mejora de las aplicaciones de internet
Las aplicaciones de internet tienen muchos beneficios sobre una aplicación de escritorio; pueden
alcanzar una larga audiencia, y es mas fácil de instalar y hacer soporte, y mas fáciles de desarrollar.
Sin embargo, las aplicaciones de internet no son tan ricas y amigables al usuario como las
aplicaciones tradicionales de escritorio.
Con AJAX, las aplicaciones de internet pueden ser más ricas y amigables al usuario.
2. AJAX XMLHttpRequest
2.1.AJAX usa el objeto XMLHttpRequest
Para obtener o mandar información a una basa de datos o a un archivo en un servidor con
un tradicional JavaScript, por lo general se crea una forma en HTML, y el usuario hace clic en el
botón de Submit para obtener y/o enviar la información, esperando a que el servidor responsa,
entonces una nueva pagina aparece con los resultados. Porque el servidor regresa una nueva
pagina cada vez que el usuario hace un submit, tradicionalmente las aplicaciones web pueden
ejecutarse muy lentamente y tienden a ser menos amigables con el usuario.
Con AJAX, su JavaScript comunica directamente con el servidor, a través del objeto
XMLHttpRequest.
Con el objeto XMLHttpRequest, una página web puede hacer peticiones, y obtener
respuesta de un servidor web – sin la necesidad de recargar la pagina. El usuario se mantendrá en
la misma página, y el o ella no se dará cuenta de las peticiones de la página, o mandara datos al
servidor por la de manera discreta.
2.2.El objeto XMLHttpRequest
Usando el objeto XMLHttpRequest, un desarrollador web puede actualizar una pagina con
datos desde el servidor después de la pagina ha sido cargada.
AJAX se hizo popular en el 200 por Google (con Google Suggest).
Google Suggest esta usando el objeto XMLHttpResquest para crear un interfaz web muy
dinámica: Cuando tu empiezas a escribir el caja de texto de búsqueda de google, un JavaScript
manda las en las cajas al servidor y regresa una lista de sugerencias.
El objeto XMLHttpRequest es soportado en la mayoría de los exploradores (Internet Explorer,
Firefox, Chrome, Opera y Safari).

2.3.Tu primera aplicación AJAX

Para entender como funciona AJAX, crearemos una pequeña aplicación AJAX.
Primero vamos crear una forma estándar HTML con dos campos de entrada: Name y Time. El
campo Name será llenada por el usuario y el campo Time será llenado con AJAX.
El archivo HTML será nombrado “testAjax.htm”, y el código es siguiente (nótese que no hay
botón de submit).

<html>
<body>

<form name="myForm">

Name: <input type="text" name="username" />
Time: <input type="text" name="time" />

</form>

</body>

</html>
2.4.AJAX – Soporte de los exploradores
La piedra angular de AJAX es el objeto XMLHttpRequest.
Todo los nuevos exploradores usan el constructor del objeto XMLHttpRequest de JavaScript para
crearlo (IE5 e IE6 usa un ActiveXObject).
Vamos a actualizar nuestro archivo “textAjax.htm” con un JavaScript que crea un objeto
XMLHttpResquest:

<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;

if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new
XMLHttpRequest();
}

else if (window.ActiveXObject)
{
code for IE6, IE5
//
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}
else

{

alert("Your browser does not support XMLHTTP!");
}
}
</script>


Name: <input type="text" name="username" />
Time:
<input type="text" name="time" />
</form>

</body>

</html>

Ejemplo explicado:
1. Se crea una variable llamada xmlhttp para guardar el objeto XMLHttpRequest.
2. Se intenta crear el objeto XMLHttpRequest con xml=new XMLHttpRequest().
3. Si falla, intenta xmlhttp=new ActiveXObject(“Microsoft.XMLHttp”). Esto es solo para el
IE6 e IE5.
4. Si también falla, significa que el usuario tiene un explorador muy desactulizado, y
obtendrá un mensaje alerta diciendo que el explorador no soporta XMLHttp.

3. Mas acerca del objeto XMLHttpRequest
Antes de mandar datos al servidor, veremos tres importantes propiedades del objeto
XMLHttpRequest.
3.1.La propiedad del estado de listo (onreadystatechange)
Despues de hacer una petición al servidor, necesitamos una función que reciba los datos del
retorno.
La propiedad de onreadystatechange almacena la función que procesara la respuesta desde un
servidor. La función es almacenada en la propiedad para ser llamada automáticamente.
El siguiente código prepara la propiedad de onredystatechange y almacena un función vacia.

xmlhttp.onreadystatechange=function()
{
// We are going to write some code here
}

3.2.La propiedad de estado de listo (readyState).
La propiedad readyState guarda el estado de respuesta del servidor.
Cada vez que un readyState cambia, la función guardada en a propiedad de
onreadystatechange será ejecutada.
Los posibles valores para el readyState son:
Estado Descripción
0 La petición no ha sido inicializada
1 La petición ha sido iniciada
2 La petición ha sido enviada
3 La petición ha sido procesada
4 La petición esta completa
Agrega una sentencia If a la función de onreadystatechange para probar si la respuesta ha
sido completada.

{

if(xmlhttp.readyState==4)
{
// Get data from the server's response
}
}
3.3.La propiedad de texto de respuesta(responseText)
Los datos enviados por el servidor pueden ser retraídos con la propiedad responseText.
Ahora, queremos asignar el valor al campo de entrada Time igual a responseText.

{

{

document.myForm.time.value=xmlhttp.responseText;
}

}

4. AJAX – Peticion al servidor

4.1.AJAX – Mandando la petición al servidor
Para mandar la petición hacia el servidor, usamos lo métodos open() y send().
El método open() toma tres argumentos. El primer argumento define cual es el método cuando
mandamos la petición (GET o POST). El segundo argumento especifica el URL del script del lado
del servidor. El tercer argumento especifica que la petición debe ser manejada asíncronamente.
El método send() manda la petición hacia el servidor. Si asumimos que los archivos HTML y PHP
están el mismo directorio, el código seria:

xmlhttp.open("GET","time.php",true);
xmlhttp.send(null);

Ahora debemos decidir cuando la función de AJAX se debe ejecutar.
Esta función se ejecutara cada vez que el usuario escribe algo en el campo de entrada Name:

Name:
<input type="text" name="username" onkeyup="ajaxFunction();" />

</form>
Nuestro código deberá verse ahora de la siguiente manera:
<html>

<body>

<script type="text/javascript">

function ajaxFunction()
{

var xmlhttp;
if (window.XMLHttpRequest)

{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
}
{
{
document.myForm.time.value=xmlhttp.responseText;
}
}

xmlhttp.open("GET","time.php",true);
xmlhttp.send(null);

}

</script>

Name: <input type="text" name="username" onkeyup="ajaxFunction();" />

</form>

</body>

</html>

4.2.AJAX Script PHP del lado del servidor
Ahora vamos a crear un script para el lado del servidor que muestre la fecha actual.
La propiedad reponseText almacena los datos que son regresados por el servidor. Aquí es
donde queremos que nos regrese la hora actual.

<?php
$tiempo = localtime(time(),true);
$ampm = "a.m.";
if ($tiempo['tm_hour'] >= 12)
{
$hora = $tiempo['tm_hour']-12;
$ampm = "p.m.";
}
$min = $tiempo['tm_min'];
$sec = $tiempo['tm_sec'];
echo $hora.":".$min.":".$sec." ".$ampm;
?>

Los scripts pueden ser PHP, PERL, ASP o JSP.

5. Sugerencias AJAX
AJAX puede ser usada para crear aplicaciones más interactivas. El siguiente ejemplo de AJAX
demostrara como comunicarse con el servidor web mientras damos entradas a una forma HTML.
5.1.Código HTML

<html>
<head>
<title>AJAX : Ejemplo 2</title>
<script type="text/javascript" src="clienthint.js"></script>
</head>

<body>
<h1>AJAX : Ejemplo 2</h1>

<form>
Primer nombre : <input type="text" id="txt1"
onkeyup="showHint(this.value)" />

</form>

<p>Sugerencias : <span id="txtHint"></span></p>

</body>

</html>
Aquí tenemos una forma con un campo de entrada de datos de tipo texto con un id llamado
“txt1”.
Dentro del evento de onkeyup se definirá el método showHint. Sera llamado cada vez que se
presione una tecla.
El campo span con id txtHint será usado para mostrar los datos mandado por el servidor cada
vez que se presione una tecla dentro del campo de texto txt1.

5.2.Código JavaScript – Función showHint()

var xmlhttp;

function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;

}
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support XMLHTTP!");
return;
}

var url="gethint.asp";
url=url+"?q="+str;

url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

Esta función se ejecuta casa vez que un carácter es escrito dentro del campo de texto de archivo
HTML. Si la cantidad de caracteres en el campo de texto es mayor a cero, showHint ejecuta el
siguiente algoritmo.
• Define el archivo o URL para enviar la información al servidor.
• Agrega los parámetros (q) al URL con el contenido del campo de texto.
• Agrega un numero al azar para prevenir al servidor de un archivo cache.
• Crea un objeto XMLHTTP, y le dice al objeto que ejecute una función llamada
stateChange cuando el cambio se haga.
• Abre el objeto XMLHTTP con el URL dado.
• Manda una petición HTTP al servidor.

5.3.Código JavaScript – Función GetXmlHttpObject()
La función showHint en un punto llama a la función GetXmlHttpObject.
El propósito de esta función es la de resolver el problema de crear diferentes objetos XMLHTTP de
diferentes exploradores:
function
GetXmlHttpObject()
{
if \ (window.XMLHttpRequest)
{
code for IE7+, Firefox, Chrome, Opera, Safari
//
return new XMLHttpRequest();

}
if (window.ActiveXObject)
{
code for IE6, IE5
//
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;

}

5.4.Código JavaScript – Función stateChanged()

function stateChanged()
{
if (xmlhttp.readyState==4)

{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

}
}
La función se ejecuta cada vez que el estado del objeto XMLHTTP cambia.
Cuando el estado cambia a 4, el contenido de la zona txtHint muestra la respuesta del servidor.
Todo este código de JavaScript será incluido en un archivo llamado clienthint.js y se declara en la
parte de etiqueta HEAD en tu archivo HTML.

5.5.Codigo PHP
Con este código se procesa la petición del cliente y el servidor regresa la respuesta.

<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//get the q parameter from URL

$q=$_GET["q"];

//lookup all hints from array if length of q>0
if (strlen($q) > 0)

{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];

}
else
{
$hint=$hint." , ".$a[$i];
}
}
}

}

// Set output to "no suggestion" if no hint were found
or to the correct values
//
if ($hint == "")
{
$response="no suggestion";
}
else

{
$response=$hint;
}

//output the response

echo $response;
?>

Prácticamente el archivo PHP recibe la petición desde el JavaScript, hace el proceso de datos con
los parámetros recibidos, y cuando el objeto XMLHTTP esta listo (o cuando
xmlhttp.readyState==4), muestra la respuesta (echo $response;).
Referencias
W3Schools – http://w3schools.com/ajax/default.asp

Tutorial AJAX Español - Parte 1

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tutorial AJAX Español - Parte 1

Enviado por

Direitos autorais:

Formatos disponíveis

AJAX – W3Schools Tutorial

Você também pode gostar