06 Dec 08 Ajax de manera simple con Williams Mendez :P

Este es un pequeño tutorial que muestra de manera sencilla como funciona Ajax o mejor dicho, como hacerlo funcionar…

Todos deben saber que las etiquetas HTML aceptan atributos, unas aceptan unos atributos y otras otros atributos…el caso es que todos aceptan el atributo “id”, y es así como identificamos una “parte” en específico de nuestra web.

Lo más común en el uso de Ajax es actualizar el contenido de un “div”, por lo cual crearemos un “div” vacio, el cual llenaremos al pulsar un botón. En este caso, escribiré todo el codigo(incluyendo todo el javascript) y luego explicaré como funciona. Y aquí vamos:

Ajax.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Mi primer Ajax</title> <script type="text/javascript">


function GetXmlHttpObject(){

var xmlHttp=null;

try{

xmlHttp=new XMLHttpRequest();

}catch (e){

try{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

}catch (e){

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}
function AjaxRequest(method,url,xmlHttp,Params){

var query_string = constructURL(Params);

xmlHttp.open(method,url,true)

xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xmlHttp.send(query_string);

return xmlHttp;

}

function  constructURL(params){

var URL = '';

var length = 0;

for(i in params){

URL += i+'='+params[i]+’&’;

}

var ran = Math.random()* 500;

URL+= ran;

return URL;

}
function LlenarDiv(){

var   params = null;

var xmlHttp = GetXmlHttpObject();

xmlHttp = AjaxRequest(”POST”,”texto.txt”,xmlHttp,params);

var response = null; xmlHttp.onreadystatechange=function(){ if (xmlHttp.readyState==4){ if(xmlHttp.status==200) { //Aqui es donde seleccionamos nuestro “div” y cambiamos el contenito HTML //que contiene por la respuesta del servidor, o sea, por el texto que devuelve document.getElementById(’div_vacio’).innerHTML = xmlHttp.responseText; } } } return false; } </script></head>


<body >
<div id="MyDiv">
<input type="button" name="mi_boton"  value="Llamada Ajax" onclick="LlenarDiv();"/>
</div>

<div id="div_vacio"> </div> </body> </html>

Luego creamos un simple archivo de texto llamado “texto.txt”, en el mismo directorio donde esta nuestro archivo Ajax.html(para este caso):

texto.txt
Esta es mi primera experiencia con Ajax. De ahora en adelante hare las cosas bien :P...
Bueno ya se me hace tarde y tengo que ponerme a estudiar…así que no podré dar detalles sobre esto…

La idea es que al pulsar el boton, se da un evento y aprovechamos el evento para llamar la funcion LlenarDiv() escrita en Javascript. En esta funcion creamos un objeto xmlHttp, que es diferente para Microsoft Internet Explorer y para el resto de los navegadores sobre el planeta :S:S( que porqueria :S).

Luego de crear el objeto con la URL y el metodo, empezamos a recibir diferentes estados de la peticion, y pues cuando la petición nos devuelve un estado 200, todos sabes que es porque se ha encontrado una web valida, de manera que esto que nos devuelve el servidor lo colocamos dentro del DIV que hemos elegido para nuestro EFECTO AJAX :P…

Lamento tener que marcharme, si hay dudas, pues dejenme un comentario…see ya..

Tags: Ajax, Desarrollo Web, Diseño web, DOM, Software

Filed in General

06 Dec 08 Ajax de manera simple con Williams Mendez :P

Leave a Comment

Bienvenidos a mi Blog!

Recent Posts

Google Talk

David Tavarez

Tags

VivaPHP

GnDx

Frases