## JSON و JSONP في لغة JavaScript: شرح مفصل وأمثلة

### مقدمة

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

### JSON: تنسيق البيانات الفعّال

#### ما هو JSON؟

JSON هو تنسيق خفيف لتبادل البيانات. يُستخدم بشكل شائع في تطبيقات الويب لإرسال واستقبال البيانات من وإلى الخادم. يُعد JSON بديلاً شائعًا لـ XML نظرًا لسهولة قراءته وكتابته وفهمه من قبل البشر والآلات.

#### خصائص JSON

1. **بساطة التركيب**: يتكون JSON من أزواج مفتاح/قيمة، مفصولة بفواصل، وتُغلف جميعها بين أقواس معقوفة.
2. **قابلية النقل**: يمكن استخدام JSON في مختلف لغات البرمجة.
3. **سهولة القراءة**: يُعتبر JSON سهل القراءة والفهم للمبرمجين.

#### مثال على JSON

on
{
  "name": "Ahmed",
  "age": 30,
  "isStudent": false,
  "courses": ["JavaScript", "Python", "Data Science"]
}

### JSONP: الحل لتجاوز سياسة نفس المصدر

#### ما هو JSONP؟

JSONP (JSON with Padding) هو تقنية تُستخدم لتجاوز سياسة نفس المصدر (Same-Origin Policy) في المتصفحات. [شركة برمجة مصرية] تسمح هذه السياسة فقط بطلبات AJAX إلى نفس النطاق، ولكن JSONP يقدم حلاً من خلال استخدام عنصر “ لتحميل البيانات.

#### كيف يعمل JSONP؟

بدلاً من إرسال طلب AJAX عادي، يقوم JSONP بإنشاء عنصر “ ديناميكي يتم تحميله من نطاق آخر. يقوم الخادم بالرد ببيانات JSON مغلفة داخل استدعاء دالة، وعندما يتم تحميل السكربت، يتم تنفيذ الدالة وتمرر البيانات كمعامل.

#### مثال على JSONP

لنفترض أن لدينا خادم يستجيب ببيانات JSONP:

// الرد من الخادم
callbackFunction({
  "name": "Sara",
  "age": 25,
  "isStudent": true
});

هنا كيف يمكننا استخدام JSONP في JavaScript:

“`html

JSONP Example

function callbackFunction(data) {
console.log(“Name: ” + data.name);
console.log(“Age: ” + data.age);
console.log(“Is Student: ” + data.isStudent);
}

// إنشاء عنصر script
var script = document.createElement(‘script’);
script.src = ‘https://example.com/jsonp?callback=callbackFunction’;
document.body.appendChild(script);

“`

### الفروقات بين JSON و JSONP

1. **الاستخدام**: JSON يُستخدم بشكل أساسي لتبادل البيانات عبر نفس النطاق، بينما JSONP يُستخدم لتجاوز قيود سياسة نفس المصدر.
2. **الأمان**: JSONP قد يعرض التطبيقات لهجمات البرمجة عبر المواقع (XSS) إذا لم يتم استخدامه بشكل صحيح، بينما JSON يُعتبر أكثر أمانًا.
3. [شركة برمجة مصرية] **التقديم**: JSON يتطلب طلبات AJAX عادية، بينما JSONP يستخدم عنصر “ لتحميل البيانات.

### خاتمة

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