Realizar petición Ajax en 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.
Para realizar la petición y recoger el resultado tenemos varias opciones
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;
}
Realizar la petición Ajax
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>
<script>
// 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);
}
</script>