JSON หรือ Java Script Object Notation เป็นวิธีการที่ทำให้ JavaScript แลกเปลี่ยนข้อมูลกับ Server ได้อย่างง่ายดาย หรือเป็นไวยากรณ์สำหรับการจัดเก็บและการแลกเปลี่ยนข้อมูล รวมถึงเป็นทางเลือกใหม่ที่สามารถทดแทน
XML ได้..
ตัวอย่าง JSON Arrays
โค้ด: เลือกทั้งหมด
{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}
ซึ่งถ้าหากเราเขียนด้วย XML ก็จะเป็นประมาณนี้
โค้ด: เลือกทั้งหมด
<employees>
<employee>
<firstName>John</firstName> <lastName>Doe</lastName>
</employee>
<employee>
<firstName>Anna</firstName> <lastName>Smith</lastName>
</employee>
<employee>
<firstName>Peter</firstName> <lastName>Jones</lastName>
</employee>
</employees>
เราจะเห็นได้ว่ามันแตกต่างกันชัดเจน ถ้าหากเขียนในรูปแบบ json อาจจะดูง่ายกว่าและไม่ค่อยรก แต่ถ้าหากว่า มีหลายๆข้อมูลและไม่จัดระเบียบให้ดีๆก็จะทำให้ตาลายเหมือนกัน
นอกจากนั้น อย่าพึ่งเข้าใจผิด JSON ไม่ใช่ programming language แต่เป็นข้อความหรือข้อมูลไว้สำหรับ แลกเปลี่ยนกันหรือติดต่อกับ server ได้ง่าย
ตัวอย่างการใช้งานผ่าน JavaScript
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<body>
<h2>JSON Object Creation in JavaScript</h2>
<p id="demo"></p>
<script>
var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}';
var obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
</script>
</body>
</html>
จะเห็นว่ามีการใช้ ฟังชั่น JSON.parse(); เพื่อวิเคราะห์แยกแยะข้อมูลเป็นส่วนๆกัน
ซึ่งแต่ละส่วนจะเก็บในตัวแปร obj.name, obj.street,obj.phone
ผลลัพธ์
- json.jpg (15.16 KiB) Viewed 2381 times
ปัจจุบันมี plugin หลายๆ ตัวมาใช้ JSON อยู่บ่อยๆ เพื่อง่ายในการวิเคราะห์ข้อมูลและรวดเร็ว และหวังว่าบทความนี้จะเป็นประโยช์น์ไม่มากก็น้อย
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ :Jquery & Ajax Knowledge
-
การทำรูปภาพให้ซูมได้ด้วย Jquery
-
การค้นหาข้อมูลโดยใช้ AJAX PHP
[b]JSON[/b] หรือ Java Script Object Notation เป็นวิธีการที่ทำให้ JavaScript แลกเปลี่ยนข้อมูลกับ Server ได้อย่างง่ายดาย หรือเป็นไวยากรณ์สำหรับการจัดเก็บและการแลกเปลี่ยนข้อมูล รวมถึงเป็นทางเลือกใหม่ที่สามารถทดแทน [url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%AA%E0%B8%AD%E0%B8%99-ajax.html]XML[/url] ได้..
[b]ตัวอย่าง JSON Arrays[/b]
[code]{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}[/code]
ซึ่งถ้าหากเราเขียนด้วย XML ก็จะเป็นประมาณนี้
[code]<employees>
<employee>
<firstName>John</firstName> <lastName>Doe</lastName>
</employee>
<employee>
<firstName>Anna</firstName> <lastName>Smith</lastName>
</employee>
<employee>
<firstName>Peter</firstName> <lastName>Jones</lastName>
</employee>
</employees>[/code]
เราจะเห็นได้ว่ามันแตกต่างกันชัดเจน ถ้าหากเขียนในรูปแบบ json อาจจะดูง่ายกว่าและไม่ค่อยรก แต่ถ้าหากว่า มีหลายๆข้อมูลและไม่จัดระเบียบให้ดีๆก็จะทำให้ตาลายเหมือนกัน
นอกจากนั้น อย่าพึ่งเข้าใจผิด JSON ไม่ใช่ programming language แต่เป็นข้อความหรือข้อมูลไว้สำหรับ แลกเปลี่ยนกันหรือติดต่อกับ server ได้ง่าย
[b]ตัวอย่างการใช้งานผ่าน JavaScript [/b]
[code]<!DOCTYPE html>
<html>
<body>
<h2>JSON Object Creation in JavaScript</h2>
<p id="demo"></p>
<script>
var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}';
var obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
</script>
</body>
</html>[/code]
จะเห็นว่ามีการใช้ ฟังชั่น JSON.parse(); เพื่อวิเคราะห์แยกแยะข้อมูลเป็นส่วนๆกัน
ซึ่งแต่ละส่วนจะเก็บในตัวแปร obj.name, obj.street,obj.phone
[b]ผลลัพธ์ [/b]
[attachment=0]json.jpg[/attachment]
ปัจจุบันมี plugin หลายๆ ตัวมาใช้ JSON อยู่บ่อยๆ เพื่อง่ายในการวิเคราะห์ข้อมูลและรวดเร็ว และหวังว่าบทความนี้จะเป็นประโยช์น์ไม่มากก็น้อย
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ :Jquery & Ajax Knowledge
-[url=https://www.mindphp.com/forums/viewtopic.php?f=78&t=48482]การทำรูปภาพให้ซูมได้ด้วย Jquery[/url]
-[url=https://www.mindphp.com/forums/viewtopic.php?f=78&t=44752]การค้นหาข้อมูลโดยใช้ AJAX PHP[/url]