MohirDox

Ko'rinishi

JSONP haqida ​

JSONP — bu domenlararo (cross-domain) muammolardan xavotir olmasdan JSON ma'lumotlarini yuborish usuli. JSONP XMLHttpRequest obyektidan foydalanmaydi. Buning o'rniga u <script> tegidan foydalanadi.

JSONP-ga kirish ​

JSONP "JSON with Padding" (to'ldirilgan JSON) degan nomning qisqartmasidir.

Boshqa domendan fayl so'rash domenlararo siyosat (cross-domain policy) tufayli muammolarga olib kelishi mumkin. Biroq, boshqa domendan tashqi skriptni so'rashda bunday muammo yo'q. JSONP mana shu afzallikdan foydalanadi va XMLHttpRequest obyekti o'rniga skript tegi yordamida fayllarni so'raydi.

html
<script src="demo_jsonp.php"></script>

Server fayli ​

Serverdagi fayl natijani funksiya chaqiruvi ichiga o'raydi:

Misol (demo_jsonp.php) ​

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

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

Natija "myFunc" nomli funksiyaga JSON ma'lumotlarini parametr sifatida yuboradigan chaqiruvni qaytaradi. Bunda ushbu funksiya mijoz (client) tomonida mavjud bo'lishi shart.

JavaScript funksiyasi ​

"myFunc" deb nomlangan funksiya mijoz tomonida joylashgan va JSON ma'lumotlarini qabul qilishga tayyor:

Misol ​

js
function myFunc(myObj) {
  document.getElementById('demo').innerHTML = myObj.name
}

Dinamik skript tegini yaratish ​

Yuqoridagi misol sahifa yuklanayotganda, skript tegi qayerda joylashganiga qarab "myFunc" funksiyasini bajaradi. Bu har doim ham qulay emas. Skript tegi faqat kerak bo'lganda yaratilishi kerak:

Misol ​

Tugma bosilganda <script> tegini yaratish va joylashtirish:

js
function clickButton() {
  let s = document.createElement('script')
  s.src = 'demo_jsonp.php'
  document.body.appendChild(s)
}

Dinamik JSONP natijasi ​

Yuqoridagi misollar hali ham juda statik. Misolni dinamik qilish uchun PHP fayliga ma'lumot yuboring va PHP fayli olingan ma'lumotlar asosida JSON obyektini qaytarsin.

PHP fayli ​

php
<?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).")";
?>

JavaScript misoli ​

"myFunc" funksiyasi PHP faylidan chaqiriladi:

js
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
}

Callback funksiyasi ​

Agar sizda server fayli ustidan nazorat bo'lmasa, server fayli to'g'ri funksiyani chaqirishiga qanday erishish mumkin? Ba'zan server fayli parametr sifatida qayta aloqa (callback) funksiyasini taklif qiladi:

Misol ​

PHP fayli siz callback parametri sifatida yuborgan funksiyani chaqiradi:

js
let s = document.createElement('script')
s.src = 'jsonp_demo_db.php?callback=myDisplayFunction'
document.body.appendChild(s)