• Abr
  • 14

Hola Mundo en AJAX

Escrto por pak0

Nuestro primer codigo en AJAX, como en la mayoria de los lenguajes comenzaremos con el famoso "Hola Mundo". Pero antes vamos a comprender un poco que es AJAX; son siglas de "Asynchronous JavaScript and XML". Es decir AJAX no es una nueva tecnogolia como tal, es la combinación de varias tecnologias.

Para explicar de una manera sencilla y que cualquiera pueda entender, lo que AJAX hace es trabajar asincronicamente, es decir independiente de la comunicacion con el servidor. Los usuarios ya no tendran que esperar a que se realizen una serie de "procesos" entre tu web y el servidor, si no que esto se hara "background".Esto es la posibilidad de hacer peticiones al servidor sin tener que volver a cargar la página.

Bueno despues de haber tratado de explicar lo que es AJAX.. vayamos directo a nuestro primer ejemplo, es decir el famoso Hola Mundo, posiblemente no se note en un ejemplo como este la utilidad, pero será para comenzar a entender como se inicia una aplicacion AJAX.

Lo primero que debemos hacer para CUALQUIER aplicacion AJAX que vayamos a desarrollar es realizar la peticion HTTP al servidor. Para esto debemos crear una instancia de una clase, Para Internet Explorer(>v6) se hace uso del objeto ActiveX, el cual en javascript es llamado mediante: XMLHTTP. Para los demas navegadores haremos uso del objeto XMLHTTPRequest. Entonces la primera parte de nuestro codigo queda asi:

if(window.XMLHttpRequest){
MiPeticion = new XMLHttpRequest();
}
else if(window.ActiveXObject){
MiPeticion = new ActiveXObject("Microsoft.XMLHTTP");
}

Esta es la manera mas sencilla de crear las instancias.

Muy bien ahora que ya las creamos lo que hay que hacer es crear la funcion que procesa la respuesta del servidor, es decir la que nos indicara cuando ya este cargado nuestro contenido o lo que sea que estemos solicitando. Para crear esta usa la propiedad onreadystatechange que como su nombre lo indica sera la encargada de saber si lo solicitado ya ha sido cargado, entonces la siguiente parte de nuestro codigo queda asi:

MiPeticion.onreadystatechange = function(){
   if(MiPeticion.readyState == 4) {
     if(MiPeticion.status == 200) {
        alert(MiPeticion.responseText);
     }
   }
 }
 


Como se dan cuenta hicimos uso de dos nuevas propiedades que son readyState y status, se preguntarán que significa que se comparen con esos valores, pues justo a eso voy xD. La propiedad readyState puede tener 5 valores (0, 1, 2, 3, 4).
0 - No inicializado, es el valor por defecto. El metodo open no se ha llamado.
1 - El metodo open() ha sido satisfactoriamente llamado.
2 - Aun no se recibe la información, pero ya se llamo a send.
3 - Recibiendo la informacion. (Receiving)
4 - Completado, responseText tiene todos los datos pedidos. (Loaded)

La propiedad status==200 significa que ha habido una conexion exitosa.


Ahora realizaremos la petición al servidor:

MiPeticion.open('GET', 'HMAJAX.txt', true);
MiPeticion.send(null);

Mediante el metodo open() estamos creando la peticion que antes mencionamos es decir la HTTP.Y el tipo de petición es del tipo GET, es decir que no estamos enviando parametros. Despues el archivo que queremos cargar en este caso HMAJAX.txt, y despues true que estamos aceptando la peticion que abriremos que sera asincronica.

Ya que creamos la petición HTTP se envia al servidor mediante send(). El metodo send permite enviar varialbes, y eso es mediante el tipo de peticion POST, en este caso usaremos null ya que no es necesario enviar más datos.

Por ultimo simplemente cargamosla funcion:
window.onload = NuestraFuncionCompleta;


Entonces toda la función debe quedar asi:

function MiPrimeraFuncionAjax() {
if(window.XMLHttpRequest){
MiPeticion = new XMLHttpRequest();
}
else if(window.ActiveXObject){
MiPeticion = new ActiveXObject("Microsoft.XMLHTTP");
}
 
  MiPeticion.onreadystatechange = function(){
   if(MiPeticion.readyState == 4) {
     if(MiPeticion.status == 200) {
        alert(MiPeticion.responseText);
     }
   }
 }
 
MiPeticion.open('GET', 'HMAJAX.txt', true);
MiPeticion.send(null);
 
  
}
 
MiPrimeraFuncionAjax();



Bueno eso es todo por hoy, espero les sirva de algo esta explicación, trate de ser detallado. Saludos xD.




Por perfect-basements el Domingo 23 de Octubre de 2022 a las 02:15:43
Thanks , I have recently been looking for information approximately this subject for ages and yours is the
best I have found out so far. But, what in regards
to the bottom line? Are you sure concerning the source?

Escribe tu comentario