Ajax.
El 18 de Febrero de 2005, Jesse James Garrett, director de Estrategia para la experiencia del usuario y fundador de Adaptive Path, publico un articulo al cual se referia a ajax como:
Ajax: Un Nuevo acercamiento a las Aplicaciones Web
Exactamente se referia a una nueva forma de ver las aplicaciones web, ya no como sitios dinamicos, si no ademas como sitios interactivos, como la posibilidad de cargar paginas dinamicamente, sin tener que recargar toda la pagina(como un iframe), que es uno de los logros fundamentales de ajax.
Algo que debe quedar claro es que ajax no es una tencologia, un modulo de apache, un script, una extension, si no es mas bien una mezcla de tecnologias, que permiten crear aplicaciones web, increibles y dinamicas.
Modelo Clasico Modelo Ajax
Ajax viene de la palabra Asynchronous JavaScript And XML, aunque tambien se podria referise uno a este termino como AJAH, AJAP, AJAJ, AJAA, Etc.
Traduciendolo al español podremos decir que se trata de una mezcla de tecnologias:
- Uso de estándares XHTML y CSS
- Uso del Document Object Model(DOM)
- Interaccion de datos usando XML, XSLT,HTML, hasta JS y Paginas Dinamicas (ASP,PHP,CGI,PYTHON,NET, Etc).
- Y lo indispensable JAVASCRIPT, para juntar y organizar todo.
Ahora bien vayamos por partes.
¿Como demonios se usa ajax?
Para poder empezar a escribir paginas web con ajax, deberias cumplir con algunos requisitos basicos:
- Saber usar HTML
- CSS (que no es tan indispensable pero necesario)
- Javascript, basico
- y de preferencia el saber manejar minimamente algun lenguaje de programacion web como PHP, .NET, PYTHON, Etc.
Veremos a continuacion como se crea una aplicacion usando el modelo Ajax.
Primero necesitaremos hacer una pagia web que puede estar en un servidor local o remoto, esta la haremos en html.
Pagina_dinamica.html
_________________________________________________________________
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Mi primer Script con ajax</title>
<script language=”JavaScript” type=”text/javascript”>
/*<![CDATA[*/
function _Ajax()
{
}
/*]]>*/
</script>
</head>
<body>
<form action=”javascript:_Ajax();” method=”get”>
<input name=”nombre” id=”nombre” type=”text”/>
<input type=”button” name=”aceptar” value=”Aceptar” onclick=”_Ajax();”/>
</form>
<div id=”resultado”>
</div>
</body>
</html>
____________________________________________________________________
Ahora vamos por partes, primero necesitamos a gregarle a nuestra pagina web, un formulario con un action a javascript, esto es necesario porque, cuando alguien le da enter y es el ultimo o unico campo del formulario este se envia a la pagina que este, indicada en el action, por eso si, el action es un javascript, el formulario se enviara a la funcion.
<form action=”javascript:_Ajax();” method=”get”>
Despues, creamos un campo de tipo texto, con un id, recordemos que para poder implementar ajax, hay que saber identificar, la estructura basica del DOM.
<input name=”nombre” id=”nombre” type=”text”/>
Y por ultimo un input, de tipo boton.
<input type=”button” name=”aceptar” value=”Aceptar” onclick=”_Ajax();”/>
Al cual, no es necesario agregarle un id, y le asignamos, un evento on click, con el cual llamamos a una funcion, en este caso no es necesario agregarle parametros, pues no los necesita.
Recordemos que para el nombre de la funcion no es necesario que se llame _ajax, se puede llamar de cualquier forma, sin embargo es mejor nombrarla, con algun nombre que caracterize su funcionamiento.
Generamos la funcion que de momento, no tendra mas contenido que este:
function _Ajax()
{
}
Para poder hacer peticiones remotas, es necesario de el uso de un objeto, el XMLHttpRequest, que apesar de ser un estandar no esta bien implementado en algunos navegadores como, Internet Explorer, por ello es necesario hacer una funcion que genere correctamente este objeto.
function XMLHttp(){
var Object;
if (typeof XMLHttpRequest == “undefined” )
{
if(navigator.userAgent.indexOf(”MSIE 5″) >= 0)
{ Object= new ActiveXObject(”Microsoft.XMLHTTP”);}
else
{ Object=new ActiveXObject(”Msxml2.XMLHTTP”);}
}
else
{ Object=new XMLHttpRequest();}
return Object;
}
y despues lo instanciamos, de la siguiente manera,
var ajax=XMLHttp();
Pero ¿Que quiere decir el codigo que acabamos de escribir?.
Vayamos por partes, el corazon de una peticion remota, en este caso de ajax, se utiliza el objeto XMLHttpRequest, sin embargo, este objeto solo esta definido en navagadores basados en netscape, como Mozilla, Firefox, Camino, Minimo(Navegador de Mozilla para Celular).
Y en navegadores, con motor de Internet Explorer, no esta implementado este objeto nativamente, por ello es necesario crear una funcion que revise el tipo de navegador, y en base a ello nos de el objeto correcto, de lo contrario, crear una nueva instancia de un objeto XMLHttpRequest seria tan facil como:
var ajax=new XMLHttpRequest();
Ahora veamos linea por linea lo que realiza nuestro script.
function XMLHttp(){ //Con esto creams la funcion XMLHttp(no es necesario que se llame asi)
var Object; //Agregamos la variable llamada objeto
if (typeof XMLHttpRequest == “undefined” ) //revisamos si no esta difinido el objeto nativamente(navegadores tipo mozilla)
{if(navigator.userAgent.indexOf(”MSIE 5″) >= 0) //Ahora revisamos si el motor es mayor o igual a MSIE 5.0 (mayor que microsoft internet explorer 5.0)
{ Object= new ActiveXObject(”Microsoft.XMLHTTP”);}// Si es asi creamos un control activeX apartir de un objeto ActiveXObject(”Microsoft.XMLHTTP”)
else //si no , o si es menor a MSIE 5.0 creamos otro control activeX
{ Object=new ActiveXObject(”Msxml2.XMLHTTP”);} // apartir de un objeto ActiveXObject(”Msxml2.XMLHTTP”)
}
else // en cambio si el objeto estaba definido nativamente, solo lo instanciamos
{ Object=new XMLHttpRequest();} //Instancia del objeto XMLHttpRequest
return Object; // Y retornamos el objeto creado
}
Y despues solo lo instanciamos una variable apartir de la funcion como mencione al final de el codigo de la funcion.
Tambien podemos definirlo mediante operadores ternarios, y minimizar el codigo el cual quedaria de la siguiente forma:
if ( typeof XMLHttpRequest == “undefined” )
XMLHttpRequest = function(){
return new ActiveXObject(
navigator.userAgent.indexOf(”MSIE 5″) >= 0 ?
“Microsoft.XMLHTTP” : “Msxml2.XMLHTTP”
);
};
y para instanciarlo seria de la siguiente manera:
var ajax=new XMLHttpRequest();
Ahora creamos la funcion que se encargara de hacer la peticion a la otra pagina web:
function _Ajax()
{
var nombre=document.getElementById(’nombre’).value;
ajax.open(”GET”,”datos_get.php?nombre=”+nombre,true);
ajax.onreadystatechange=function(){
if(ajax.readyState==4)
{
var respuesta=ajax.responseText;
document.getElementById(’resultado’).innerHTML=respuesta;
}
}
ajax.send(null);
}
Veamos los puntos importantes de la funcion anterior:
El nombre de la funcion:
function _Ajax()
Obtenemos el valor de el campo, el cual esta referenciado por un id, esta es una de las formas mas rapidas para acceder a un elemento en especifico, el cual puede ser un div, una celda, un campo de texto, etc…;
var nombre=document.getElementById(’nombre’).value;
Nota: Esta forma de acceder al DOM, funciona bien en la mayoria de navagadores, aunque en Navegadores con motor basado en Internet Explorer, se puede utilizar una funcion alternativa.
var nombre=document.all(’nombre’).value;
Esto sucede por que en Internet Explorer 6 aun hacen referencia al DOM de nivel 1 y con el metodo getElementById se hace referencia la DOM de nivel 2.
Ahora vayamos a ver la siguiente linea de codigo:
ajax.open(”GET”,”datos_get.php?nombre=”+nombre,true);
El objeto ajax tiene una serie de metodos, que haran posible que nuestra aplicacion funcione, el primer metodo se llama open y abre una conexion entre nuestra pagina web y otra pagina(en este caso, la pagina se llama datos_get.php), este metodo usa 3 parametros,
- Metodo de envio de datos, GET o POST
- El segundo parametro es la pagina a la cual deseamos conectarnos, esta puede o no llevar datos, por ejemplo si usamos un metodo get, puede ser necesario envia variables, por este medio, si es por post, no es necesario.
- Y por ultimo un valor boleano para saber si al conexion sera Asincrona o sincrona, y se define con las palabras reservadas o valores, true o false.
Al realizar una petion ajax es necesario revisar el estado en el que esta en objeto, esto se refiere a , preguntar si la pagina que pedimos se cargo, si ajax aun esta enviando datos, esperado respuesta, o si la pagina devuelta existe, entr otros.
En este caso debemos de refererirnos al metodo onreadystatechange, de la siguiente forma:
ajax.onreadystatechange=function(){alert(”revisando el estado del objeto ajax”);}
Con este metodo nos referimos a una funcion la cual revisara el estado del objeto ajax, el cual consta de 5 estados.
- No inicializado
- Conexion establecida
- Recibiendo respuesta
- Procesando respuesta
- Finalizado
Se pude comprobar estado por estado la peticion, pero para nuestro ejemplo no es necesario, veamos la funcion a detalle:
ajax.onreadystatechange=function(){
if(ajax.readyState==4)
{
var respuesta=ajax.responseText;
document.getElementById(’resultado’).innerHTML=respuesta;
}
}
Con el metodo onreadystatechange generamos una funcion que comprueba si el estado es igual a 4, mediante el metodo ajax.readyState, (si se ha finalizado la peticion), y posteriormente creamos una variable, llamada respuesta, la cual contiene la pagina solicitada, esta respuesta puede venir de dos dormas.
ajax.responseText;
ajax.responseXML;
El primero se refiere a que la respuesta sera procesada como texto, por ejemplo si pedimos una pagina html, o php, asp, etc se puede utilizar este tipo de respuesta, sin embargo, si la pagina recibida es una XML es necesario usar la segunda opcion.
La linea de codigo que sigu, simplemente le dice a javascript que inserte la respuesta en un elemento de la apgina web referenciado por algun id, puede ser una tabla, un textarea, una celda, un div, etc.
document.getElementById(’resultado’).innerHTML=respuesta;
Esta insercion se realiza mediante el metodo innerHTML, el cual tambien trabaja de dos formas.
document.getElementById(’resultado’).innerHTML=respuesta;
document.getElementById(’resultado’).innerText=respuesta;
Con la primera opcion, la pagina que, hemos solicitado, se insertara como HTML, esto es si hemos recibido formularios, imagenes, etc; Si lo que recibimos es solo texto , es recomendable usar innerText.
El ultimo metodo usado es.
ajax.send(null);
Este metodo permite enviar varibles, cuando utilizamos el metodo post para enviar datos, si encambio se usa el metodo get, simplemente se concatenan la variables al nombre de la pagina(como lo vimos en el metodo ajax.open) .
En este caso enviaremos, null, ya que no es necesario enviar mas datos.
Ahora creamos la pagina datos_get.php
_______________________________
<?php
echo $_GET['nombre'] ;
?>
_______________________________
y listo, ya tenemos nuestra primera aplicacion con ajax, a la vez que aprendimos de donde salio todo este rollo de ajax.
Related posts:
- :: Ajax :: Creando tabs con css y javascript Bien después de que pues casi no he escrito nada,...
- : Ajax : Tecnica de uso de ajax elegante y eficaz Para el uso de Ajax nativamente, casi siempre uso las...
- [Video] Creando efectos con ajax y Dreamweaver Sin duda, ajax es una gran forma de aplicar grandes...
- [Google-Ajax] Google Ajax Libraries API, La gran biblioteca de Librerias Ajax Leyendo el blog de Andrés Nieto veo una nueva iniciativa...
- :: Javascript :: Creacion de funciones Hoy estaba pensado sobre todas las formas que hay para...
Related posts brought to you by Yet Another Related Posts Plugin.
4 Responses
[...] estuve revisado mis estadísticas vi que muchas personas deseaban que el manual de ajax estuviera en pdf, asi que lo puse en pdf para que todos los puedan descargar y revisarlo cuando [...]
[...] Generamos El objeto ajax(Si tienes dudas sobre como crearlo puedes checar el manual de Ajax con metodo GET): [...]
[...] Ahora solo nos resta hacer la parte de ajax como los vimos en el primer manual (puedes verlo desde aqui). [...]
Si los datos que se traen del datos_get.php fueran campos de formulario, al enviar ese formulario con PHP, en Firefox esos campos no se envían. En IE si. Alguien probó lo que estoy planteando?