جیسون (JSON) چیست؟ پروژه محور

JSON چیست؟

JSON مخفف JavaScript Object Notation و به معنی «نشانه گذاری شیء جاوا اسکریپت» است که برای ذخیره سازی یا تبادل اطلاعات به کار می رود. زمانی که می خواهیم اطلاعاتی را بین یک سرور و یک مرورگر انتقال بدهیم، آن داده ها فقط می توانند متن باشند. JSON نیز متن است و ما می توانیم هر شیء جاوا اسکریپتی را به JSON تبدیل کرده و به سرور ارسال کنیم. برعکس این پروسه نیز ممکن است؛ ما می توانیم هر JSON ای را به یک شیء جاوا اسکریپت تبدیل کنیم.

می دانید مزیت این روش چیست؟

با این روش می توانیم با تمام داده ها مانند اشیاء جاوا اسکریپتی برخورد کنیم و دیگر نیازی به parsing (تجزیه کد) پیچیده و ترجمه نداریم. همچنین یادگیری آن بسیار ساده است و به زبان برنامه نویسی خاصی وابسته نیست! بلکه نحوه ی نگارش آن بر اساس قوانین شیء جاوا اسکریپت است اما در حقیقت فقط یک رشته متن است که می تواند در هر زبان برنامه نویسی خوانده شود. این فرمت ابتدا توسط آقای Douglas Crockford معرفی شد. از ویژگی های JSON می توان گفت:

داده ها در جفت های name/value ذخیره می شوند
داده ها با ویرگول انگلیسی از هم جدا شده اند
اشیاء درون Curly braces (کروشه) قرار می گیرند (علامت های {})
آرایه ها درون براکت ها قرار می گیرند (علامت های [])

داده های JSON؛ جفت های name / value

همانطور که قبلا گفتیم داده های JSON در به صورت جفت های name / value نوشته می شود. این ساختار به این شکل است که ابتدا یک «نام فیلد» داریم، سپس یک علامت دو نقطه و سپس مقدار آن نام را می نویسیم. با اینکه در جاوا اسکریپت، نام ها نیازی به double quotation (علامت ") ندارند اما در JSON نام فیلد و مقدار آن هر دو باید در double quotation قرار بگیرند. مثال:

"name":"John"

سوال: تفاوت بین JSON و اشیاء جاوا اسکریپت چیست؟

پاسخ: JSON تقریبا عینا شبیه به اشیاء جاوا اسکریپت است با این تفاوت که در JSON نام فیلد ها یا همان key ها باید به صورت رشته ای و درون double quote باشند اما key ها در جاوا اسکریپت می توانند رشته، عدد و یا نام های identifier باشند.

مثالی از JSON:

{ "name":"John" }

مثالی از JavaScript:

{ name:"John" }

مقادیر JSON

در JSON مقدارها (value) باید یکی از موارد زیر باشند:

رشته
عدد
شیء (شیء JSON)
آرایه
بولین (boolean)
null

اما در جاوا اسکریپت مقادیر می توانند هر کدام از موارد بالا به علاوه ی موارد زیر باشند:

تابع
تاریخ
undefined

همچنین مقادیر (values) در JSON باید در double quote نوشته شوند:

{ "name":"John" }

اما در جاوا اسکریپت می توانند در single quote نیز نوشته شوند:

{ name:'John' }

کار با JSON

از آنجا که JSON بر پایه ی جاوا اسکریپت نوشته شده است چیز اضافه ای برای کار با آن در جاوا اسکریپت نیاز نداریم.

به طور مثال با جاوا اسکریپت می توانید شیء ای بسازید و به آن داده بدهید:

var person = { name: "John", age: 31, city: "New York" };

همچنین می توانید به اشیاء جاوا اسکریپتی دسترسی داشته باشید:

<!DOCTYPE html>
<html>
<body>

<p>Access a JavaScript object:</p>

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

<script>
var myObj, x;
myObj = { name: "John", age: 30, city: "New York" };
x = myObj.name;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

البته می توانید به این شکل هم به داده ها دسترسی داشته باشید:

<!DOCTYPE html>
<html>
<body>

<p>Access a JavaScript object using the bracket notation:</p>

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

<script>
var myObj, x;
myObj = { name: "John", age: 30, city: "New York" };
x = myObj["name"];
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

داده ها را می توان به این شکل تغییر داد:

<!DOCTYPE html>
<html>
<body>

<p>Modify a JavaScript object:</p>

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

<script>
var myObj, x;
myObj = { name: "John", age: 30, city: "New York" };
myObj.name = "Gilbert";
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

راه دیگر تغییر داده ها نیز به این شکل است:

<!DOCTYPE html>
<html>
<body>

<p>Modify a JavaScript object using the bracket notation:</p>

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

<script>
var myObj, x;
myObj = { name: "John", age: 30, city: "New York" };
myObj["name"] = "Gilbert";
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

تمام این روش ها روی JSON نیز کار می کند و در واقع نیازی به کار اضافی نیست.

البته همانطور که می توان از اشیاء جاوا اسکریپتی به عنوان JSON استفاده کرد، می توانیم از آرایه ها نیز به عنوان JSON استفاده کنیم. در قسمت های بعدی بیشتر در این مورد توضیح خواهیم داد.

نکته: پسوند فایل های JSON به صورت json. بوده و MIME type شان نیز به صورت application/json است.

ارسال، دریافت و ذخیره داده های JSON

اگر شیء جاوا اسکریپتی دارید که می خواهید آن را به سرور ارسال کنید، میتوانید ابتدا به JSON تبدیلش کنید:

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

مشاهده خروجی

همچنین اگر JSON دریافت کنیم، می توانیم آن را به شیء جاوا اسکریپت تبدیل کنیم:

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string written in JSON format, into a JavaScript object.</h2>

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

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

</body>
</html>

مشاهده خروجی

زمانی هم که بحث ذخیره سازی داده مطرح می شود همه میدانیم که هر داده ای باید با فرمت خاصی ذخیره شود و هر چیزی بخواهید ذخیره کنید می توانید به عنوان متن (text) باشد. در مثال زیر یک شیء جاوا اسکریپتی را به صورت JSON (که متنی است) ذخیره می کنیم:

<!DOCTYPE html>
<html>
<body>

<h2>Store and retrieve data from local storage.</h2>

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

<script>
var myObj, myJSON, text, obj;

// ذخیره داده:
myObj = { name: "John", age: 31, city: "New York" };
myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

// بازیابی داده:
text = localStorage.getItem("testJSON");
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;
</script>

</body>
</html>

مشاهده خروجی

امیدوارم از این قسمت لذت برده باشید.