Skip to main content
se añadieron 10 caracteres en el cuerpo
Origen Enlace
Layer
  • 6.1k
  • 2
  • 11
  • 32
function ajax(method = "GET", url, body){

    return new Promise((res, rej) =>{
        const xmlh = new XMLHttpRequest();
        const data = new FormData();

        if(body){
            for(let prop in body){
                if(prop === "data"){
                    for(let bodyProp in body[prop]){
                        data.append(bodyProp, body[prop][bodyProp]);
                    }
                }else if(prop === "headers"){
                    for(let headerP in body[prop]){
                        xmlh.setRequestHeader(headerP, body[prop][headerP]);
                    }
                }
            }
        }

        xmlh.open(method, url);
        xmlh.onload  = e => res(e.response);
        xmlh.onerror = e => rej(e);

        if(method.toUpperCase() === "GET"){
            xmlh.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        }

        if(method.toUpperCase() === "GET"){
            xmlh.send();
        }else{
            xmlh.send(data);
        }
        
    });

}

//Ejemplo de uso:
ajax("GET", "http://google.com", 
    {
        data: {
            name: "your name",
            gender: "male",
            age: 18,
            children: false
        }
    }
).then(res =>{
     //aqui atrapas la respuesta de ajax (res).
}).catch(e =>{
     //Aqui atrapas el posible error que te devuelva ajax.
});
function ajax(method = "GET", url, body){

    return new Promise((res, rej) =>{
        const xmlh = new XMLHttpRequest();
        const data = new FormData();

        if(body){
            for(let prop in body){
                if(prop === "data"){
                    for(let bodyProp in body[prop]){
                        data.append(bodyProp, body[prop][bodyProp]);
                    }
                }else if(prop === "headers"){
                    for(let headerP in body[prop]){
                        xmlh.setRequestHeader(headerP, body[prop][headerP]);
                    }
                }
            }
        }

        xmlh.open(method, url);
        xmlh.onload  = e => res(e.response);
        xmlh.onerror = e => rej(e);

        if(method.toUpperCase() === "GET"){
            xmlh.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        }

        if(method.toUpperCase() === "GET"){
            xmlh.send();
        }else{
            xmlh.send(data);
        }
        
    });

}

//Ejemplo de uso:
ajax("GET", "http://google.com", 
    {
        data: {
            name: "your name",
            gender: "male",
            age: 18,
            children: false
        }
    }
).then(res =>{
//aqui atrapas la respuesta de ajax (res).
}).catch(e =>{
//Aqui atrapas el posible error que te devuelva ajax.
});
function ajax(method = "GET", url, body){

    return new Promise((res, rej) =>{
        const xmlh = new XMLHttpRequest();
        const data = new FormData();

        if(body){
            for(let prop in body){
                if(prop === "data"){
                    for(let bodyProp in body[prop]){
                        data.append(bodyProp, body[prop][bodyProp]);
                    }
                }else if(prop === "headers"){
                    for(let headerP in body[prop]){
                        xmlh.setRequestHeader(headerP, body[prop][headerP]);
                    }
                }
            }
        }

        xmlh.open(method, url);
        xmlh.onload  = e => res(e.response);
        xmlh.onerror = e => rej(e);

        if(method.toUpperCase() === "GET"){
            xmlh.setRequestHeader("content-type", "application/x-www-form-urlencoded");
            xmlh.send();
        }else{
            xmlh.send(data);
        }
        
    });

}

//Ejemplo de uso:
ajax("GET", "http://google.com", 
    {
        data: {
            name: "your name",
            gender: "male",
            age: 18,
            children: false
        }
    }
).then(res =>{
     //aqui atrapas la respuesta de ajax (res).
}).catch(e =>{
     //Aqui atrapas el posible error que te devuelva ajax.
});
Origen Enlace
Layer
  • 6.1k
  • 2
  • 11
  • 32

Voy a proponerte una solucion generica que te ayudara para que no tengas que crear multiples funciones que te hagan una peticion ajax, en vez de ello se usaria esa misma funcion para todo, voy a ponerte este pequeño ejemplo:

function ajax(method = "GET", url, body){

    return new Promise((res, rej) =>{
        const xmlh = new XMLHttpRequest();
        const data = new FormData();

        if(body){
            for(let prop in body){
                if(prop === "data"){
                    for(let bodyProp in body[prop]){
                        data.append(bodyProp, body[prop][bodyProp]);
                    }
                }else if(prop === "headers"){
                    for(let headerP in body[prop]){
                        xmlh.setRequestHeader(headerP, body[prop][headerP]);
                    }
                }
            }
        }

        xmlh.open(method, url);
        xmlh.onload  = e => res(e.response);
        xmlh.onerror = e => rej(e);

        if(method.toUpperCase() === "GET"){
            xmlh.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        }

        if(method.toUpperCase() === "GET"){
            xmlh.send();
        }else{
            xmlh.send(data);
        }
        
    });

}

//Ejemplo de uso:
ajax("GET", "http://google.com", 
    {
        data: {
            name: "your name",
            gender: "male",
            age: 18,
            children: false
        }
    }
).then(res =>{
//aqui atrapas la respuesta de ajax (res).
}).catch(e =>{
//Aqui atrapas el posible error que te devuelva ajax.
});

De esa manera tienes una funcion reutilizable configurable con los datos que necesites para que puedas usarla, realmente entrar en detalles es un poco complicado en este caso.

Pero en resumen, la Promise te ayuda a manejar el codigo asincrono de mejor forma, FormData es un builder que permite enviar un conjunto de datos haciendo uso de una estructura parecida a un JSON.

Los ciclos usados se usan para configurar tanto en la peticion (xmlh) los headers adicionales que quieras enviar (si necesitas esto), y tambien a su vez se configura la data a enviar por el FormData si se usa una peticion POST, ya que en este caso el FormData es solo usado para la peticion tipo POST.

Tambien comprobamos como debemos enviar la peticion, en caso de que sea GET o POST.

Posdata: la verdad no he comprobado este codigo (no lo he ejecutado), simplemente se me ocurrio, pero si este codigo no te llega a funcionar dejame la observacion yo lo corrijo cuando tenga un poco mas de tiempo.