سرور JSON (JSON Server)
اینجا می بینیم داده ها چگونه با سرور JSON ردوبدل می شوند. «JSON» فقط متن است. پس هنگام دریافت، اول متن می آید؛ بعد با JSON.parse() تبدیل به شیء می شود.
ارسال داده (Sending Data)
یک شیء داریم؛ آن را با JSON.stringify() به رشته JSON تبدیل می کنیم؛ سپس برای سرور می فرستیم.
const myObj = {
name: "John",
age: 31,
city: "New York"
};
const myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
نکته: JSON Stringify رشته استاندارد JSON می سازد.
دریافت داده (Receiving Data)
وقتی رشته JSON می گیری، با JSON.parse() به شیء تبدیل کن و از آن استفاده کن.
const myJSON = "{\"name\":\"John\", \"age\":31, \"city\":\"New York\"}";
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
نکته: درباره پارس کردن اینجا بخوان: JSON Parse.
گرفتن JSON با AJAX
با XMLHttpRequest از سرور متن JSON می گیریم؛ سپس پارس می کنیم.
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();
نمونه پاسخ را ببین: json_demo.txt
وقتی پاسخ، آرایه JSON است
اگر متنِ پاسخ، آرایه 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();
نمونه آرایه را ببین: json_demo_array.txt
گام های عملی
- داده را شیء بساز.
- با
JSON.stringify()رشته کن. - برای سرور ارسال کن.
- پاسخ را بگیر و با
JSON.parse()تبدیل کن.
جمع بندی سریع
- سرور JSON متن می فرستد و می گیرد.
- ارسال:
JSON.stringify()؛ دریافت:JSON.parse(). - AJAX پاسخ را می گیرد؛ بعد پارس کن.
- پاسخ آرایه باشد، خروجی هم آرایه است.
- سرور JSON پایه ارتباط داده است.