Métodos Ajax JavaScript

Métodos Ajax JavaScript

Métodos Ajax JavaScript

En este tutorial aprenderemos cómo usar el objeto XMLHttpRequest para hacer peticiones mediante Ajax en JavaScript. Veremos ejemplos con texto, xml y json.

Funciones básicas para hacer una petición Ajax mediante el lenguaje JavaScript

Función para obtener el objeto XMLHttpRequest

function inicia_ajax() {
  //Utiliza un método distinto según el navegador
  if (window.XMLHttpRequest) {
    return new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
}

Función que hace la petición al servidor y recoge el resultado devuelto.

  • Opción 1 (Texto)

El servidor devuelve un archivo de texto plano

//Recibe 2 parámetros, los datos que se enviarán al servidor
//y el id del div donde se imprimirá el resultado
function consulta_ajax(datos, div) {
  //Obtenemos el objeto XMLHttpRequest
  var objeto_ajax = inicia_ajax();
  //Petición al servidor por GET, al archivo datos_clientes.php
  //Se envían los datos y por último "true" indica que la conexión será asíncrona
  objeto_ajax.open("GET", "datos_clientes.php?datos=" + datos, true);
  //Al recibir respuesta se ejecuta la función anónima
  objeto_ajax.onreadystatechange = function () {
    //Si readyState es igual a 4 y status es igual a 200 se guarda el resultado devuelto
    if(objeto_ajax.readyState == 4 && objeto_ajax.status == 200) {
      //Se recoge el resultado con responseText
      var datos_devueltos = objeto_ajax.responseText;
      //Llamamos a la función que imprimirá el resultado en el div
      imprime_resultado(datos_devueltos, div);
    }
  }
  objeto_ajax.send(null);
}

Función para imprimir el resultado de la petición al servidor

//Recibe los datos y el id del div donde se va a imprimir
function imprime_resultado(datos_devueltos, div) {
  document.getElementById("div").innerHTML = datos_devueltos;
}
  • Opción 2 (Xml)

El servidor devuelve un archivo XML

//Recibe 2 parámetros, los datos que se enviarán al servidor 
//y el id del div donde se imprimirá el resultado 
function consulta_ajax(datos, div) { 
  //Obtenemos el objeto XMLHttpRequest 
  var objeto_ajax = inicia_ajax(); 
  //Petición al servidor por GET, al archivo datos_clientes.php 
  //Se envían los datos y por último "true" indica que la conexión será asíncrona 
  objeto_ajax.open("GET", "datos_clientes.php?datos=" + datos, true); 
  //Al recibir respuesta se ejecuta la función anónima 
  objeto_ajax.onreadystatechange = function () { 
    //Si readyState es igual a 4 y status es igual a 200 se guarda el resultado devuelto 
    if(objeto_ajax.readyState == 4 && objeto_ajax.status == 200) { 
      //Se recoge el resultado con responseXML
      var datos_xml= objeto_ajax.responseXML; 
      //Llamamos a la función que imprimirá el resultado en el div 
      imprime_resultado(datos_xml, div); 
    } 
  } 
  objeto_ajax.send(null); 
}

Para imprimir el resultado hay que acceder a los datos que contiene el archivo Xml. Para ello debemos conocer los nombres de las etiquetas

Ejemplo de archivo xml devuelto:

<registro>
  <cliente>
    <codigo>0008</codigo>
    <nombre>Juan Andrés</nombre>
    <telefono>543454345</telefono>
  </cliente>
</registro>

Accedemos a las etiquetas xml e imprimimos el resultado

//Recibe los datos y el id del div donde se va a imprimir 
function imprime_resultado(datos_xml, div) { 
  //Guardamos el elemento raíz del documento
  var registro = datos_xml.getElementsByTagName("registro")[0];
  //Guardamos el primer cliente
  var codigo = registro.getElementsByTagName("cliente")[0];
  //Guardamos el contenido de la primera etiqueta codigo
  var codigo = cliente.getElementsByTagName("codigo")[0].childNodes[0].nodeValue;
  var nombre = cliente.getElementsByTagName("nombre")[0].childNodes[0].nodeValue;
  var telefono = cliente.getElementsByTagName("telefono")[0].childNodes[0].nodeValue;
  //Por último imprimimos el resultado en el div
  document.getElementById(div).innerHTML = "Código: " + codigo + ", Nombre: " + nombre + ", Teléfono: " + telefono;
}
  • Opción 3 (Json)

El servidor devuelve un archivo Json

//Recibe 2 parámetros, los datos que se enviarán al servidor 
//y el id del div donde se imprimirá el resultado 
function consulta_ajax(datos, div) { 
  //Obtenemos el objeto XMLHttpRequest 
  var objeto_ajax = inicia_ajax(); 
  //Petición al servidor por GET, al archivo datos_clientes.php 
  //Se envían los datos y por último "true" indica que la conexión será asíncrona 
  objeto_ajax.open("GET", "datos_clientes.php?datos=" + datos, true); 
  //Al recibir respuesta se ejecuta la función anónima 
  objeto_ajax.onreadystatechange = function () { 
    //Si readyState es igual a 4 y status es igual a 200 se guarda el resultado devuelto 
    if(objeto_ajax.readyState == 4 && objeto_ajax.status == 200) { 
      //Se recoge el resultado con responseText
      var datos_json= objeto_ajax.responseText; 
      //Llamamos a la función que imprimirá el resultado en el div 
      imprime_resultado(datos_json, div); 
    } 
  } 
  objeto_ajax.send(null); 
}

Ejemplo de archivo Json devuelto:

{
  "registro": {
    "cliente": [
      {
        "codigo": "008",
        "nombre": "Sergio Díaz",
        "telefono": "765765765"
      }
    ]
  }
}

Accedemos a los datos del archivo Json

//Recibe los datos y el id del div donde se va a imprimir 
function imprime_resultado(datos_json, div) { 
  //Ejecutamos la función para convertir el archivo Json en un objeto JavaScript
  var datos = JSON.parse(datos_json);
  //Guardamos el codigo
  var codigo = datos[0].codigo;
  var nombre = datos[0].nombre;
  var nombre = datos[0].telefono;
  //Por último imprimimos el resultado en el div
  document.getElementById(div).innerHTML = "Código: " + codigo + ", Nombre: " + nombre + ", Teléfono: " + telefono;
}

Por último necesitaremos llamar a la función consulta_ajax y pasarle los parámetros.

Ejemplo con un botón:

//Código html del botón
<input type="button" onclick="pedir_datos()" value="Pedir datos">
//Código del div donde se imprimirá el resultado
<div id="resultado"></div>
//Función que se ejecuta al pulsar el botón
function pedir_datos() {
  var datos = "553";
  var div = "resultado";
  //Llamada a la función consulta_ajax
  consulta_ajax(datos, div);
}

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
Ir a la barra de herramientas