Parsear JSON con XMLHttpRequest()

La desventaja de este procedimiento es que no permite el Cross Site Scripting, esto es, no podemos acceder a una URL JSON de una API de un servidor remoto, por cuestiones de seguridad. Esto debido a la denominada Origin Policy.

 Ya que se podrían realizar ataques de man in the middle o cosas por el estilo. Así que no funciona para url remotas, sino para archivos hospedados en el mismo host que el script. Habría que checar si el server soporta JSONP como alternativa y también usar una librería como jQuery nos ahorraría líneas de código.

El Script es el siguiente:

var xmlhttp = new XMLHttpRequest();

var url = "soccerseasons.json";



xmlhttp.onreadystatechange = function() {

    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

        var myArr = JSON.parse(xmlhttp.responseText);

        myFunction(myArr);

    }

}

xmlhttp.open("GET", url, true);

xmlhttp.send();



function myFunction(arr) {

    var out = "";

    var i;

    for(i = 0; i < arr.length; i++) {

        out += '<a href="' + arr[i]._links.self.href + '">' +

        arr[i].caption + '</a><br>';

    }

    document.getElementById("id01").innerHTML = out;

}