JSONP ดึงข้อมูล JSON ข้าม domain ง่ายๆ แบบ dynamic
JSONP คือรูปแบบการรับข้อมูล JSON จาก Server side ผ่านคำสั่ง script.src
แต่จะ advance ตรงที่สามารถกำหนด callback function ได้
JSONP เป็นคำสั่งในการส่งข้อมูล JSON ข้าม domain
ผ่านทาง script tag
ตัวอย่างการใช้งาน JSONP ในการรับข้อมูล JSON
//Code ฝั่ง service side (PHP)
$myJSON = '{ "name":"John", "age":30, "city":"New York" }';
echo "myFunc(".$myJSON.");";
//Code ฝั่ง javascript
function myFunc(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}
//เพิ่ม script src เพื่อรับข้อมูล json
script src="demo_jsonp.php"
//สามารถเพิ่ม script ได้จาก event ต่างๆ ได้
function clickButton() {
var s = document.createElement("script");
s.src = "demo_jsonp.php";
document.body.appendChild(s);
}
//สามารถเพิ่ม callback function ได้
function clickButton() {
var s = document.createElement("script");
s.src = "jsonp_demo_db.php?callback=myDisplayFunction";
document.body.appendChild(s);
}
//code ฝั่ง javascript
function myDisplayFunction(myObj) {
document.getElementById("demo").innerHTML = myObj.name;
}