Servidor JSON


Tabla de contenido

    Mostrar tabla de contenidos


Un uso común de JSON es intercambiar datos hacia/desde un servidor web.

Cuando se reciben datos de un servidor web, los datos siempre son una cadena.

Analice los datos con JSON.parse() y los datos se convertirán en un objeto JavaScript.


Enviando datos

Si tiene datos almacenados en un objeto JavaScript, puede convertir el objeto en JSON y enviarlo a un servidor:

Ejemplo

 const myObj = {name: "John", 
  age: 31, city: "New York"};
const myJSON = 
  JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a JavaScript object into a JSON string, and send it to the server.</h2>

<script>
const myObj = { name: "John", age: 31, city: "New York" };
const myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
</script>

</body>
</html>

Recibiendo información

Si recibe datos en formato JSON, puede convertirlos fácilmente a JavaScript objeto:

Ejemplo

 const myJSON =
  '{"name":"John", 
  "age":31, "city":"New York"}';
const myObj = 
  JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Convert a JSON string into a JavaScript object.</h2>

<p id="demo"></p>

<script>
const myJSON = '{"name":"John", "age":31, "city":"New York"}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

JSON desde un servidor

Puede solicitar JSON desde el servidor mediante una solicitud AJAX

Siempre que la respuesta del servidor esté escrita en formato JSON, puede analiza la cadena en un objeto JavaScript.

Ejemplo

Utilice XMLHttpRequest para obtener datos del servidor:

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj.name;
};
xmlhttp.open("GET", "json_demo.txt");
xmlhttp.send();

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Fetch a JSON file with XMLHttpRequest</h2>
<p id="demo"></p>

<script>
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myObj = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.open("GET", "json_demo.txt");
xmlhttp.send();
</script>

</body>
</html>

Eche un vistazo a json_demo.txt: https://basicit.org/js/json_demo.txt



Matriz como JSON

Cuando se utiliza JSON.parse() en JSON derivado de una matriz, el método devuelve una matriz de JavaScript, en lugar de un objeto de JavaScript.

Ejemplo

JSON devuelto desde un servidor como una matriz:

const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myArr = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myArr[0];
  }
}
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<body>

<h2>Fetch a JSON file with XMLHttpRequest</h2>
<p>Content written as an JSON array will be converted into a JavaScript array.</p>
<p id="demo"></p>

<script>
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
  const myArr = JSON.parse(this.responseText);
  document.getElementById("demo").innerHTML = myArr[0];
}
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();
</script>

</body>
</html>

Eche un vistazo a json_demo_array.txt: https://basicit.org/js/json_demo_array.txt