محاضره The JSON saga من مكتشف ال JSON

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

أعطى Douglas Crockford يوم 27/7 محاضره بعنوان The JSON saga فى اجتماع مجموعه BayJax و تم رفعها اليوم ، تكلم Douglas عن اكتشاف JSON و الحاجه اليها فى الوقت الحاضر و إستخداماتها و معايرتها و تقبلها ممن اعتادوا على XML و مستقبل JSON ، هذا الرجل انا انتظر محاضراته بفارغ الصبر ، هناك محاضرات كثيره قبل و بعد هذه المحاضره فى YUI theater و YDN theater اللتان وضعت لهما رابط فى العمود الجانبى للمدونه لكن هذه المحاضره لها مذاق خاص ، يمكنك تحميل الفيديو من هنا ، او مشاهده المحاضره اونلاين من هنا و تحميل الشرائح من هنا .

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

12 محاضره جديده من مؤتمر Ajax experience 2008

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

قد وضعت هنا و هنا ثلاث دفعات من محاضرات مؤتمر The Ajax experience 2008 ، اكبر و افضل مؤتمر لكل ما يهتم بالجافاسكربت و يتحدث به افضل مبرمجين الجافاسكربت على سطح الكره الارضيه بدون مبالغه ، اليوم بالصدفه و انا اتصفح مدونه Ajaxian المنظمه للمؤتمر وجدت 3 دفعات -12فيديو- اخرى من المحاضرات أتمنى لكم و لنفسى مشاهده ممتعه ان شاء الله .

يمكنك تحميل اول دفعه من هنا ، و هذه هى عناوين المحاضرات:

- Even Faster Web Sites with Steve Souders
- Advanced Web App Security with Joe Walker
- The 7 Habits for Exceptional Perf with Stoyan Stefanov and Nicole Sullivan

يمكنك تحميل ثانى دفعه من هنا ، و هذه هى عناوين المحاضرات:

- Advanced Animation & Physics in JavaScript with Paul Bakaus
- Adv JavaScript: Closures, Prototypes, Demystified with Stoyan Stefanov
- Practical Functional JavaScript with Oliver Steele
- Applied JSON: HTTP REST, Ajax Databases & Beyond with Kris Zip
- JSON SOA-based Client/Server App Dev with Kris Zip

يمكنك تحميل ثالث دفعه من هنا ، و هذه هى عناوين المحاضرات:

- Advanced jQuery with John Resig
- Advanced CSS and Theming of Ext with Jack Slocum
- Visual Programming with JavaScript with John Resig
- YUI for Control Freaks with Christian Heilmann

JSON

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

JSON اختصار JavaScript Object Notation ، هى وسيله لنقل البيانات بين ال client و ال server سهل قرائتها و كتابتها من قبل المطور و سهل اعرابها و فهمها من قبل الاله ، Douglass crockford من Yahoo هو اول من اكتشف ان كائنات الجافاسكربت يمكن انتقالها بين الزبون و الخادم و تم استخدامها فى تطبيقات الياهو اول مره ، ثم الان انتشر إستخدامها فستجدها فى معظم ال api التى يقدمه اى موقع غالبا ، و بالمناسبه اذا قمت بفحص تطبيق ال gmail عن طريق FireBug ستجد ان كل الرسائل و هيكلها عباره عن رسائل JSON ، اذا كيف يبدو ال JSON هذا ؟

{name:"Mostafa",age:21} // JSON [object literal ]
[mostafa,21] // JSON [ Array ]
"mostafa,21" // JSON [ String ]
true // JSON [ Boolean ]
false // JSON [ Boolean ]
1652332.584 // JSON [ Number ]
null // JSON

يقوم السيرفر بإرسال اى صيغه من صيغ ال JSON إلى المتصفح التى غالبا ماتكون object literral ، كما يوضح المثال البسيط التالى :

<?php
// josn.php
echo "{name:'mostafa',age:21,langs:['JavaScript','PHP',XML]}";
?>

يقوم السيرفر بإرسال الكائن التالى فى صوره نص :

{
name:'mostafa',
age:21,
langs:[
         'javascript',
         'PHP',
         'XML'
        ]
}

تقوم الجافاسكربت فى المتصفح بطلب البيانات عن طريق الاجاكس و إعراب الكائن كما يلى و تستخلص البيانات منه عن طريق eval كما يوضح المثال التالى :

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status == 200 || xhr.status == 304){
            var JSON = eval("("+xhr.responseText+")");
            alert(JSON.name); // mostafa
            alert(JSON.age); // 21
            alert(JSON.langs[0]); // JavaScript
        }
    }
}
xhr.open("GET","json.php",true);
xhr.send(null);

استخلاص البيانات عن طريق eval من JSON ، اسهل بكثير من استخلاص البيانات من XML عن طريق DOM .

يوجد حاليا مكاتب شامله معظم اللغات للتعامل مع JSON من بيئه السيرفر و غيرها ، لإنشاء كائنات JSON و إعرابها و فحصها ، للمزيد :
JSON.org يوجد به صفحه عربيه .