Διακομιστής JSON

Πίνακας περιεχομένων

Μια κοινή χρήση του JSON είναι η ανταλλαγή δεδομένων προς/από έναν διακομιστή ιστού.

Κατά τη λήψη δεδομένων από διακομιστή web, τα δεδομένα είναι πάντα μια συμβολοσειρά.

Αναλύστε τα δεδομένα με JSON.parse() και τα δεδομένα γίνονται αντικείμενο JavaScript.

Αποστολή στοιχείων

Εάν έχετε αποθηκευμένα δεδομένα σε ένα αντικείμενο JavaScript, μπορείτε να μετατρέψετε το αντικείμενο σε JSON και στείλτε το σε έναν διακομιστή:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!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>

Λήψη Δεδομένων

Εάν λαμβάνετε δεδομένα σε μορφή JSON, μπορείτε εύκολα να τα μετατρέψετε σε JavaScript αντικείμενο:

Παράδειγμα

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

Δοκιμάστε το μόνοι σας →

<!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 Από διακομιστή

Μπορείτε να ζητήσετε JSON από τον διακομιστή χρησιμοποιώντας ένα αίτημα AJAX

Εφόσον η απάντηση από τον διακομιστή είναι γραμμένη σε μορφή JSON, μπορείτε αναλύστε τη συμβολοσειρά σε ένα αντικείμενο JavaScript.

Παράδειγμα

Χρησιμοποιήστε το XMLHttpRequest για να λάβετε δεδομένα από τον διακομιστή:

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();

Δοκιμάστε το μόνοι σας →

<!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>

Ρίξτε μια ματιά στο json_demo.txt: https://basicit.org/js/json_demo.txt

Πίνακας ως JSON

Όταν χρησιμοποιείτε το JSON.parse() σε JSON που προέρχεται από έναν πίνακα, η μέθοδος θα επιστρέψτε έναν πίνακα JavaScript, αντί για ένα αντικείμενο JavaScript.

Παράδειγμα

Το JSON επέστρεψε από έναν διακομιστή ως πίνακας:

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();

Δοκιμάστε το μόνοι σας →

<!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>

Ρίξτε μια ματιά στο json_demo_array.txt: https://basicit.org/js/json_demo_array.txt