เจสันพี

สารบัญ

แสดงสารบัญ

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 เป็น พารามิเตอร์

ตรวจสอบให้แน่ใจว่าฟังก์ชันนั้นมีอยู่บนไคลเอนต์

ฟังก์ชันจาวาสคริปต์

ฟังก์ชันชื่อ "myFunc" อยู่บนไคลเอนต์และพร้อมที่จะจัดการ ข้อมูล JSON:

ตัวอย่าง

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Request JSON using the script tag</h2>
<p>The PHP file returns a call to a function that will handle the JSON data.</p>
<p id="demo"></p>

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

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

</body>
</html>

การสร้างแท็กสคริปต์แบบไดนามิก

ตัวอย่างด้านบนจะดำเนินการฟังก์ชัน "myFunc" เมื่อเพจนั้นอยู่ กำลังโหลดขึ้นอยู่กับตำแหน่งที่คุณใส่แท็กสคริปต์ซึ่งไม่น่าพอใจมากนัก

ควรสร้างแท็กสคริปต์เมื่อจำเป็นเท่านั้น:

ตัวอย่าง

สร้างและแทรกแท็ก <script> เมื่อมีการคลิกปุ่ม:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>

<body>

<h2>Click the Button.</h2>
<p>A script tag with a src attribute is created and placed in the document.</p>
<p>The PHP file returns a call to a function with the JSON object as a parameter.</p>

<button onclick="clickButton()">Click me!</button>

<p id="demo"></p>

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

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

</body>
</html>

ผลลัพธ์ 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()" รอบวัตถุที่ส่งคืน

ตัวอย่างจาวาสคริปต์

ฟังก์ชั่น "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;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<p>A script tag with a src attribute is created and placed in the document.</p>
<p>The PHP file returns a call to a function with an object as a parameter.</p>
<p id="demo"></p>

<p>Try changing the table property from "customers" to "products".</p>

<script>
const obj = { table: "customers", 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;
}
</script>

</body>
</html>

ฟังก์ชั่นการโทรกลับ

เมื่อคุณไม่สามารถควบคุมไฟล์เซิร์ฟเวอร์ได้ คุณจะรับไฟล์เซิร์ฟเวอร์ได้อย่างไร เพื่อเรียกใช้ฟังก์ชันที่ถูกต้อง?

บางครั้งไฟล์เซิร์ฟเวอร์ก็มีฟังก์ชันโทรกลับเป็น พารามิเตอร์:

ตัวอย่าง

ไฟล์ php จะเรียกใช้ฟังก์ชันที่คุณส่งเป็นพารามิเตอร์เรียกกลับ:

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

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>Request With a Callback Function</h2>
<p>The PHP file returns a call to the function you send as a callback.</p>
<p id="demo"></p>

<script>
let s = document.createElement("script");
s.src = "demo_jsonp2.php?callback=myDisplayFunction";
document.body.appendChild(s);

function myDisplayFunction(myObj) {
  document.getElementById("demo").innerHTML = myObj.name;
}
</script>

</body>
</html>