۲۵
آبان

جلسه ۱۱۱ : آموزش JSONP

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، با یکی دیگر از جلسات دوره کامل آموزش JavaScript در خدمت شما دوستان هستیم. در این جلسه قصد داریم به آموزش JSONP در جاوا اسکریپت JavaScript و معرفی JSONP بپردازیم.

فهرست

JSONP

JSONP یک روش ارسال داده های json بدون نگرانی در مورد موضوع cross-domain است.

JSONP از شی XMLHttpRequest استفاده نمی کند.

JSONP از تگ <script> استفاده می کند.

آموزش jsonp

معرفی JSONP

JSONP مخفف JSON with Padding می باشد.

درخواست یک فایل از دامنه دیگر با توجه به سیاست cross-domain می تواند مشکلاتی را سبب شود.

درخواست یک script خارجی از دامنه دیگر این مشکل را ندارد.

JSONP از این مزیت استفاده می کند و فایل ها را با تگ script به جای شی XHR در خواست می کند.

مثال :

<script src="demo_jsonp.php">

1	<script src="demo_jsonp.php">

فایل سرور

فایلی که روی سرور قرار دارد نتایج را در یک فراخوان تابع پکیج می کند:

مثال :

 <?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';

echo "myFunc(".$myJSON.");";
?>

<?php

$myJSON = '{ "name":"John", "age":30, "city":"New York" }';

echo "myFunc(".$myJSON.");";

کد بالا یک ارجاع به تابعی به نام myFunc با داده های json به عنوان پارامتر بر می گرداند.

مطمئن شوید که تابع در سمت کلاین وجود دارد.

تابع جاوا اسکریپت

تابع myFunc در سمت کاربر قرار دارد و آماده رسیدگی به داده های json می باشد:

مثال :

function myFunc(myObj) {
    document.getElementById("demo").innerHTML = myObj.name;
}

function myFunc(myObj) {

document.getElementById("demo").innerHTML = myObj.name;

}

ایجاد یک تگ script پویا

مثال بالا تابع myFunc را هنگام بارگذاری صفحه جایی که تگ script قرار دارد، اجرا می شود که چندان خوشایند نیست.

تگ script هنگام نیاز باید ایجاد شود:

مثال :

function clickButton() {
    var s = document.createElement("script");
    s.src = "demo_jsonp.php";
    document.body.appendChild(s);
}

function clickButton() {

var s = document.createElement("script");

s.src = "demo_jsonp.php";

document.body.appendChild(s);

}

مثال بالا خیلی ایستا است.

مثال را با ارسال json به یک فایل php پویا می کنیم و به فایل php اجازه می دهیم تا شی json را بر اساس داده های دریافتی بر گرداند.

مثال :

<?php
header("Content-Type: application/json; charset=UTF-8");
$obj = json_decode($_GET["x"], false);

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");
$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit);
$outp = array();
$outp = $result->fetch_all(MYSQLI_ASSOC);

echo "myFunc(".json_encode($outp).")";
?>

<?php

header("Content-Type: application/json; charset=UTF-8");

$obj = json_decode($_GET["x"], false);

$conn = new mysqli("myServer", "myUser", "myPassword", "Northwind");

$result = $conn->query("SELECT name FROM ".$obj->$table." LIMIT ".$obj->$limit);

$outp = array();

$outp = $result->fetch_all(MYSQLI_ASSOC);

echo "myFunc(".json_encode($outp).")";

تابع myFunc که توسط فایل php بالا فذاخوانی می شود:

مثال :

function clickButton() {
    var obj, s
    obj = { "table":"products", "limit":10 };
    s = document.createElement("script");
    s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
    document.body.appendChild(s);
}
function myFunc(myObj) {
    var x, txt = "";
    for (x in myObj) {
        txt += myObj[x].name + "<br>";
    }
    document.getElementById("demo").innerHTML = txt;
}

function clickButton() {

var obj, s

obj = { "table":"products", "limit":10 };

s = document.createElement("script");

s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);

document.body.appendChild(s);

}

function myFunc(myObj) {

var x, txt = "";

for (x in myObj) {

txt += myObj[x].name + "<br>";

}

document.getElementById("demo").innerHTML = txt;

}

Callback Function

هنگامی که هیچ کنترلی روی فایل سرور ندارید چگونه فایل سرور را برای فراخوانی تابع می گیرید؟

گاهی اوقات فایل سرور یک callback function را به عنوان پارامتر ترجیح می دهد:

مثال :

function clickButton() {
    var s = document.createElement("script");
    s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
    document.body.appendChild(s);
}

function clickButton() {

var s = document.createElement("script");

s.src = "jsonp_demo_db.php?callback=myDisplayFunction";

document.body.appendChild(s);

}

جلسه آموزش JSONP نیز به پایان رسید، در بخش بعدی به بررسی تفاوت های جی کوئری و جاوا اسکریپت می پردازیم.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 2

erfan
اردیبهشت ۲۵, ۱۴۰۰
سلام
در مورد AJAX و JSONدر حد اشنایی توی این اموزش ها گفته شده یا حرفه ای؟؟
و آیا مطالب آموزشی جامع و کاملشون جایی آپلود کردین؟؟
از جلسه اول تا اینجا با شما js رو خوندم خیلی خوب بود
ممنون از زحماتتون خدا قوت.
پاسخ دادن
- صادق
  اردیبهشت ۲۵, ۱۴۰۰
  سلام. ممنون
  ما تا جایی که تونستیم سعی کردیم آموزش ها جامع باشند اما هیچ آموزشی نمی تونه ادعای کامل بودن داشته باشه. بنابراین اگر می خواهید به هر زبان برنامه نویسی تسلط پیدا کنید، باید منابع مختلف رو مطالعه کنید و همچنین خودتون به صورت عملی کار کنید و اصطلاحا دست به کد بشید و تمرین و مثال حل کنید. به عنوان مثال کتاب های انگلیسی یا ترجمشون و یا سایت اصلی زبان ها که مرجع کاملی هستند.
  پاسخ دادن

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۱۱ : آموزش JSONP

JSONP

معرفی JSONP

فایل سرور

تابع جاوا اسکریپت

ایجاد یک تگ script پویا

Callback Function

لیست مطالب دوره

کار با فرم ها

اشیا

توابع

HTML DOM

BOM

AJAX

JSON

مقایسه ی جاوا اسکریپت با jQuery

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ