native JSON api


السلام عليكم و رحمه الله تعالى و بركاته

كما وضحت من قبل فى موضوع JSON ، ان النص JSON String الناتج من طلب السيرفر لابد من عمل eval له حتى ينتج عنه كائن object يمكننا الوصول إلى خواصه ، المشكله تكمن انه لو كان هذا ال JSON ناتج من مصدر غير موثوق منه او غير امن كما هو الحال فى جميع ال web services المتوافره ، يمكن ان يحتوى على self invoking anonymous function وظيفه مجهوله يتم تنفيذها تلقائيا يكون لها تحكم كامل فى الصفحه التى تستقبل هذا الرد من السيرفر ، يمكنها الوصول لل session cookie و الكتابه على الصفحه و تغير واجهه المستخدم و تنفيذ هجمات XSS و CSRF … الخ ، لذلك فإن خيار استخدام ال eval مع ال JSON String غير امن اطلاقا بالإضافه انه يؤثر على كفائه التطبيق لأن كل إستدعاء للوظيفه eval يؤدى إلى تشغيل مترجم الجافاسكربت من جديد .

لذلك دوجلاس كروكفورد مخترع ال JSON  قام بكتابه parser يقوم بإعراب نصوص ال JSON و ينتج عنها Object صالح للإستعمال او ينتج عنه error فى حاله وجد function ، يحتوى كوده على وظيفتين تحت الكائن JSON ، الوظيفه الاول parse تحول ال string إلى Object ، و الوظيفه الثانيه stringify تقوم بتحويل أى Object إلى نص JSON ، و اعتمدت على هذا ال parser غالبيه التطبيقات التى تتعامل مع صيغه البيانات JSON لأنه عالج مشكله الامان ، لكن مازل يفتقد الكفائه و السرعه و من هنا بدأت الحاجه إلى JSON api من المتصفحات نفسها .

تم معايره ال JSON api فى EcmaScript 3.1 على نفس الاسس التى كتب عليها ال parser الذى طوره دوجلاس كروكفورد مخترع ال JSON .

أول متصفح بدأ بتقديم native JSON api هو متصفح الفايرفوكس و لكنه قصر إستخدامه على مطورين ال extentions ، و بعد ذلك تم تقديم ال JSON api لمطورين الصفحات فى النسخه 3.5 الذى خرج من البيتا من بضعه ايام ، IE8 ايضا يدعم JSON api منذ ال beta 2 .

يحتوى الكائن JSON على وظيفتين الاولى parse تقوم بتحويل النص إلى كائن كما يوضح المثال البسيط التالى :

var JSONString = '{"name":"Mostafa Farghaly","age":21,"language":"JavaScript"}';
var JSONObject = JSON.parse( JSONString );
/* JSONObject
{
    name: "Mostafa Farghaly",
    age:21,
    language:"JavaScript"
}
*/
alert(JSONObject.name); //Mostafa Farghaly
alert(JSONObject.age); //22
alert(JSONObject.language); //JavaScript
 

الكود السابق قام بتحويل النص JSONString إلى كائن قابل للإستعمال JSONObject كما يوضح التعليق ، اما الوظيفه الثانيه Stringify فتقوم بتحويل الكائن إلى نص كما يوضح الكود البسيط التالى :

var JSONObject = {
    "languages":[
        "JavaScript",
        "C++",
        "Python",
        "ruby"
    ]
};

var JSONString = JSON.stringify( JSONObject );
/* JSONString
'{"languages":["JavaScript","c++","python","ruby"]}'
*/

الكود السابق قام بتحويل الكائن JSON إلى النص JSONString يمكن إرساله إلى السيرفر او تخزينه فى قاعده البيانات كما تريد .

بالنسبه للمتصفحات التى لم تدعم native JSON api مثل opera و safari و المتصفحات القديمه يمكنك استخدام ال parser الذى برمجه douglas crockfrod مخترع ال JSON ، ستجده هنا ، و هو يحتوى على نفس الوظيفتين الى شرحتهم بالأعلى .

للمزيد :
Native JSON in IE8 مقال شامل أفضل من الموجود بموزيلا و يستفيض فى شرح parse و stringify
Using JSON in FireFox

الأوسمة: , , , ,

5 تعليقات to “native JSON api”

  1. khaled Says:

    ماشاء الله مستواك رهيب في الجافاسكربت واتمني ان اصل انا وانت الي مستوي الاحتراف ..
    ممكن أساال عن عمرك .. ومن متي وانت تقرا في الجافا سكربت … وماهي مصادرك ؟؟؟ لاني غيران منك :p

    • mostafa farghaly Says:

      ههههه ، اثنين لا يشبعان طالب علم و طالب مال ، يارب لا أشبع من العلم حتى أموت ، انا تميت 22 سنه من اقل من اسبوع ، اما عن مصادرى انا لا أكف عن القراءه ، الكتاب الذى اقرأه حاليا هو Pro JavaScript for web developers 2nd edition و منتظر كتاب جون ريسج مطور ال jQuery بعنوان Ninja secrets of JavaScript المفروض انه ينتهى منه قبل نهايه الصيف ، يا مسهل ، اقرأ جافاسكربت من تقريبا 6 سنوات لكن قبل هذا ما كانت قراءه كان copy و paste ، اول كتاب قرأته كان كتاب عربى على موبايل القديم nokia 3650😀 ، يسعدنى انك غيران ، لكن ماعرفتنى عليك يمكن انا اللى اغير🙂

  2. khaled Says:

    هههههههه لا مستحيل تغير مني , تصور والله العظيم بقرأ حاليا في نفس الكتاب اللي قلت عليه , وانا في صفحة 484 وداخل علي الـ Cookies on the server , والحمد لله انه جايب أمثله علي الـ php عشان ماعرفش غيرها .. ههههههه

    بالتوفيق يا درش

  3. احمد Says:

    درس جميل يا مصطفى , بلفعل استخدام الـeval خطير جدا على موقع , و افضل تجنبها ..

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s


%d مدونون معجبون بهذه: