จากเนื้อหาเดิม เราเคยรูจักวิธีการสร้างไฟล์ json สำหรับใช้งาน ภายใน server ของเรา
แล้วจากหัวข้อ
การสร้าง json ไฟล์ จากฐานข้อมูล ด้วย php และการใช้งานด้วย jQuery getJSON()
https://www.ninenik.com/content.php?arti_id=373 via @ninenik
แต่สำหรับ การสร้างไฟล์ json เพื่อรองรับการใช้งาน jsonp หรือการเรียกใช้ ระหว่าง domain
หรือจากเว็บไซต์อื่นๆ ได้ ผ่าน javascript นั้น จำเป็นต้องมีการกำหนดค่า function call เพิ่มเข้ามา
ตัวอย่าง sample.json
{
"name":"ninenik",
"domain":"www.ninenik.com"
}
จากตัวอย่างไฟล์ ด้านบน ถ้ามีการเรียกใช้งาน ไฟล์ json ผ่าน ajax หรือ XMLHttpRequest
ภายใน server domian เดียวกัน ก็จะสามารถทำได้
ตัวอย่างเช่นการเรียกใช้งาน ด้วย jquery
$.getJSON( "sample.json", function( data ) {
console.log(data);
});
แต่สำหรับ การใช้งาน jsonp เช่น เราอยู่ที่ server coffeeiam.com
เราจะไม่สามารถเรียกใช้งาน คำสั่งด้านล่างนี้ได้
// ไม่สามารถเรียกใช้งานไฟล์ json ผ่าน ninenik.com จาก เว็บไซต์ coffeeiam.com
$.getJSON( "https://www.ninenik.com/sample.json", function( data ) {
console.log(data);
});
ทีนี้เรามาดู การเรียกใช้งานไฟล์ json แบบ jsonp หรือข้าม domain ว่าทำได้อย่างไร
การใช้งาน แบบ jsonp จะต้องมีการส่งค่า query parameter เข้าไปใน url ไฟล์ที่เรียกใช้ด้วย
โดยทั่วไป เขาจะใช้คำา jsonp หรือ callback หรือใช้ชื่ออื่นก็ได้ แต่ที่นี้จะใช้ชื่อว่า callback
และตามด้วยค่าของมัน ตัวอย่าง callback=JSON_CALLBACK
เช่น https://www.ninenik.com/sample.json?callback=JSON_CALLBACK
และไฟล์ sample.json ก็ต้องมีรูปแบบ ดังนี้คือ
ค่าของ parameter ชื่อ callback คือ JSON_CALLBACK ต่อด้วยวงเล็บเปิดปิด
และมีรูปแบบไฟล์ json ปกติกอยู่อยู่ด้านใน
ตัวอย่างไฟล์ sample.json สำหรับใช้งาน jsonp ในรูปแบบ JSON_CALLBACK();
JSON_CALLBACK({
"name":"ninenik",
"domain":"www.ninenik.com"
});
เมื่อเรามีไฟล์ json รูปบบ ที่รองรับการใช้งาน jsonp แล้ว
เราก็สามารถเรียกใช้จาก server อื่นได้ เช่น เรียกใช้จาก coffeeiam.com
ด้านล่างจะเป็นรูปแบบ การเรียกใช้งาน ผ่าน ajax ของ jquery
$.ajax({
url: "https://www.ninenik.com/sample.json",
dataType: "jsonp",
jsonp: "callback",
jsonpCallback:"JSON_CALLBACK"
}).done(function (data){
console.log(data);
});
ทีนี้มาเข้าจุดประสงค์ของเนื้อหา คือเราต้องการสร้างไฟล์ json แบบรองรับทั้ง
ภายใน server และจาก server อื่น โดยจะเป็นการสร้างจากฐานข้อมูล ซึ่งจะใช้รูปแบบ
เดิมจากหัวข้อ
การสร้าง json ไฟล์ จากฐานข้อมูล ด้วย php และการใช้งานด้วย jQuery getJSON()
https://www.ninenik.com/content.php?arti_id=373 via @ninenik
โค้ดสร้างไฟล์ json ด้วย php
ตัวอย่าง เราจะได้ไฟล์เช่น กำหนดชื่อ province.php ไฟล์นี้เมื่อเรียกใช้ จะแสดงผลเป็น json ไฟล์
<?php
header("Content-type:application/json; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
// ส่วนติดต่อกับฐานข้อมูล
mysql_connect("localhost","root","test") or die("Cannot connect the Server");
mysql_select_db("test") or die("Cannot select database");
mysql_query("set character set utf8");
?>
<?php
$q="SELECT * FROM province_th WHERE 1 ORDER BY province_id";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
$json_data[]=array(
"province_id"=>$rs['province_id'],
"province_name"=>$rs['province_name'],
);
}
$json= json_encode($json_data);
if(isset($_GET['callback']) && $_GET['callback']!=""){
echo $_GET['callback']."(".$json.");";
}else{
echo $json;
}
?>
เป็นอันจบ เนื้อหาทำความเข้าใจ กับ json แบบง่าย
หมายเหตุ เนื้อหาส่วนนี้มีความสำคัญ ในการศึกษาเพิ่มเติม สำหรับ angularjs หรือ การใช้งาน
ionicframework จึงนำมาเป็นบทความ เพื่อทำความเข้าใจ กันก่อน
เนื้อหาที่เกี่ยวข้อง