Mi primer ejemplo con AJAX

Siguiendo con la publicación del tutorial sobre AJAX, mostraremos ahora un pequeño ejemplo introductorio. Mostraremos el código y luego explicaremos el código.

Código

ejemplo1.html

  <html>

  <head>

  <title>Ejemplo1</title>

  <script language = "javascript">

  var XMLHttpRequestObject = false;

  if (window.XMLHttpRequest) {

  XMLHttpRequestObject = new XMLHttpRequest();

  } else if (window.ActiveXObject) {

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

  }

  function pedirDatos(fuenteDatos, divID){

  if(XMLHttpRequestObject) {

  var obj = document.getElementById(divID);

  XMLHttpRequestObject.open("GET", fuenteDatos);

  XMLHttpRequestObject.onreadystatechange = function(){

  if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {

  obj.innerHTML = XMLHttpRequestObject.responseText;

  }

  }

  XMLHttpRequestObject.send(null);

  } 

  }

  </script>

  </head>

  <body>

  <H1>Mostrando datos con AJAX</H1>

  <form>

  <input type = "button" value = "Mostrar mensaje" onclick = "pedirDatos('datos.txt','targetDiv')">

  </form>

  <div id="targetDiv" style="background-color:#99FF66;">

  <p>Aqu&iacute; aparecer&aacute; texto</p>

  </div>

  </body>

  </html>

A continuación escribiremos en un archivo de texto la siguiente línea:

datos.txt

Este texto aparecio usando AJAX y sin un refresh a la pagina.

Explicación

En primer lugar creamos el objeto XMLHttpRequestObject para la petición de datos. Este objeto será creado dependiendo del navegador web, la primera parte del if es para la mayoría de navegadores y la parte del if else es para Internet Explorer.

Luego está la creación de una función pedirDatos que tiene como parametros fuenteDatos y divID. Está función, como su mismo nombre lo indica, será la encargada de hacer una petición de datos, a través del parámetro fuenteDatos al servidor. Y el resultado de la petición será mostrada en la variable divID , la cual es una capa de estilos que se mostrará en el html.

Como se aprecia la mayor parte del código interesante se centra en el javascript. Así que empezaremos el tutorial con un rápido repaso de este lenguaje. Hasta el próximo artículo.

Dudas, preguntas, sugerencias por favor dejar sus comentarios.

Puedes ver el ejemplo en la sección ejemplos

Comentarios

  1. avatar Jonatan 2009-07-02 00:45:59 11 hola probe el codigo y como Akito Hayama no funciona tal cual está aunque saqué el if :
    if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)
    funciona solo en firefox pero no en internet explorer
  2. avatar Akito Hayama 2009-05-26 22:55:25 10 Hola pues aqui probando tu ejemplo y tengo algunos problemas y dudas, espero me las soluciomes:

    PROBLEMA:

    1) No me sirve el programa tal cual esta escrito alli porque simplemente no aparece el texto, simplemente no lo muestra.

    DUDA:

    1) En la funcion llamada function() /* XMLHttpRequestObject.onreadystatechange = function() */ tienes un if el cual pide que se cumplan ciertas sentencias me gustaria saber para que quieres que se cumplan y que son:

    if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200)

    en todo caso no tiene sentido el ejemplo, bueno es mas como una opinion personal, le eh quitado el 'if' y ahora si me a funcionado, bueno eso es todo, pero en si esta bien el ejemplo gracias.
  3. avatar roberto 2009-04-02 10:41:08 9 Hola excelente ejemplo lo corri y de maravilla
    pues ando buscando acerca de ajax siempre escucho de el pero nunca lo he usado espero seguir viendo ejemplos tuyos gracias
  4. avatar mangamax 2008-12-31 10:09:13 8 hola saven sus ejmplos son muy buenos realice el de la llamada de otra pagina para cargarla en un div por medio de ajax pero el form tiene un calendario echo en javascrip el cual no carga
    he buscado en todos lado para la solucion y nada
    si pudieras ayudarme
  5. avatar josue 2008-12-27 15:45:31 7 esta muy bueno el ejemplo.
  6. avatar nilton 2008-08-08 12:29:34 6 Me gusto chevre amigo ha :D
  7. avatar Ivonne 2008-08-07 08:22:31 5 Muy buen ejemplo, si me funciono :)
    Grax
  8. avatar kikaysenso 2008-05-23 06:13:45 4 creo que es mucho codigo para algo tan siemple, seria mejor hacer ese ejemplo con frames

    http://www.cosim-ti.com
    http://www.cosimhost.com -> alojamiento web
  9. avatar jesusvld 2007-04-12 17:19:10 3 Hola Miguel, que bueno que los ejemplos te hayan gustado. Sobre el código de este ejemplo, 'quizas' falta algun caracter y por ello no corre. Prueba descargando el ejemplo en <a href="http://www.ribosomatic.com/ejemplos/ajax_ejem/ajax1.zip">este enlace</a> o <a href="http://www.ribosomatic.com/ejemplos/ajax_ejem/">viendo el resultado</a>.

    En cuanto a ese mensaje del navegador... ¿qué navegador usas? Porque no recuerdo tener problemas de este tipo con nigun navegador, pues los códigos que desarrollo los pruebo antes, en Mozilla, Firefox, Netscape, Opera y IE, así que me extraña ese mensaje. Yo creo que no se debe a ajax, es mas, estoy seguro.

    Entonces prueba los enlaces que te doy y me avisas... Saludos
  10. avatar Miguel 2007-04-12 16:06:23 2 Hola, antes que nada gracias por la serie de publicaciones sobre Ajax. Habia estaod buscando por la red y estos que has posteado se me han hecho los mejores.

    Tengo un par de cuestiones, ojalá y pudieras echarme la mano. La primera, es que copié y pegué el code que aquí pones para desplegar datos simples y simplemente no corre. Por mas que presiono el botón no me puede desplegar el texto del txt.

    Al momento de abrir la página, el navegador me manda una Advertencia de Seguridad diciendo que "Si lo permite, el contenido activo como secuencias de comandos y controles ActiveX puede ser útil, pero también puede dañar el equipo".

    ¿Tiene este mensaje algo que ver con la ejecución de la página?
    ¿Cómo puedo hacer que no me aparezca este mensaje cada vez que corro una página usando Ajax?

    Gracias de antemano y saludos

Dejar un comentario