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;

}