JSONP

JSONP คือวิธีการส่งข้อมูล JSON โดยไม่ต้องจำเป็นต้องจัดการปัญหาข้ามเมือง。

JSONP ไม่ใช้ XMLHttpRequest Object。

การใช้ JSONP <script> แทนตัวอักษร

เรียกย่อ JSONP

JSONP หมายถึง JSON with Padding。

การขอข้อมูลไฟล์จากเมืองเจ้าของต่าง ๆ จะทำให้เกิดปัญหา เนื่องจากนโยบายเบื้องต้นของโครงการข้ามเมือง。

การขอข้อมูลบริเวณจากเมืองเจ้าของต่าง ๆ ไม่มีปัญหานี้。

JSONP ใช้ประโยชน์นี้และใช้แทนตัวอักษร script แทน XMLHttpRequest Object。

<script src="demo_jsonp.php">

ไฟล์ Server

เซิร์ฟเวอร์ของไฟล์ในการเรียกใช้ฟังก์ชันปิดผลลัพธ์:

ตัวอย่าง

<?php
$myJSON = '{ "name":"Bill Gates", "age":62, "city":"Seattle" }';
echo "/".$myJSON.";";
?>

แสดงไฟล์ PHP

ผลลัพธ์กลับมาคือการเรียกฟังก์ชัน "myFunc" ที่มี JSON ที่ใช้เป็นตัวอุปกรณ์。

กรุณาตรวจสอบว่าฟังก์ชันนี้มีอยู่ที่ลูกค้าหรือไม่。

ฟังก์ชัน JavaScript

ฟังก์ชัน "myFunc" ตั้งอยู่ที่ลูกค้า และใช้สำหรับการจัดการข้อมูล JSON:

ตัวอย่าง

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

ทดลองด้วยตัวเอง

สร้างแท็ก script ที่เปลี่ยนแปลง

ตัวอย่างที่แสดงข้างต้นจะปฏิบัติภาพฟังก์ชัน "myFunc" ตอนหน้าเว็บไซต์โหลด ซึ่งอาจไม่น่าพึงพอใจถ้าตำแหน่งแทนของแท็ก script ต่างกัน。

Script ควรถูกสร้างเมื่อมีความจำเป็นเท่านั้น:

ตัวอย่าง

สร้างและใส่ที่แทน <script> ตอนที่ปุ่มถูกกด:

function clickButton() {
    var 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_decode() ฟังก์ชันแปลงแนวที่มีรูปแบบเป็น JSON。
  • ทำให้ตัวแปรที่กลับมามีการบรรจุด้วยฟังก์ชัน "myFunc()"。

ตัวอย่าง JavaScript

จะเรียกใช้ฟังก์ชัน "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;
}

ทดลองด้วยตัวเอง

ฟังก์ชันตัวแปรความตอบโต้

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

บางครั้งไฟล์บริการบนเซิร์ฟเวอร์จะให้ความสำคัญให้ฟังก์ชันตัวแปรความตอบโต้:

ตัวอย่าง

ไฟล์ PHP จะเรียกใช้ฟังก์ชันที่คุณส่งมาในตำแหน่งตัวแปรความตอบโต้:

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

ทดลองด้วยตัวเอง