تنسيق JSON لتمثيل الكائنات في لغة JavaScript

لقد حظيت صيغة JSON لتمثيل البيانات بالكثير من الاهتمام في عالم الويب خلال الفترة الأخيرة، وقد ساهمت بساطتها وسهولة تطبيقها في تعزيز مثل هكذا توجه، إضافة إلى شيوع استخدامها تبادل ونقل البيانات فيما بين واجهات تخاطب العديد من تطبيقات الويب. هذا عدى عن كونها تتمتع بدعم أصيل من لغة JavaScript الواسعة الانتشار على مختلف أنواع المتصفحات الشائعة.

لا يعد تنسيق JSON بأي حال من الأحوال طريقة لبرمجة الكائنات ضمن JavaScript، لكنه يعد من جهة أخرى الشكل الفعلي للطريقة التي يقوم بها محرك لغة JavaScript بربط وتوصيف تلك الكائنات ضمن الذاكرة. باختصار، يعتبر هذا التنسيق أسلوبا سريعا وطريقة قوية لتبادل البيانات فيما بين تطبيقات الويب من جهة وواجهات المستخدم على طرف المتصفح من جهة أخرى، فعدى عن كون تنسيق JSON سهل التوليد والتحليل بالنسبة للحواسيب فهو يتميز في ذات الوقت بإمكانية قراءته وفهمه ببساطة من قبل البشر.

يعود تنسيق JSON في أصوله إلى جزء من الإصدار الثالث من معيار ECMA-262 الخاص بلغة JavaScript للبرمجة والذي أطلق أول مرة في شهر كانون أول / ديسمبر 1999. ويعد هذا التنسيق صيغة نصية مستقلة تماما عن لغة البرمجة على الرغم من استخدامه لصيغ مألوفة للمبرمجين.

إن تنسيق JSON قادر على توصيف بنى معطيات مختلفة ضمن لغة JavaScript على طرف المتصفح تتدرج من القيم المنطقية إلى الأرقام إلى السلاسل النصية (والتي تعد بنى المعطيات الأساسية الأكثر شيوعا) وصولا إلى المصفوفات، كما يستطيع تنسيق JSON باستخدام بنى قواعدية معرّفة بحرص وإتقان أن يقوم أيضا بتوصيف الكائنات، حيث نستطيع بعد ذلك أن نقوم بتحويل البيانات المصاغة بذلك التنسيق لنعيدها إلى وضعها الأصلية ككائنات فعلية من جديد وذلك باستخدام تعليمة eval() بلغة JavaScript.

إن قوة تنسيق JSON لا تتوقف عند هذا الحد فقط، بل أخذت لغات برمجية شائعة أخرى تقوم بتوفير دعم أصيل لصيغة هذا التنسيق مثل لغتي PHP و ActionScript. فعلى سبيل المثال، باستطاعة لغة PHP (بدءا من الإصدار 5.2) أن تقوم بتحويل بيانات أي مصفوفة ترابطية (hash) إلى سلسلة نصية بتنسيق JSON مباشرة وبخطوة واحدة وذلك باستخدام تعليمة ()json_encode، كما أصبح بإمكانها أيضا القيام بالوظيفة المعاكسة بحيث تعيد بيانات سلسلة نصية مصاغة بتنسيق JSON إلى مصفوفة ترابطية من جديد وذلك باستخدام تعليمة ()json_decode.

من حيث المبدأ، تدعم كافة لغات البرمجة الحديثة والشائعة هذا التنسيق بشكل أو بآخر إما بشكل أصيل أو من خلال المكتبات التي تسمح بقراءة هذا التنسيق وتصدير البيانات إليه، حيث تتوفر مثل هذه المكتبات للعديد من لغات البرمجة منها على سبيل المثال لا الحصر C و C++ و C# و Java و Perl و Python و PHP وغيرها الكثير، وهو ما يجعل من تنسيق JSON مثاليا لتبادل البيانات فيما بين التطبيقات خصوصا على فضاء الشابكة (Internet). للإطلاع على الطيف الواسع من المكتبات المتوفرة ما عليكم سوى زيارة الموقع الرسمي المخصص لتنسيق JSON على شبكة الإنترنت:

http://www.json.org

قواعد وصيغ تنسيق JSON لتوصيف البيانات:

يتم التصريح عن كافة كائنات JSON ضمن شيفرات لغة JavaScript البرمجية باستخدام زوج من الأقواس الكبيرة، حيث تستطيع إسنادهما إلى أي متحول كما هي الحال مع أي بنية معطيات أخرى، مثلا:

var myObj = {}

هذا كل شيء! على الرغم من أن مظهر السطر البرمجي السابق لا يدل على مقدار القوة التي يخفيها فيما بين ثناياه، إلا أن هذا هو كل ما تحتاج إليه لإنشاء كائن باستخدام تنسيق JSON، لذا دعونا نبدأ بإضافة بعض الخصائص إلى هذا الكائن، بداية لنجعل هذا الكائن يمثل شخصا ما، لذا سنبدأ بإضافة خاصية الإسم:

var myObj = { name: 'Khaled Al-Shamaa' }

لنتفحص بعناية وشيء من التفصيل ما قمنا به للتو، لقد أردنا إضافة خاصية جديدة دعوناها على سبيل المثال name، وللقيام بذلك أوردنا ببساطة الاسم المختار للخاصية، ومن ثم أتبعنا تسمية تلك الخاصية بنقطتين للفصل فيما بين تسمية تلك الخاصية وقيمتها، وبعدها أضفنا القيمة المراد إسنادها، ونظرا لكون تلك القيمة التي أردنا إضافتها عبارة عن سلسلة نصية، لذا قمنا بتأطيرها بعلامتي تنصيص.

نستطيع الآن بعد بناء كائن JSON السابق أن نصل إلى قيمة تلك الخاصية باستخدام اسم الخاصية بعد اسم كائن JSON ذاته على أن تفصل بينهما نقطة، فمثلا ستؤدي التعليمة التالية إلى طباعة الاسم ضمن نافذة منبثقة:

alert ( myObj.name ); // Khaled Al-Shamaa

أما إن أردنا أن نسند خاصية ذات قيمة عددية إلى كائن JSON السابق، فعلينا حينها إغفال إضافة علامات التنصيص لتأطير القيمة التي سيتم إسنادها للخاصية المعنية، مثلا:

var myObj = { age: 35 }

وفي حال أردنا تضمين أكثر من خاصية معا ضمن ذات الكائن بتنسيق JSON، فعلينا حينها استخدام الفاصلة للتفريق فيما بين كل من تلك الخصائص، مثلا:

var myObj = { name: 'Khaled Al-Shamaa', age: 35 }
alert ( "My name is " + myObj.name + " and I'm " + myObj.age);
// My name is Khaled Al-Shamaa and I'm 35

أما بالنسبة للقيم المنطقية فحالها حال الأعداد الصحيحة من حيث عدم التأطير بعلامات التنصيص عند إدراج هذا النوع من القيم (وهي إما صح true أو خطأ false)، يوضح المثال التالي كائن JavaScript معرّف باستخدام تنسيق JSON يتضمن خصائص من أنواع القيم الثلاث (النصية والعددية والمنطقية أيضا):

var myObj = { name: 'Khaled Al-Shamaa', age: 35, married: true }

من جهة أخرى، يمكننا النظر إلى المصفوفات على أنها مجموعات مترابطة من أنواع المعطيات البسيطة التي سبق الإشارة إليها فيما سبق، لذا لتعريف مصفوفة ما عليك فقط تأطير مجموعة عناصرها باستخدام الأقواس المربعة ومن ثم الفصل فيما بين قيمها باستخدام الفواصل لتحصل بالنتيجة على عناصر المصفوفة المرغوبة، فالمثال التالي يوضح إضافة خاصية kids التي هي عبارة عن مصفوفة عنصريها هما

var myObj = { name: 'Khaled Al-Shamaa', age: 35, married: true, kids: [ 'Cham', 'Abdo' ] }

يمكننا بعد ذلك الوصول إلى قيمة أي عنصر من عناصر تلك المصفوفة التي تم تعريفها وإضافتها إلى كائن JSON السابق باستخدام مزيج النقطة (للوصول إلى الخاصية المطلوبة والتي تمثل المصفوفة ذاتها) وترتيب العنصر ضمن تلك المصفوفة مؤطرا بأقواس مربعة (علما أن ترتيب العنصر الأول من عناصر المصفوفة هو 0)، فمثلا:

alert ( myObj.kids[1] ); // Abdo

ويمكن لبنى المصفوفات هذه أن تكون أكثر تعقيدا بحيث يمكن لأي عنصر من عناصر مصفوفة ما ضمن كائن JSON أن يتضمن بدوره كائنات JSON أخرى، فالمثال التالي يوضح حالة تكون فيها الخاصية kids هي عبارة عن مصفوفة عناصرها كائنات JSON أخرى تمتلك بدورها خاصيتي الاسم والعمر على سبيل المثال:

var myObj = {
    name:    'Khaled Al-Shamaa',
    age:     35,
    married: true,
    kids:    [{ name: 'Cham', age: 8 }, { name: 'Abdo', age: 7 } ]
}

حتى مع هذه الصيغة المعقدة نسبيا لا يزال بامكاننا الوصول إلى المعطيات ببساطة من خلال استخدام النقط لتحديد الخواص التي نرغب في الوصول إليها وترتيب العنصر ضمن المصفوفة التي تمثل قيمة تلك الخاصية، لكننا الآن أصبحنا بحاجة إلى نقطة إضافية لتحديد أي من خصائص الكائن الموجود كعنصر من عناصر تلك المصفوفة نرغب في قراءة قيمته، يوضح المثال التالي طريقة الحصول على قيمة خاصية الاسم من العنصر الأول من المصفوفة المسندة إلى خاصية kids ضمن كائن JSON المحفوظ ضمن المتحول myObj:

alert ( myObj.kids[0].name ); // Cham

في حقيقة الأمر هناك حالة وحيدة نضطر فيها إلى استخدام الأقواس المربعة للوصول إلى أي من خصائص كائن JSON عوضا عن النقطة، وهي حينما يكون اسم الخاصية نفسها عبارة عن متحول، فعلى سبيل المثال:

var property = 'age';
alert ( myObj[property] ); // 35

مما يجدر ملاحظته أن هناك بعض لغات البرمجة التي تشترط علينا أن نستخدم علامات التنصيص لتأطير أسماء الخصائص أيضا وليس قيمها فقط كما هي الحال في مجموعة الأمثلة السابقة وذلك هو حال لغة ActionScript على سبيل المثال (وهي اللغة المستخدمة ضمن ملفات الفلاش swf) حيث ستحصل على رسالة خطأ عند استخدامك التعليمة:

myObj = { name: 'Khaled Al-Shamaa' }

فيما ستنفذ التعليمة التالية دون أي مشاكل على الإطلاق!

myObj = { 'name': 'Khaled Al-Shamaa' }

كيفية تحميل واستخدام كائن JSON وارد من مصدر خارجي في موقعك:

سنتناول هذه النقطة في إطار مثال عملي قابل للتطبيق حيث سنستخدم ما يوفره موقع Twitter الشهير من واجهات لتصدير البيانات، ولمن لم يستخدمها قبل الآن أود الإشارة إلى أنها في غاية البساطة حيث يمكنكم الإطلاع على الأساليب العديدة التي يتيحها هذا الموقع لتصدير ومشاركة بياناته والتي يعرضها الموقع التالي بشيء من التفصيل على هذا الرابط:

http://apiwiki.twitter.com/Twitter-API-Documentation

كما سترى هناك العديد من طرق الاستدعاء الرائعة والمرنة المتاحة لك، ومنها على سبيل المثال جملة آخر مشاركات مستخدم ما مصدّرة بتنسيق JSON، لنقل على سبيل المثال أنك معجب بما أكتب من تدوينات مختصرة منشورة على هذا الموقع لدرجة أنك ترغب في عرض آخر ما قمت بإضافته من تلك التدوينات المختصرة ضمن موقعك الخاص.

في هذه الحالة يمكنك جلب المعلومات المطلوبة من العنوان التالي (حيث أن arphp هو اسم المستخدم الخاص بي على موقع تويتر):

http://twitter.com/statuses/user_timeline/arphp.json

إن حاولت الوصول إلى هذا العنوان من خلال مستعرض الويب الذي لديك فسيقوم بعرض رسالة تستفسر إن كنت تريد تحميل الملف المشار إليه بالعنوان السابق نظرا لكون الامتداد json ليس من ضمن الامتدادات الشائعة المتعارف عليها والتي يعلم المتصفح مسبقا كيفية عرض محتواها.

يوضح الشكل التالي مثالا عن المحتوى الذي يمكن أن يتضمنه مثل هذا الملف:

صحيح أن تقنية JSON مصممة لتعمل على طرف متصفح المستخدم، لكن على أن تكون جزءا من شيفرة JavaScript البرمجية وليس كملف مستقل قائم بحد ذاته، على الرغم من ذلك لا يمكننا في هذه الحالة الاعتماد على كائن XMLHttpRequest الشائع الاستخدام في تطبيقات AJAX وذلك نظرا لكوننا نستقدم ملف JSON موضوع النقاش من اسم نطاق (domain) آخر يختلف عن اسم النطاق الخاص بالموقع المراد عرض النتائج فيه (في هذه الحالة المصدر يعود إلى نطاق twitter.com)، وهو ما ستتعامل معه معظم المتصفحات على أنه خرق لقواعد الحماية من هجمات XSS والتي تسمح للمهاجمين المحتملين من إيجاد طرق لحقن أكواد برمجية تنفذ من خلال المتصفح على جهة العميل (Cross Site Scripting)، لذا لن يستقبل بالترحيب، ولتجاوز هذه المشكلة علينا القيام بتضمين هذا الملف ضمن صفحة HTML باعتماد ذات الأسلوب التقليدي الذي نستخدمه عندما نقوم بتضمين ملف JavaScript اعتيادي:

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/arphp.json">

إن اطلعت على محتوى ملف JSON المعاد فسترى الكم الغني من المعلومات المقدمة من موقع Twitter والتي يمكنك الانتقاء منها أو استخدامها (بنظرة سريعة يمكنك استنتاج أنها مؤلفة من مصفوفة من الكائنات). لذلك، إن قمت باسناد هذه السلسلة النصية والتي تمثل كائن بتنسيق JSON إلى متحول myTweets ستستطيع حينها الوصول إلى أولى تلك الكائنات الواردة ضمن المصفوفة باستخدام التعبير  myTweets[0] فعلى سبيل المثال، للحصول على نص التدوينة الأولى:

myTweets[0].text  // نص التغريدة

أما للحصول على تاريخها فعليك بالتعبير التالي:

myTweets[0].created_at // تاريخها

كذلك تستطيع الحصول على العديد من المعلومات المتعلقة بالمستخدم ذاته الذي قام بنشر التدوينة وهي تحزم مع كل عنصر من عناصر المصفوفة التي تمثل التدوينات المختصرة، حيث تستطيع الحصول على سبيل المثال معرفة اسم المستخدم أو عنوانه أو عنوان موقعه الإلكتروني إن وجد أو حتى عدد متابعيه أو أصدقائه على تلك الشبكة الاجتماعية:

myTweets[0].user.name            //  اسم المستخدم
myTweets[0].user.location        //  عنوان المستخدم
myTweets[0].user.url             //  الموقع الإلكتروني
myTweets[0].user.followers_count //  عدد متابعيه
myTweets[0].user.friends_count   //  عدد أصدقائه