Parse کردن انواع داده ها در JSON + مقایسه ی JSON و XML

JSON یا XML؟

ما می توانیم از هر دوی این تکنولوژی ها برای دریافت داده از سرور استفاده کنیم. در مثال زیر هم JSON و هم XML یک شیء به نام employees (به معنی «کارمند») می سازند که آرایه ای از 3 کارمند داشته باشد:

با استفاده از JSON

{"employees":[
  { "firstName":"John", "lastName":"Doe" },
  { "firstName":"Anna", "lastName":"Smith" },
  { "firstName":"Peter", "lastName":"Jones" }
]}

با استفاده از XML

<employees>
  <employee>
    <firstName>John</firstName> <lastName>Doe</lastName>
  </employee>
  <employee>
    <firstName>Anna</firstName> <lastName>Smith</lastName>
  </employee>
  <employee>
    <firstName>Peter</firstName> <lastName>Jones</lastName>
  </employee>
</employees>

JSON از نقطه نظرات زیر با XML شباهت دارد:

هر دوی این تکنولوژی ها self describing هستند؛ یعنی انسان می تواند کد آن ها را بخواند.
هر دوی این تکنولوژی ها سلسله مراتبی هستند؛ یعنی مقادیر به صورت تو در تو قرار دارند.
هر دوی این تکنولوژی ها توانایی parse و استفاده شدن توسط بسیاری از زبان های برنامه نویسی را دارند.
هر دوی این تکنولوژی ها را می توان از طریق شیء XMLHttpRequest دریافت کرد.

JSON از نقطه نظرات زیر با XML تفاوت دارد:

JSON از تگ پایانی استفاده نمی کند.
JSON کوتاه تر از XML است.
نوشتن و خواندن JSON بسیار کوتاه تر و ساده تر است.
JSON می تواند از آرایه ها استفاده کند.
اما مهم ترین تفاوت این است که کد XML باید توسط XML parser تجزیه و parse شود اما JSON توسط یک تابع ساده در جاوا اسکریپت parse می شود.

بنابراین می توان گفت JSON از XML بهتر است چرا که نوشتن XML بسیار سخت تر از JSON است. این برتری در برنامه های AJAX خودش را به خوبی نشان می‌دهد چرا که JSON بسیار سریع تر از XML عمل می کند. اگر قرار باشد از XML در برنامه های AJAX استفاده کنیم باید:

ابتدا سند XML را دریافت کنیم.
با استفاده از XML DOM درون سند گردش (loop) کنیم.
مقادیر را استخراج کرده و سپس در متغیر ها ذخیره کنیم.

اما اگر از JSON استفاده کنیم باید:

یک رشته ی JSON را دریافت کنیم.
آن رشته را به دستور JSON.Parse بدهیم.

XML قدیمی است و در زمان حاضر استفاده های خاص و محدودی دارد بنابراین بهتر است همیشه از JSON استفاده کنید.

انواع داده در JSON

در JSON مقادیر باید از انواع داده های زیر باشند:

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

مقادیر JSON اجازه ندارند که از نوع مقادیر زیر باشند:

تابع
تاریخ
undefined

رشته ها در JSON با double quote نوشته می شوند:

{ "name":"John" }

اعداد در JSON باید از نوع اعداد صحیح (integer) یا اعداد اعشاری (floating point) باشند:

{ "age":30 }

اشیاء میتوانند در رشته های JSON قرار بگیرند:

{
"employee":{ "name":"John", "age":30, "city":"New York" }
}

این اشیاء که مقادیر JSON محسوب می شوند باید با قوانین JSON object (اشیاءِ JSON) منطبق باشند.

آرایه ها نیز اجازه دارند که در JSON قرار بگیرند:

{
"employees":[ "John", "Anna", "Peter" ]
}

بولین ها مقادیری هستند که تنها دو مقدار true یا false را میگیرند و می توانند در رشته ی JSON نیز جا بگیرند:

{ "sale":true }

در آخر نیز مقدار مشهور null را خواهیم داشت:

{ "middlename":null }

استفاده از JSON.parse

یکی از رایج ترین استفاده های JSON، انتقال (دریافت و ارسال) اطلاعات به/از سرور است. وقتی داده را از سرور دریافت می کنیم آن داده همیشه رشته ای است بنابراین می توانیم از ()JSON.parse استفاده کنیم تا به یک شیء جاوا اسکریپت تبدیل شود.

تصور کنید این رشته را از یک سرور دریافت کرده ایم:

'{ "name":"John", "age":30, "city":"New York"}'

می توانیم با استفاده از ()JSON.parse آن را به یک شیء جاوا اسکریپت تبدیل کنیم:

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<body>

<h2>Create Object from JSON String</h2>

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

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

</body>
</html>

مشاهده ی خروجی در JSBin

شما می توانید با یک درخواست AJAX از سرور رشته ی JSON دریافت کنید و تا زمانی که پاسخ دریافتی از سمت سرور JSON باشد می توانید آن را در جاوا اسکریپت parse کنید:

<!DOCTYPE html>
<html>
<body>

<h2>Use the XMLHttpRequest to get the content of a file.</h2>
<p>The content is written in JSON format, and can easily be converted into a JavaScript object.</p>

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

<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myObj = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = myObj.name;
  }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();
</script>

<p>Take a look at <a href="json_demo.txt" target="_blank">json_demo.txt</a></p>

</body>
</html>

مشاهده ی خروجی

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

<!DOCTYPE html>
<html>
<body>

<h2>Content as Array.</h2>
<p>Content written as an JSON array will be converted into a JavaScript array.</p>

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

<script>
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var myArr = JSON.parse(this.responseText);
    document.getElementById("demo").innerHTML = myArr[0];
  }
};
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();
</script>

<p>Take a look at <a href="json_demo_array.txt" target="_blank">json_demo_array.txt</a></p>

</body>
</html>

مشاهده ی خروجی

موارد استثنائی

اشیاء تاریخ (date) در JSON غیر مجاز هستند بنابراین اگر نیاز به ارسال تاریخ یا دریافت آن دارد، آن را به صورت یک رشته بنویسید و بعدا به یک شیء تبدیلش کنید:

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a date object.</h2>

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

<script>
var text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

مشاهده ی خروجی

البته شما می توانید از پارامتر دوم دستور ()JSON.parse نیز استفاده کنید. این پارامتر تابعی است که قبل از برگرداندن مقدار، تک تک خصوصیات را چک می کند:

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a date object.</h2>

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

<script>
var text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text, function (key, value) {
  if (key == "birth") {
    return new Date(value);
  } else {
    return value;
  }
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 
</script>

</body>
</html>

مشاهده ی خروجی

همانطور که می دانید توابع نیز نمی توانند در JSON قرار بگیرند، بنابراین اگر نیاز به یک تابع دارید آن را به صورت رشته ای بنویسید. بعدا میتوانید آن را تبدیل به یک تابع کنید:

<!DOCTYPE html>
<html>
<body>

<h2>Convert a string into a function.</h2>

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

<script>
var text = '{"name":"John", "age":"function() {return 30;}", "city":"New York"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age(); 
</script>

</body>
</html>

مشاهده ی خروجی

البته این کار پیشنهاد نمی شود. سعی کنید هیچ گاه در JSON از توابع استفاده نکنید چرا که scope شان را از دست می دهند و باید از ()eval برای برگرداندنشان به تابع استفاده کنید.