Ajax Externo

12-4-2020

El tema del Ajax externo es muy interesante, ya que nos permite obtener información vía JSON desde una determinada dirección web.

CORS (Cross-Origin Resource Sharing), es un mecanismo que tienen los servidores de protección respecto de las peticiones vía Ajax, donde no se permite que la petición originada en un servidor vaya hacia otro. Todo debe quedar dentro del mismo server.

Según la propia página de Mozilla:

Por razones de seguridad, los exploradores restringen las solicitudes HTTP de origen cruzado iniciadas dentro de un script. Por ejemplo, XMLHttpRequest y la API Fetch siguen la política de mismo-origen. Ésto significa que una aplicación que utilice esas APIs XMLHttpRequest sólo puede hacer solicitudes HTTP a su propio dominio, a menos que se utilicen cabeceras CORS.

Entonces el tema del pedido de peticiones desde un servidor a otro es generalmente complejo. Vamos a mostrar un ejemplo que nos permita obtener la información sin toparnos con la limitación impuesta por la regla CORS:

//usamos una url con dummy text que nos sirva de prueba
let url = 'https://jsonplaceholder.typicode.com/users'
//hacemos un nuevo request al servidor
let xhr = new XMLHttpRequest
//vamos a buscar la data usando el método get
xhr.open('get', url)
//ponemos un escuchador cuando el recurso cargue
xhr.addEventListener('load', () => {
    //y si devuelve 200, o sea éxito...
    if(xhr.status == 200) {
        //El servidor serializa (convierte a string) mediante: JSON.stringify(objJson)
        //la respuesta viene en JSON, que en realidad es un string, hay que jsonificarlo
        let respuesta = JSON.parse(xhr.response) //deserialización
        console.log(typeof respuesta)
        console.log(respuesta)
    }
})
//si el escuchador dá un error...
xhr.addEventListener('error', () => {
    console.log('ERROR AJAX')
    //esto es para saltearnos CORS, donde nos tira error, pero igualmente nos trae la información
    let script = document.createElement('script')
    script.src = url + '&callback=micallback'
    document.body.appendChild(script)
})
xhr.send()

function micallback(res) {
    console.log(res)
}