21

Con jQuery y otras bibliotecas JavaScript se pueden realizar llamadas AJAX de una manera sencilla utilizandoa algo como esto:

$.ajax({
   url: "miURl",
   method: "GET",
   data: "var1=valor1&var2=valor2",
   success: function(d) {
      // código aquí
   }
});

El problema es que en algunos proyectos me he encontrado con que añadía bibliotecas JavaScript exclusivamente para usar la función AJAX y para llamadas bastante básicas (principalmente GETs en los que no me importaba el error, sólo el resultado, si alguno)... y no tiene mucho sentido agregar un fichero de 85-300KB sólo para eso.

¿Cómo sería una función básica en JavaScript que tomase como parámetro una URL, una función que hará de success (no me importa el error) y opcionalmente el método (GET o POST), una lista de variables, y que funcionase de manera "similar" a como lo hace jQuery.ajax?

La respuesta debe ser independiente del servidor en el que se ejecute y si eso no es posible entonces debe funcionar para Apache.

3 respuestas 3

33
+250

La respuesta debe ser independiente del servidor en el que se ejecute y si eso no es posible entonces debe funcionar para Apache.

Uses la librería que uses, todo se transforma al mismo código (o parecido, pero usando los mismos estándares) y el servidor interpretará la misma petición.

Fuente: ¿Cómo funciona AJAX?.

De la parte naranja te encargas tú, el resto está predefinido en los servidores.


Voy a dividir mi respuesta en 2 líneas de tiempo ;)

Vieja escuela

Esta forma es la clásica y prácticamente multi-navegador, además de ser la estándar por muchos años. La clase que nos provee esto es la interface XMLHttpRequest.

Basta con crear un objeto XMLHttpRequest:

const xhr = new XMLHttpRequest();

Después, debemos especificar por medio del método open los siguientes parámetros:

  • Método de la petición
  • URL del recurso
  • Bandera para indicar si debe ser asíncrona (por defecto true)

Siguiendo con el ejemplo, podemos hacer lo siguiente:

xhr.open('GET', '//api.awesomemag.com/magazines');

Con esto ya establecemos los parámetro a la petición. Nos resta asociar una función para las fases de la petición del ciclo de vida de la petición.

xhr.onload = function() {
  if(xhr.readyState === 4) {
    // respuesta lista para procesar
  }
}

Una petición AJAX tiene un ciclo de vida durante su carga

Éstos son:

  • 0: Petición aún no inicializada
  • 1: Conexión establecida con el servidor
  • 2: Petición enviada
  • 3: Proceso de la petición
  • 4: Respuesta lista

Es por ésta razón que debemos actuar en la fase 4, cuando la respuesta esté lista para nosotros (salvo casos extraordinarios, como siempre, puede actuarse en otra(s) fase(s)):

if(xhr.readyState === 4) {
  // respuesta lista para procesar
}

Finalmente, enviamos la petición:

xhr.send();

Anexo: Envío de datos por POST

No es novedad que en una petición GET, no podemos enviar datos en el cuerpo de la petición; lo que hacen librerías como jQuery es leer el objetos que le pasamos a data y agruparlos por ?clave=valor para finalmente anexarlos a la URL.

Por el método POST se puede enviar datos, para lo cual disponemos de algunas opciones que menciono a continuación.

FormData

FormData es una interface que nos permite simular un submit de formulario enviando los datos que les añadamos como clave/valor, de hecho, ésta interface usa el mime multipart/form-data.

Veamos un ejemplo:

const data = new FormData();
data.append("title", "Be careful! NSA spy through smartphones backdoors!");
data.append("date", new Date().getTime());
xhr.send(data);

Forma manual

Esta forma es igual que con FormData, la diferencia es que acá lo haces de forma manual como si se tratase de parámetros get:

xhr.send('title=Be careful! NSA spy through smartphones backdoors!&date=' + new Date().getTime());

JSON

Para enviar objetos a través de XMLHttpRequest basta con hacer uso de JSON.stringify para serializar ese objeto:

xhr.send(JSON.stringify({
    title: 'Be careful! NSA spy through smartphones backdoors!',
    date: new Date().getTime()
}));

Nueva escuela

Recientemente ha sido liberada una nueva API basada en Promesas, llamada Fetch. De alguna manera, hace el código más limpio.

GET

Para realizar una petición GET, basta con pasar la URL del recurso y hacer uso de then y catch para el éxito y error respectivamente.

fetch('//api.awesomemag.com/magazines')
  .then(res => res.json())
  .then(magazines => console.log(magazines))
  .catch(err => console.log('Algo salió mal'));

Alternativamente, si esperamos recibir un JSON debemos incluir el header correspondiente:

fetch('//api.awesomemag.com/magazines', {
    headers: {
      accept: 'application/json'
    }
  })
  .then(res => res.json())
  .then(magazines => console.log(magazines))
  .catch(err => console.log('Algo salió mal'));

Pero hay otra razón por la cual ésta alternativa será muy utilizada y tiene que ver con una próxima característica de EcmaScript, se trata de Async/Await.

¿Cuál es la asociación entre Fetch y Async/Await?

Es muy simple. Async/Await hará posible esperar a que termine un procedimiento asíncrono, dándonos en ocasiones donde necesitemos éste comportamiento, una clara ventaja y naturalidad al programador backend generalmente procedural. Lo podemos entender mejor con un ejemplo:

function async getMagazines() {
  return fetch('//api.awesomemag.com/magazines');
}

// flujo natural
const magazines = await (getMagazines()).json();
// no necesitamos de promesas ni callbacks!

Algunas personas están en contra de esta nueva característica, argumentando que matan la naturaleza asíncrona de JavaScript.


Conclusiones

Propuestas en Stage 3+ prácticamente están aseguradas; en Stage 2 tienen una alta probabilidad de ser incluídas.

Actualmente disponemos de transpiladores que nos permiten usar EcmaScript 6,7 y 8 así como futuras inclusiones en el lenguaje sin perder compatibilidad entre navegadores. Una de las más famosas es Babel que transpila código moderno a EcmaScript 5 (JavaScript del 2009).

1
  • ¡Gracias!, acabo de solucionar mi problema a la vieja usanza (escuela). Gracias por la explicación tan detallada, todo un lujo. Commented el 1 abr. 2019 a las 11:29
10

1. Código

Armé esta función que sigue exactamente la misma sintaxis de jQuery.ajax y sólo hay que incluirla en el código para utilizarla. Está escrita para ser compatible tambén con navegadores más viejos.

function ajax(url, opciones){
    //parametros pasados
    opciones = opciones || {};
    if (typeof url === "object" && url !== null) {
        opciones = url; //url como param o como propiedad
        url = opciones.url;
    }
    url = url || "";
    opciones.method = opciones.method || opciones.type || "GET";
    opciones.method = opciones.method.toUpperCase();

    function crearObjetoXMLHttp() {
        //Crear el objeto para el HTTP request
        if (typeof XMLHttpRequest !== "undefined")
            return new XMLHttpRequest();
        else { //para IE6-
            const XMLHttpVersions = [
                    "MSXML2.XmlHttp.6.0",
                    "MSXML2.XmlHttp.5.0",
                    "MSXML2.XmlHttp.4.0",
                    "MSXML2.XmlHttp.3.0",
                    "MSXML2.XmlHttp.2.0",
                    "Microsoft.XmlHttp"
                ];
            const XMLHttpVersionsLength = XMLHttpVersions.length;
            for (var i = 0; i < XMLHttpVersionsLength; i++) {
                try {
                    return new ActiveXObject(XMLHttpVersions[i]);
                } catch (e) { }
            }

            throw new ReferenceError("No se puede crear una instancia para el objeto XMLHttpRequest");
        }
    }
    var http_request;
    if (typeof opciones.xhr === 'function')
        http_request = opciones.xhr()
    else
        http_request = crearObjetoXMLHttp();

    //asignamos una función que se llamara (asincronicamente) 
    //  cuando cambie el estado de la petición
    function respuestaAJAX() {
        if (http_request.readyState == (XMLHttpRequest.DONE || 4)) { // 4 significa que terminó
            var status;
            if (http_request.status >= 200 && http_request.status < 300 || http_request.status == 304) { //2xx Success
                //aca leemos la respuesta (lel recurso devuelto)
                // y se llama al callback definido por el usuario
                status = "success";
                statusAJAX(http_request, status);
                if (typeof opciones.success === "function") {
                    var response;
                    try {
                        if (opciones.dataType == "json") { //si se espera un json
                            response = JSON.parse(http_request.response);
                            response.__proto__.toString = function(){ return JSON.stringify(this) };
                        } else if (opciones.dataType == "xml") { //si se espera un xml
                            response = http_request.responseXML;
                            response.__proto__.toString = function(){ return this.innerHTML };
                        } else { //si se espera texto
                            response = http_request.response;
                        }
                        // Callback a success
                        opciones.success(response);
                        completoAJAX(http_request, status);
                    } catch (err) { //error al interpretar json o xml
                        console.error(err);
                        if (typeof opciones.error === "function") {
                            status = "parseerror";
                            errorAJAX(http_request, status);
                        }
                    }
                }
            } else if (http_request.responseURL !== "") {  //Otra respuesta (ej: 500 Internal Server Error)
                status = "error";
                statusAJAX(http_request, status);
                //lanzar error
                errorAJAX(http_request, status);
            }
        }
    }
    addEvent(http_request, "readystatechange", respuestaAJAX);


    function errorAJAX(http_request, status) {
        //llamamos al callback the "error" si se especifico
        status = status || "error";
        if (typeof opciones.error !== "undefined") {
            var statusText = (http_request.statusText  || "").replace(/^\d+ /,"");
            if (typeof opciones.error === "function")
                opciones.error = [ opciones.error ];
            var errorLength = opciones.error.length;
            for (var i = 0; i < errorLength; i++) {
                opciones.error[i](http_request, status, statusText);
            }
        }
        completoAJAX(http_request, status);
    }

    function statusAJAX(http_request, status) {
        //si se definio por ej, statusCode: { 500: function(){ /* */ } }
        if (typeof opciones.statusCode === "object" && typeof opciones.statusCode[http_request.status] === "function")
            opciones.statusCode[http_request.status](http_request, status, (http_request.statusText.replace(/^\d+ /,"")  || ""));
    }

    function completoAJAX(http_request, status) {
        //llamamos al callback the "complete" si se especifico
        if (typeof opciones.complete !== "undefined") {
            if (typeof opciones.complete === "function")
                opciones.complete = [ opciones.complete ];
            var completeLength = opciones.complete.length;
            for (var i = 0; i < completeLength; i++) {
                opciones.complete[i](http_request, status);
            }
        }
    }

    //handlers para los errores
    const ajaxErrorEvents = ["abort", "error", "timeout"];
    const ajaxErrorEventsLength = ajaxErrorEvents.length;
    for (var i = 0; i < ajaxErrorEventsLength; i++) {
        const ajaxErrorEvent = ajaxErrorEvents[i];
        addEvent(http_request, ajaxErrorEvent, function() {
            errorAJAX(http_request, ajaxErrorEvent);
        });
    }

    function addEvent(elemento, evento, callback, arg) {
        if (elemento.addEventListener) { //addEventListener
            elemento.addEventListener(evento, callback, (arg || false));
        } else if (elemento.attachEvent) { //attachEvent para IE
            elemento.attachEvent("on" + evento, callback);
        } else {
            elemento[ "on" + evento ] = callback;
        }
    }

    //timeout
    if (typeof opciones.timeout !== "undefined")
        http_request.timeout = opciones.timeout;

    //preparamos los datos a enviar
    var data = null;
    if (typeof opciones.data !== "undefined" && (opciones.data !== null || opciones.cache === false)) {
        if (opciones.processData === false) {
            data = opciones.data;
        } else if (typeof opciones.data === "string") {
            data = encodeURI(opciones.data.replace(/^\?/,""));
        } else if (typeof opciones.data === "object") {
            var dataArr = [];
            for (var key in opciones.data) {
                if (Object.prototype.hasOwnProperty.call(opciones.data, key)) {
                    dataArr[dataArr.length] = encodeURIComponent(key) + "=" 
                                            + encodeURIComponent(typeof opciones.data[key] === "string" 
                                                                 ? opciones.data[key]
                                                                 : JSON.stringify(opciones.data[key]));
                }
            }
            data = dataArr.join("&");
        }
        //Si es GET, data va en el query del uri
        if (opciones.method == "GET") {
            if (opciones.cache === false) //no usar cache
                data += (data?"?":"") + "_=" + (Date.now?Date.now():new Date().getTime());
            url += "?" + data;
            data = null;
        }
    }

    //hacemos el request
    http_request.open(opciones.method, url, true, opciones.username, opciones.password);
    //forms
    if (opciones.method == "POST" || opciones.method == "PUT")
        http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //completamos encabezados
    for (var encabezado in opciones.headers) {
        if (Object.prototype.hasOwnProperty.call(opciones.headers, encabezado))
            http_request.setRequestHeader(encabezado.replace(/(?:^([a-z])|([a-z]))([a-z0-9_]*)([A-Z]+)/g,
                                                             function(m,p1,p2,p3,p4){return (p1?p1.toUpperCase():p2)+p3+"-"+p4}), 
                                          opciones.headers[encabezado]);
    }
    //dataType y contentType
    if (opciones.dataType == "xml") {
        http_request.setRequestHeader("Accept", "text/xml; charset=UTF-8");
    } else if (opciones.dataType == "json") {
        http_request.setRequestHeader("Accept", "application/json; charset=UTF-8");
    }
    if (typeof opciones.contentType !== "undefined") { //Content-Type x usuario
        http_request.overrideMimeType(opciones.contentType);
        http_request.setRequestHeader("Content-Type", opciones.contentType);
    }
    //beforeSend
    if (typeof opciones.beforeSend === "function") {
        if (opciones.beforeSend(http_request, opciones) === false) {
            http_request.abort();
            return false;
        }
    }
    //send
    http_request.send(data);
    return true;
}

Opciones implementadas

beforeSend, cache, complete, contentType, data (sólo objetos y arrays), dataType (sólo xml y json), error, headers, method, mimeType, password, processData, statusCode, success, timeout, type, url, username, xhr.

Para ver la forma de usarlos, se puede leer la documentación de jQuery.ajax.

Ejemplos de uso

  • Obtener el contenido de una url.

    ajax({
        url: "miURL",
        method: "GET",
        data: "var1=valor1&var2=valor2",
        contentType: "text/plain",
        success: function(d) {
            console.log(d);
        }
    });
    
  • Enviar encabezados, obtener un XML y aplicarle métodos de DOM, o evaluar el error.

    ajax({
        url: "nota.xml",
        method: "GET",
        dataType: "xml",
        headers: {
            AcceptLanguage: "es-AR; q=1.0, es; q=0.9, en; 0.5, pt; 0.2",
            CacheControl: "no-cache"
        },
        success: function(d) {
            console.log(d.querySelectorAll("*"));
        },
        error: function(xhr, status, error) {
            console.warn("ERROR", xhr, status, error);
        }
    });
    
  • Enviar parámetros por POST y recibir un JSON

    ajax({
        url: "archivo.json",
        method: "POST",
        dataType: "json",
        data: {
            var1: "valor1",
            var2: "valor2"
        },
        success: function(d) {
            console.log(d.parametro[2]);
        },
        complete: function(xhr, status) {
            console.info("Se finalizo la peticion por AJAX. Status:", status);
        }
    });
    


2. Descripción de cómo funciona

2.a. Pasos básicos

Veamos los pasos esenciales de la solicitud AJAX (lo que importa de todo el código).

  1. Instanciamos XmlHttp

    var http_request = new XMLHttpRequest();
    

    En realidad se recibe como resultado de la función crearObjetoXMLHttp().

    Esta función está para la compatibilidad con IE. Si no es compatible con XMLHttpRequest, genera el objeto ActiveX MSXML2.XmlHttp.6.0 (o una versión previa que sí sea compatible).


  1. Registramos el evento onreadystatechange para gestionarlo.

    http_request.addEventListener('readystatechange', respuestaAJAX);
    

    Para cada cambio en el estado de la petición AJAX, se llamará a la función respuestaAJAX().

    Nuevamente, definimos una función para lidiar con versiones previas de IE, llamando a addEvent() para que, si no es compatible con addEventListener, use attachEvent o, en su defecto, lo asigne directamente a .onreadystatechange.


  1. Inicializamos la petición AJAX y lo enviamos.

    http_request.open(opciones.method, url);
    http_request.send(data);
    

    Donde se pasa "POST" o "GET" dentro del parámetro opciones.method. Y data puede contener el cuerpo de la petición o no (discutido más abajo).


  1. Recibimos la respuesta y se dispara la función respuestaAJAX() (registrada en el punto 2).

    La petición se realiza de forma asíncronica, y la función ajax() termina de ejecutarse antes de recibir la respuesta. Sin embargo, al recibir cambios en el estado de la petición, el evento readystatechange va cambiando y llamando a la función que asignamos.

    function respuestaAJAX() {
    

    De todos los cambios de estado, únicamente nos interesa el último, cuando la petición terminó:

        if (http_request.readyState == XMLHttpRequest.DONE) {
    

    Y, si se obtuvo una respuesta satisfactoria, ejecutamos la función definida por el usuario (pasada como callback).

            if (http_request.status >= 200 && http_request.status < 300 
                || http_request.status == 304) {
    
                opciones.success(response);
            }
    

Esto es todo lo que se necesita para una petición AJAX. El resto del código se encarga exclusivamente de modificar algunos parámetros enviados o recibidos, y de disparar eventos en caso de error.


2.b Envío de datos

Recién vimos que se podían enviar o no datos en http_request.send(data);. Éstos son pasados como parámetro dentro de las opciones como string:

ajax({
    url:  "pagina.php",
    data: "var1=valor1&var2=valor2"
});

o como un objeto:

ajax({
    url:  "pagina.php",
    data: {
        var1: "valor1",
        var2: "valor2"
    }
});


Si se pasan como string, se codifica con encodeURI() y lo asignamos:

if (typeof opciones.data === "string") {
    data = encodeURI(opciones.data);
}

Y si se pasan como objeto, se codifica cada clave y valor con encodeURIComponent():

else if (typeof opciones.data === "object") {
    var dataArr = [];
    for (var key in opciones.data) {
        dataArr[dataArr.length] = encodeURIComponent(key) + "=" + encodeURIComponent(opciones.data[key]);
    }
    data = dataArr.join("&");
}


Por último, si estamos realizando una petición por POST, los datos se envían directamente en el cuerpo de la petición, en la forma var1=valor1&var2=valor2 y se configura el encabezado de Content-Type:

http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

Pero si es una petición por GET, los datos se agregan directamente en la URL, quedando por ejemplo pagina.php?var1=valor1&var2=valor2.

if (opciones.method == "GET") {
    url += "?" + data;
    data = null;
}


2.c Análisis de la respuesta

A la función se le puede pasar el parámetro dataType con el valor "json" o "xml" para especificar el tipo de datos recibido en la solicitud, haciendo que se procese la respuesta con json.PARSE() o directamente obteniendo el XMLHttpRequest.responseXML.

if (opciones.dataType == "json") { //si se espera un json
    response = JSON.parse(http_request.response);
    response.__proto__.toString = function(){ return JSON.stringify(this) };
} else if (opciones.dataType == "xml") { //si se espera un xml
    response = http_request.responseXML;
    response.__proto__.toString = function(){ return this.innerHTML };
}


Por otro lado, si http_request.status no devuelve un valor en el rango de 200 a 299 (o 304), significa que el servidor respondió con un error (por ejemplo, "404 Not Found"). En ese caso, si se le pasó una función (o varias) como parámetro de error, se ejecuta como callback.

if (typeof opciones.error !== "undefined") {
    var statusText = (http_request.statusText  || "").replace(/^\d+ /,"");
    if (typeof opciones.error === "function")
        opciones.error = [ opciones.error ];
    var errorLength = opciones.error.length;
    for (var i = 0; i < errorLength; i++) {
        opciones.error[i](http_request, status, statusText);
    }
}


3. Alternativa más moderna

Otra opción es utilizar fetch()experimental, mucho más práctica y sencilla de utilizar. Esta opción está muy bien descripta en la respuesta de MitsuG. Sin embargo, aún no es compatible con IE ni Safari.

2

Al día de esta respuesta la API Fetch esta soportada por los navegadores en su gran mayoría como lo demuestra la imagen siguiente

introducir la descripción de la imagen aquí

Soporte de Fetch

EJEMPLO PETICIÓN GET

Tienes una URL almacenada dentro de una variable de este modo

const url = `https://jsonplaceholder.typicode.com/posts`

Si hacemos lo siguiente

const url = `https://jsonplaceholder.typicode.com/posts`


fetch(url)
   .then(data => console.log(data))

Obtenemos como resultado lo siguiente

[object Response] { arrayBuffer: function arrayBuffer() { [native code] }, blob: function blob() { [native code] }, body: [object ReadableStream] { ... }, bodyUsed: false, clone: function clone() { [native code] }, formData: function formData() { [native code] }, headers: [object Headers] { append: function append() { [native code] }, delete: function delete() { [native code] }, entries: function entries() { [native code] }, forEach: function forEach() { [native code] }, get: function get() { [native code] }, has: function has() { [native code] }, keys: function keys() { [native code] }, set: function set() { [native code] }, values: function values() { [native code] } }, json: function json() { [native code] }, ok: true, redirected: false, status: 200, statusText: "", text: function text() { [native code] }, type: "cors", url: "https://jsonplaceholder.typicode.com/posts" }

Ahora por medio de la API Fetch pa procesamos de este modo mediante promises

fetch(url)
   .then(data => data.json())
   .then(data => {
  console.log(data)
})

MANEJANDO LOS ERRORES AL MOMENTO DE HACER LA PETICIÓN

Podemos recibir y reconocer los errores de la petición por medio de: catch(error)

fetch(url)
   .then(data => data.json())
   .then(data => console.log(data))
   .catch(error => console.log(error))

MOSTRANDO EL ERROR EXACTO

Si queremos mostrar el error exacto por el cual no se procesó la petición GET podemos añadir al error el acceso a message que contiene dicho mensaje

fetch(url)
   .then(d => data.json())
   .then(data => console.log(data))
   .catch(error => console.log(error.message))

Como notas he cambiado intencionalmente el nombre de data por d solo en una parte del código por lo cual el mensaje será el siguiente

"data is not defined"

PASANDO PARÁMETROS A LA PETICIÓN GET

Pasar parámetros a nuestra petición GET lo podemos hacer del modo siguiente

const datos = new URLSearchParams({
      id: 2
})

La interfaz URLSerachParams permite trabajar con parámetros pasados a URLs, se pasa un objeto donde la clave es el referente al nombre de la clave en el json que estamos obteniendo, el valor 2 es el valor dinámico que aplicaremos para filtrar de toda la data que solo nos muestre aquel registro que tenga el id 2

COMPONIENDO A LA URL CON PARÁMETROS

const url = `https://jsonplaceholder.typicode.com/posts?${ datos.toString() }`

Hacemos uso de toString por que devuelve una cadena de texto que contiene el parámetro a consultar usado en una URL.

USO DE ASYNC & AWAIT

Con la implementación de estas 2 características entedemos que una función asíncroma que contiene un elemento precedido por await se va a pausar en su ejecución hasta obtener el resultado satisfactorio de la promise

El primer ejemplo del uso de fetch manejado mediante promises ahora luciría así

const url = `https://jsonplaceholder.typicode.com/posts`

let fetchPosts = async() => {
  try{
    const response = await fetch(url)
    const data = await response.json()
    console.log(data)
  }catch(error){
    console.log(error.message)
  }
}

fetchPosts()

ACLARACIONES

  • Los errores los manejamos a través de un bloque try{....} catch(error){....}
  • Igualmente podemos acceder al mensaje de error al procesar la petición por medio de error.message

PASANDO UN PARÁMETRO A UN CONSULTA

const datos = new URLSearchParams({
      id: 2
})

const url = `https://jsonplaceholder.typicode.com/posts?${ datos.toString() }`

let fetchPosts = async() => {
  try{
    const response = await (await fetch(url)).json()
    console.log(response)
  }catch(error){
    console.log(error.message)
  }
}

fetchPosts()

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.