PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

สร้างไฟล์ json จากฐานข้อมูล รองรับการใช้งาน jsonp callback

19 August 2014 By


จากเนื้อหาเดิม เราเคยรูจักวิธีการสร้างไฟล์ json สำหรับใช้งาน ภายใน server ของเรา
แล้วจากหัวข้อ
 
การสร้าง json ไฟล์ จากฐานข้อมูล ด้วย php และการใช้งานด้วย jQuery getJSON() 
http://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( "http://www.ninenik.com/sample.json", function( data ) {
 console.log(data);
});
 
 
ทีนี้เรามาดู การเรียกใช้งานไฟล์ json แบบ jsonp หรือข้าม domain ว่าทำได้อย่างไร
 
การใช้งาน แบบ jsonp จะต้องมีการส่งค่า query parameter เข้าไปใน url ไฟล์ที่เรียกใช้ด้วย
โดยทั่วไป เขาจะใช้คำา jsonp หรือ callback หรือใช้ชื่ออื่นก็ได้ แต่ที่นี้จะใช้ชื่อว่า callback 
และตามด้วยค่าของมัน ตัวอย่าง callback=JSON_CALLBACK
 
เช่น http://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: "http://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() 
http://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 จึงนำมาเป็นบทความ เพื่อทำความเข้าใจ กันก่อน

Tags:: php json ฐานข้อมูล javascript jsonp





URL สำหรับอ้างอิง