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
