Ajax.txt

==================
Guía de Ajax by dM
==================

Es el sueño de un desarrollador, permite:

-Actualizar una página web sin tener que recargar la página.

-solicitar datos de un servidor - después de que la página se ha cargado.

-Recibir datos de un servidor - después de que la página se ha cargado.

-Enviar datos a un servidor - en el fondo.

El término AJAX es un acrónimo de Asynchronous JavaScript + XML, que se puede
traducir como "JavaScript asíncrono + XML".

Ajax no es una tecnología en sí mismo. En realidad, se trata de varias
tecnologías independientes que se unen de formas nuevas y sorprendentes.

Las tecnologías que forman AJAX son:

-XHTML y CSS, para crear una presentación basada en estándares.
-DOM, para la interacción y manipulación dinámica de la presentación.
-XML, XSLT y JSON, para el intercambio y la manipulación de información.
-XMLHttpRequest, para el intercambio asíncrono de información.
-JavaScript, para unir todas las demás tecnologías.

Desarrollar aplicaciones AJAX requiere un conocimiento avanzado de todas y cada
una de las tecnologías anteriores.

En las aplicaciones web tradicionales, las acciones del usuario en la página
(pinchar en un botón, seleccionar un valor de una lista, etc.) desencadenan
llamadas al servidor. Una vez procesada la petición del usuario, el servidor
devuelve una nueva página HTML al navegador del usuario.

Esta técnica tradicional para crear aplicaciones web funciona correctamente,
pero no crea una buena sensación al usuario. Al realizar peticiones continuas
al servidor, el usuario debe esperar a que se recargue la página con los cambios
solicitados. Si la aplicación debe realizar peticiones continuas, su uso se
convierte en algo molesto

AJAX permite mejorar completamente la interacción del usuario con la aplicación,
evitando las recargas constantes de la página, ya que el intercambio de
información con el servidor se produce en un segundo plano.

Las aplicaciones construidas con AJAX eliminan la recarga constante de páginas
mediante la creación de un elemento intermedio entre el usuario y el servidor.
La nueva capa intermedia de AJAX mejora la respuesta de la aplicación, ya que el
usuario nunca se encuentra con una ventana del navegador vacía esperando la
respuesta del servidor.

Las peticiones HTTP al servidor se sustituyen por peticiones JavaScript que se
realizan al elemento encargado de AJAX. Las peticiones más simples no requieren
intervención del servidor, por lo que la respuesta es inmediata. Si la
interacción requiere una respuesta del servidor, la petición se realiza de forma
asíncrona mediante AJAX. En este caso, la interacción del usuario tampoco se ve
interrumpida por recargas de página o largas esperas por la respuesta del
servidor.

==============================
Ventajas y desventajas de AJAX
==============================

Ventajas
========

-Utiliza tecnologías ya existentes.

-Soportada por la mayoría de los navegadores modernos.

-Interactividad. El usuario no tiene que esperar hasta que llegen los datos
del servidor.

-Portabilidad (no requiere plug-in como Flash)

-Mayor velocidad, esto debido que no hay que retornar toda la página nuevamente.

-La página se asemeja a una aplicación de escritorio.

Desventajas
===========

-Se pierde el concepto de volver a la página anterior.

-Si se guarda en favoritos no necesariamente al visitar nuevamente el sitio se
ubique donde nos encontrabamos al grabarla.

-La existencia de páginas con AJAX y otras sin esta tecnología hace que el
usuario se desoriente.

-Problemas con navegadores antiguos que no implementan esta tecnología.

-No funciona si el usuario tiene desactivado el JavaScript en su navegador.

-Requiere programadores que conozcan todas las tecnologías que intervienen
en AJAX.

-Dependiendo de la carga del servidor podemos experimentar tiempos tardíos de
respuesta que desconciertan al visitante.

Nota
====

Algunos ejemplos de esta guía se deben ejecutar desde un servidor http y los
recursos llamados deben estar en el mismo servidor de lo contrario el navegador
los bloqueara por seguridad, lo siguiente habla sobre (CORS) que tiene que ver
con el tema de este intercambio de recursos que pueden llegar a bloquearse.

=============================
Control de acceso HTTP (CORS)
=============================

El Intercambio de Recursos de Origen Cruzado (CORS) es un mecanismo que utiliza
cabeceras HTTP adicionales para permitir que un user agent obtenga permiso para
acceder a recursos seleccionados desde un servidor, en un origen distinto
(dominio) al que pertenece. Un agente crea una petición HTTP de origen cruzado
cuando solicita un recurso desde un dominio distinto, un protocolo o un puerto
diferente al del documento que lo generó.

Un ejemplo de solicitud de origen cruzado: el código JavaScript frontend de una
aplicación web que es localizada en http://domain-a.com utiliza XMLHttpRequest
para cargar el recurso http://api.domain-b.com/data.json.

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.

El W3C Grupo de Trabajo de Aplicaciones Web recomienda el nuevo mecanismo de
Intercambio de Recursos de Origen Cruzado (CORS, por sus siglas en inglés).
CORS da controles de acceso a dominios cruzados para servidores web y
transferencia segura de datos en dominios cruzados entre navegadores y
servidores Web. Los exploradores modernos utilizan CORS en un  contenedor API
(como XMLHttpRequest o Fetch) para ayudar a mitigar los riesgos de solicitudes
HTTP de origen cruzado.

¿Qué peticiones utiliza CORS?
=============================

Este estándar de intercambio de origen cruzado es utilizado para habilitar
solicitudes HTTP de sitios cruzados para:

-Invocaciones de las APIs XMLHttpRequest o  Fetch en una manera de sitio
cruzado, como se discutió arriba.

-Fuentes Web (para usos de fuente en dominios cruzados @font-face dentro de CSS)
para que los servidores puedan mostrar fuentes.

-TrueType que sólo puedan ser cargadas por sitios cruzados y usadas por sitios
web que lo tengan permitido.

-Texturas WebGL.

-Imágenes dibujadas en patrones usando drawImage.

-Hojas de estilo (para acceso CSSOM).

-Scripts (para excepciones inmutadas).

=======
Resumen
=======

El estándar de Intercambio de Recursos de Origen Cruzado trabaja añadiendo
nuevas cabeceras HTTP que permiten a los servidores describir el conjunto de
orígenes que tienen permiso para leer la información usando un explorador web.
Adicionalmente, para métodos de solicitud HTTP que causan efectos secundarios en
datos del usuario (y en particular, para otros métodos HTTP distintos a GET, o
para la utilización de POST con algunos tipos MIME), la especificación sugiere
que los exploradores "verifiquen" la solicitud, solicitando métodos soportados
desde el servidor con un método de solicitud HTTP OPTIONS, y luego, con la
"aprobación" del servidor, enviar la verdadera solicitud con el método de
solicitud HTTP verdadero. Los servidores pueden también notificar a los clientes
cuando sus "credenciales" (incluyendo Cookies y datos de autenticación HTTP)
deben ser enviados con solicitudes.

==============
XMLHttpRequest
==============

XMLHttpRequest es un objeto JavaScript que fue diseñado por Microsoft y adoptado
por Mozilla, Apple y Google. Actualmente es un estándar de la W3C. Proporciona
una forma fácil de obtener información de una URL sin tener que recargar la
página completa. Una página web puede actualizar sólo una parte de la página sin
interrumpir lo que el usuario está haciendo. XMLHttpRequest es ampliamente usado
en la programación AJAX.

A pesar de su nombre, XMLHttpRequest puede ser usado para recibir cualquier tipo
de dato, no solo XML, y admite otros formatos además de HTTP (incluyendo file
y ftp).

Para crear una instancia de XMLHttpRequest, debes hacer lo siguiente:

var req = new XMLHttpRequest();

=====================
Usando XMLHttpRequest
=====================

En esta guía le echaremos un vistazo a cómo usar XMLHttpRequest para enviar
solicitudes HTTP con el objetivo de intercambiar datos entre el sitio web y el
servidor. Se incluyen ejemplos, tanto para los casos de uso comunes de
XMLHttpRequest, como para los más inusuales.

Para enviar una solicitud HTTP, cree un objeto XMLHttpRequest, abra una URL y
envíe la solicitud. Una vez que la transacción haya sido completada, el objeto
contendrá información útil tal como el cuerpo de la respuesta y el estado HTTP
del resultado.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<script type="text/javascript">
function reqListener () {
  console.log(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://127.0.0.1/ajax/holamundo.txt");
oReq.send();
</script>
</body>
</html>

En la consola js nos mostrara el saludo contenido en el archivo

hola mundo!

==================================
Solicitudes Síncronas y Asíncronas
==================================

XMLHttpRequest soporta tanto comunicaciones síncronas como asíncronas.

Nota: No deberias usar XMLHttpRequests síncronas porque, dada la naturaleza
inherentemente asíncrona del intercambio de datos en las redes, hay multiples
formas en que la memoria y eventos se puedan perder usando
solicitudes síncronas.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<script type="text/javascript">
var req = new XMLHttpRequest();
req.open('GET', 'http://127.0.0.1/ajax/holamundo.txt', false);
req.send(null);
if (req.status == 200)
  dump(req.responseText);
</script>
</body>
</html>

En la línea 1 del script se instancia un objeto XMLHttpRequest.  Después en la
línea 2 se abre una nueva solicitud, especificando que una solicitud GET se
utilizará para extraer la pagina de inicio de Mozilla.org, y que la operación
no debe ser asíncrona.

En la línea 3 se envía la solicitud.  El parámetro null indica que la solicitud
GET no necesita contenido en el cuerpo.

En la línea 4 se verifica el código de estatus después de que la transacción se
completa.  Si el resultado es 200 -- El código HTTP para resultado "OK"-- el
contenido de texto del documento se escribe en la consola.

La respuesta de Firefox 76 en la consola de js es:

Un XMLHttpRequest síncrono en el hilo principal está desaprobado por sus efectos
negativos en la experiencia del usuario final. Para más ayuda
vea http://xhr.spec.whatwg.org/

Por lo cual no se pudo verificar

=============================
Solicitudes síncronas no-HTTP
=============================

A pesar de su nombre, XMLHttpRequest se puede usar para hacer solicitudes que no
sean de HTTP.  Este ejemplo muestra como usarlo para extraer un archivo del
sistemas de archivos local.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<script type="text/javascript">
var req = new XMLHttpRequest();
req.open('GET', 'http://127.0.0.1/ajax/holamundo.txt', false);
req.send(null);
if(req.status == 0)
  dump(req.responseText);
</script>
</body>
</html>

La clave aqui es notar que el estado del resultado se compara con 0 en lugar
de 200.  Esto es porque los esquemas file y ftp no usan los codigos de
resultado de HTTP.

======================
Solicitudes asíncronas
======================

Si usas XMLHttpRequest desde una extensión, deberias usarla asíncronamente.

En este caso, recibiras una llamada de regreso cuando se hallan recibido los
datos, lo cual permite al navegador continuar trabajando con normalidad mientras
se maneja tu solicitud.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<script type="text/javascript">
var req = new XMLHttpRequest();
req.open('GET', 'http://127.0.0.1/ajax/holamundo.txt', true);
req.onreadystatechange = function (aEvt) {
  if (req.readyState == 4) {
    if(req.status == 200)
      dump(req.responseText);
    else
      dump("Error loading page\n");
  }
};
req.send(null);
</script>
</body>
</html>

La linea 2 del script especifica true en su tercer parametro indicando que la
solicitud debe manejarse asíncronamente.

Line 3 crea un objeto función para manejar eventos y lo asigna al atributo de la
solicitud onreadystatechange.  Este manejador observa el readyState de la
solicitud verificando si la transacción se ha completado en la linea 4, si así
es, y el estatus HTTP es 200, imprime el contenido recibido.  Si ocurrió un
error, se muestra un mensaje de error.

La linea 11 de hecho inicia la solicitud.  La función onreadystatechange es
llamada siempre que el estado de una solicitud cambia.

================
Ejemplos de ajax
================

Crear un XMLHttpRequest sencilla, y recuperar datos de un archivo txt.

Creamos el fichero holamundo.txt, lo llenamos con algo para poder extraer
y cargar el contenido

The HTML page contains a <div> section and a <button>.

The <div> section is used to display information from a server.

The <button> calls a function (if it is clicked).

The function requests data from a web server and displays data.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "http://127.0.0.1/ajax/holamundo.txt", true);
  xhttp.send();
}
</script>
</body>
</html>

----------

Crear un XMLHttpRequest para recuperar datos de un archivo XML con ajax.

Creamos el archivo note.xml con sel siguiente contenido y lo guardamos

<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
  <to>Tove</to>
  <from>Jani</from>
  <heading>Reminder</heading>
  <body>Don't forget me this weekend!</body>
</note>

luego...

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<h2>Retrieve data from XML file</h2>
<p><b>Status:</b> <span id="A1"></span></p>
<p><b>Status text:</b> <span id="A2"></span></p>
<p><b>Response:</b> <span id="A3"></span></p>
<button onclick="loadDoc('http://127.0.0.1/data.xml')">Get XML data</button>
<script>
function loadDoc(url) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById('A1').innerHTML = xhttp.status;
      document.getElementById('A2').innerHTML = xhttp.statusText;
      document.getElementById('A3').innerHTML = xhttp.responseText;
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
</script>
</body>
</html>

----------

<!-- Crear un XMLHttpRequest para recuperar datos de un archivo XML y mostrar
los datos en una tabla HTML. -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>
<button type="button" onclick="loadDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      myFunction(xhttp);
    }
  };
  xhttp.open("GET", "http://127.0.0.1/ajax/catalogo.xml", true);
  xhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) {
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>

Creamos el archivo catalogo.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
  <CD>
    <TITLE>Hide your heart</TITLE>
    <ARTIST>Bonnie Tyler</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>CBS Records</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1988</YEAR>
  </CD>
</CATALOG>

======================
Ajax con json y jQuery
======================

Método jQuery.ajax()s

Uno de los argumentos del método es dataType y aquí podemos especificar que
vamos a utilizar datos json en la respuesta. Si no especificamos nada en
dataType, jQuery intetará detectar de forma automática el formato de los datos
recibidos. Si se especifica el tipo de contenido, será más fácil para jQuery
tratar los datos correctamente. Utilizando jQuery.ajax().

Creamos el archivo data.json

{
  "firstName": "John",
  "lastName": "Connor",
  "age": 25
}

Luego creamos index.html

<!DOCTYPE html>
<html>
  <head>
    <title>index</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
  </head>
<body>
<script type="text/javascript">
$(document).ready(function() {
  $.ajax({
    // En data puedes utilizar un objeto JSON, un array o un query string
    // data: {"parametro1" : "valor1", "parametro2" : "valor2"},
    type: "GET", // Cambiar a type: POST si necesario
    dataType: "json", // Formato de datos que se espera en la respuesta
    url: "mi.json", // URL a la que se enviará la solicitud Ajax
  })
  .done(function(data, textStatus,jqXHR) {
    if (console && console.log) {
      alert( "La solicitud se ha completado correctamente." );
    }
  })
  .fail(function(jqXHR,textStatus,errorThrown) {
    if ( console && console.log ) {
      alert( "La solicitud a fallado: " + textStatus);
    }
  });
});
</script>
</body>
</html>

----------

Obtener datos del JSON utilizando una petición AJAX, se escriben los datos en
el dom.

Creamos el archivo data.json

{
  "firstName": "John",
  "lastName": "Connor",
  "age": 25
}

Luego creamos index.html

<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.getJSON("http://127.0.0.1/ajax/data.json", function(result){
      $.each(result, function(i, field){
        $("div").append(field + " ");
      });
    });
  });
});
</script>
</head>
<body>
<button>Get JSON data</button>
<div></div>
</body>
</html>

----------

<!-- Mostrar una alerta cuando una petición AJAX se complete con éxito -->
<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
  $(document).ajaxSuccess(function(){
    alert("AJAX request successfully completed");
  });
  $("button").click(function(){
    $("div").load("holamundo.txt"); //Crear el fichero para cargar el contenido
  });
});
</script>
</head>
<body>
<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>
</body>
</html>

----------

Obtener y correr un JavaScript usando una solicitud ajax

Creamos prueba.js

$(document).ready(function(){
  alert("prueba.js cargado con éxito!");
});

Creamos index.html

<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.getScript("prueba.js");
  });
});
</script>
</head>
<body>
<button>Use Ajax to get and then run a JavaScript</button>
</body>
</html>

----------

<!-- Mostrar una imagen de carga mientras la solicitud ajax
se está realizando. -->
<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
  $(document).ajaxStart(function(){
    $("#wait").css("display", "block");
  });
  $(document).ajaxComplete(function(){
    $("#wait").css("display", "none");
  });
  $("button").click(function(){
    $("#txt").load("holamundo.txt");
  });
});
</script>
</head>
<body>
  <div id="txt"><h2>Let AJAX change this text</h2></div>
  <button>Change Content</button>
  <div id="wait" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;">
    <img src='wait.gif' width="64" height="64" /><br>Loading...
  </div>
</body>
</html>

----------

<!-- Mostrar una alerta cuando falla una petición AJAX -->
<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
  $(document).ajaxError(function(){
    alert("An error occured!");
  });
  $("button").click(function(){
    $("div").load("holamundo.txt");
    // Si no consigue el fichero muestra la alerta de error.
  });
});
</script>
</head>
<body>
<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>
</body>
</html>

----------

<!-- Mostrar una alerta de js cuando un petición ajax está a punto de ser
enviada. -->
<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
  $(document).ajaxSend(function(e, xhr, opt){
    $("div").append("<p>Requesting " + opt.url + "</p>");
  });
  $("button").click(function(){
    $("div").load("holamundo.txt");
  });
});
</script>
</head>
<body>
<div><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>
</body>
</html>

----------

<!-- Cargar la data de un json y escribirlo en un div content -->
<html>
  <head>
    <title>The jQuery Example</title>
    <meta charset="utf-8">
    <script src="jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
  </head>
<body>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
  $("#load").click(function(event){
    $.getJSON('mi.json', function(data) { // Crear el json y guardarlo
      $('#content').html('<p> Name: ' + data.firstName + '</p>');
      $('#content').append('<p>Apellido : ' + data.lastName + '</p>');
      $('#content').append('<p>Edad: ' + data.age + '</p>');
    });
  });
});
</script>
<p>Click para cargar la data del JSON:</p>
<div id="content">Aquí va lo que se cargara con ajax...</div>
<br />
<input type="button" id="load" value="Cargar data" />
</body>
</html>

mi.json

{
  "firstName": "John",
  "lastName": "Connor",
  "age": 25
}

----------

<!-- Cargar la data de un json y escribirlo en un div content, mostrando los
contenidos dentro de los arrays. -->
<html>
  <head>
    <title>The jQuery Example</title>
    <meta charset="utf-8">
    <script src="jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
  </head>
<body>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
  window.onload = function () {
    $.getJSON('mi3.json', function(data) {
      $('#content').html('<p>Ente Superior: ' + data.name + '</p>');
      $('#content').append('<p>Ente: ' + data.children[0].name + '</p>');
      $('#content').append('<p>Proyecto: ' + data.children[0].children[0].name + '</p>');
    });
  }
});
</script>
<div id="content">Content</div>
</body>
</html>

mi.json

{
  "name": "Vicepresidencia",
  "children":
  [
    {
      "name": "Ente X",
      "children":
      [
        {"name": "Proyecto 1", "size": 2000},
        {"name": "Proyecto 2", "size": 2000},
        {"name": "Proyecto 3", "size": 2000},
        {"name": "Proyecto 4", "size": 2000},
        {"name": "Proyecto 5", "size": 2000}
      ]
    },
    {
      "name": "Ente y",
      "children":
      [
        {"name": "Proyecto 1", "size": 2000},
        {"name": "Proyecto 2", "size": 2000},
        {"name": "Proyecto 3", "size": 2000},
        {"name": "Proyecto 4", "size": 2000},
        {"name": "Proyecto 5", "size": 2000}
      ]
    }
  ]
}

=======
Fuentes
=======

-https://uniwebsidad.com/libros/ajax/capitulo-1
-http://www.tutorialesprogramacionya.com/ajaxya/temarios/descripcion.php?punto=2&cod=34&inicio=0
-http://www.tutorialesprogramacionya.com/ajaxya/index.php
-https://developer.mozilla.org/es/docs/Web/HTTP/Access_control_CORS
-https://developer.mozilla.org/es/docs/Web/API/XMLHttpRequest