JSONP
JSONP เป็นวิธีการส่งข้อมูล JSON โดยไม่ต้องกังวลเกี่ยวกับปัญหาข้ามโดเมน
JSONP ไม่ได้ใช้XMLHttpRequestวัตถุ
JSONP ใช้<script>แท็กแทน
บทนำ JSONP
JSONP ย่อมาจาก JSON พร้อม Padding
การขอไฟล์จากโดเมนอื่นอาจทำให้เกิดปัญหาได้ เนื่องจากนโยบายข้ามโดเมน
การขอสคริปต์ ภายนอก จากโดเมนอื่นไม่มีปัญหานี้
JSONP ใช้ประโยชน์จากข้อดีนี้ และขอไฟล์โดยใช้แท็กสคริปต์แทนXMLHttpRequestอ็อบเจ็กต์
<script src="demo_jsonp.php">
ไฟล์เซิร์ฟเวอร์
ไฟล์บนเซิร์ฟเวอร์ห่อผลลัพธ์ในการเรียกใช้ฟังก์ชัน:
ตัวอย่าง
<?php
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
?>
ผลลัพธ์จะส่งคืนการเรียกไปยังฟังก์ชันชื่อ "myFunc" โดยมีข้อมูล JSON เป็นพารามิเตอร์
ตรวจสอบให้แน่ใจว่าฟังก์ชันนี้มีอยู่ในไคลเอนต์
ฟังก์ชัน JavaScript
ฟังก์ชันที่ชื่อ "myFunc" ตั้งอยู่บนไคลเอนต์ และพร้อมที่จะจัดการข้อมูล JSON:
ตัวอย่าง
function myFunc(myObj)
{
document.getElementById("demo").innerHTML =
myObj.name;
}
การสร้างแท็กสคริปต์แบบไดนามิก
ตัวอย่างข้างต้นจะเรียกใช้ฟังก์ชัน "myFunc" เมื่อมีการโหลดหน้าเว็บ ขึ้นอยู่กับตำแหน่งที่คุณใส่แท็กสคริปต์ซึ่งไม่น่าพอใจนัก
ควรสร้างแท็กสคริปต์เมื่อจำเป็นเท่านั้น:
ตัวอย่าง
สร้างและแทรกแท็ก <script> เมื่อคลิกปุ่ม:
function clickButton() {
let s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
ผลลัพธ์ JSONP แบบไดนามิก
ตัวอย่างข้างต้นยังคงนิ่งมาก
ทำให้ตัวอย่างเป็นไดนามิกโดยส่ง JSON ไปยังไฟล์ php และให้ไฟล์ php ส่งคืนอ็อบเจ็กต์ JSON ตามข้อมูลที่ได้รับ
ไฟล์ 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).")";
?>
ไฟล์ PHP อธิบาย:
- แปลงคำขอเป็นวัตถุโดยใช้ฟังก์ชัน PHP json_decode( )
- เข้าถึงฐานข้อมูลและกรอกข้อมูลในอาร์เรย์ด้วยข้อมูลที่ร้องขอ
- เพิ่มอาร์เรย์ให้กับวัตถุ
- แปลงอาร์เรย์เป็น JSON โดยใช้ฟังก์ชันjson_encode()
- ตัด "myFunc()" รอบวัตถุที่ส่งคืน
ตัวอย่าง JavaScript
ฟังก์ชัน "myFunc" จะถูกเรียกจากไฟล์ php:
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;
}
ฟังก์ชั่นโทรกลับ
เมื่อคุณไม่มีการควบคุมไฟล์เซิร์ฟเวอร์ คุณจะให้ไฟล์เซิร์ฟเวอร์เรียกใช้ฟังก์ชันที่ถูกต้องได้อย่างไร
บางครั้งไฟล์เซิร์ฟเวอร์มีฟังก์ชันเรียกกลับเป็นพารามิเตอร์:
ตัวอย่าง
ไฟล์ php จะเรียกใช้ฟังก์ชันที่คุณส่งเป็นพารามิเตอร์การโทรกลับ:
let s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);