JSONP (JSON with Padding)
JSONP — eskirgan (legacy) usul.
Zamonaviy ilovalar odatda buning o‘rniga CORS bilan fetch()’dan foydalanadi.
JSONP qaytarilgan ma’lumotlarni JavaScript sifatida bajaradi va faqat ishonchli serverlar bilan ishlatilishi kerak.
JSONP’ga kirish
JSONP — domenlararo (cross-domain) muammolar haqida qayg‘urmasdan JSON ma’lumotlarini yuborish usuli.
JSONP XMLHttpRequest obyektidan foydalanmaydi.
JSONP uses the <script> tag instead.
JSONP Padding bilan JSON degan ma’noni anglatadi.
Boshqa domendan fayl so‘rash domenlararo siyosat tufayli muammolarga olib kelishi mumkin.
Boshqa domendan tashqi skriptni so‘rashda bunday muammo bo‘lmaydi.
JSONP bu afzallikdan foydalanadi va fayllarni skript yorlig‘i yordamida so‘raydi
XMLHttpRequest obyekti o‘rniga.
<script src="demo_jsonp.php">
Server fayli
Serverdagi fayl natijani funksiya chaqiruviga o‘tkazadi:
Misol
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
Show PHP file »
Natija parametr sifatida JSON ma’lumotlari bilan "myFunc" nomli funksiya chaqiruvini qaytaradi.
Funksiya mijozda mavjudligiga ishonch hosil qiling.
JavaScript funksiyasi
"myFunc" nomli funksiya mijozda joylashgan va JSON ma’lumotlarini qayta ishlashga tayyor:
Misol
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
O‘zingiz sinab ko‘ring »
Dinamik script tegini yaratish
Yuqoridagi misol skript tegini qo‘ygan joyingizga qarab sahifa yuklanayotganda "myFunc" funksiyasini bajaradi, bu unchalik qoniqarli emas.
Skript yorlig‘i faqat kerak bo‘lganda yaratilishi kerak:
Misol
Tugma bosilganda <script> tegini yarating va sahifaga joylashtiring:
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
O‘zingiz sinab ko‘ring »
Dinamik JSONP natijasi
Yuqoridagi misollar hali ham juda statik.
PHP fayliga JSON yuborish orqali misolni dinamik qiling va PHP fayli olingan ma’lumotlarga asoslanib JSON obyektini qaytarishiga ruxsat bering.
PHP fayl
<?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 fayl izohi:
- PHP funksiyasidan foydalanib, so‘rovni obyektga aylantiring json_decode() .
- Ma’lumotlar bazasiga kiring va massivni so‘ralgan ma’lumotlar bilan to‘ldiring.
- Massivni obyektga qo‘shing.
- json_encode() funksiyasidan foydalanib massivni JSONga aylantiring.
- Qaytariladigan obyektni "myFunc()" bilan o‘rang.
JavaScript misoli
"myFunc" funksiyasi php faylidan chaqiriladi:
const obj = { table: "products", limit: 10 };
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?x=" + JSON.stringify(obj);
document.body.appendChild(s);
function myFunc(myObj) {
let txt = "";
for (let x in myObj)
{
txt += myObj[x].name + "<br>";
}
document.getElementById("demo").innerHTML = txt;
}
O‘zingiz sinab ko‘ring »
Callback funksiya
Agar siz server faylini nazorat qila olmasangiz, to‘g‘ri funksiyani chaqirish uchun server faylini qanday qilib olishingiz mumkin?
Ba’zan server fayli callback funksiyani parametr sifatida taklif qiladi:
Misol
php fayli siz topshirgan funksiyani callback parametri sifatida chaqiradi:
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!