JSONP (JSON with Padding) یک روش قدیمی برای درخواست داده‌ها از سرورهای دیگر (Cross-Origin Requests) است که محدودیت CORS در جاوااسکریپت را دور می‌زند.
JSONP به جای AJAX معمولی، داده‌ها را با یک تابع callback دریافت می‌کند.

🔹 1. ساختار JSONP

• سرور داده‌ها را در قالب تابع جاوااسکریپت بازمی‌گرداند:

callback({
  "name": "Ali",
  "age": 25
});

• callback نام تابعی است که روی کلاینت تعریف شده و داده را پردازش می‌کند.

🔹 2. استفاده در HTML + JavaScript

HTML:

<div id="demo"></div>
<script>
  function handleData(data) {
    document.getElementById("demo").innerHTML = 
      `Name: ${data.name}, Age: ${data.age}`;
  }
</script>
<script src="https://example.com/data?callback=handleData"></script>

📌 وقتی فایل JSONP بارگذاری می‌شود، تابع handleData با داده‌های JSON فراخوانی می‌شود.

🔹 3. نکات مهم

• JSONP فقط GET requests را پشتیبانی می‌کند

• سرور باید داده‌ها را در قالب callback بازگرداند

• برای دور زدن محدودیت CORS استفاده می‌شود

• این روش امنیت پایین‌تری نسبت به CORS دارد

🔹 4. مقایسه با AJAX

🔹 5. مثال ساده سرور JSONP

فرض کنید فایل data.php به صورت زیر داده‌ها را برمی‌گرداند:

<?php
$callback = $_GET['callback'];
$data = array("name" => "Ali", "age" => 25);
echo $callback . '(' . json_encode($data) . ');';
?>

📌 وقتی کلاینت data.php?callback=handleData را بارگذاری کند، تابع handleData فراخوانی می‌شود.

✅ خلاصه

• JSONP → ارسال داده‌ها از سرورهای دیگر بدون محدودیت CORS

• داده‌ها در قالب تابع callback باز می‌گردند

• فقط GET requests پشتیبانی می‌شوند

• امنیت کمتر از AJAX با CORS دارد

• کاربرد: بارگذاری داده‌های خارجی در صفحات وب