บทที่ 17 AJAX กับ JSON (ตอนที่ 1)
JSON (JavaScript Object Notation) เป็นวิิธีหนึ่งที่จะทำให้ AJAX แลกเปลี่ยนข้อมูลกับ Server ได้อย่างง่ายๆ ซึ่งถ้าใช้ XML ส่งข้อมูลกลับมาเราก็ยังต้องมี parser เพื่อจัดการแยกข้อมูลออก เพื่อไปจัดการแสดงผลอีกที(หรือแม้กระทั่งส่งข้อมูลมาในแบบ Text เช่นกัน) แต่ JSON จะใช้เพียงคำสั่ง eval() ก็จะได้ข้อมูลกลับมาเป็น Array เพื่อให้ไปทำการจัดการแสดงผลได้อย่างง่ายๆ โดยไม่ต้องผ่านขั้นตอนการ parser
สมมุติให้มีข้อมูลเป็นดัง Array นี้
JSON จะ ใช้ [ ] แทน Array และ { } แทน Hash (หรือ Associative array) จากตัวอย่างถ้าแปลงเป็น JSON จะได้ข้อมูลในรูปของ JSON ดังนี้
สำหรับการแปลงกลับเป็นข้อมูล ก็ใช้เพียงคำสั่ง eval() เท่านั้นข้อมูลก็จะกลับมาเป็น Array เช่น
นอกจากนี้ JSON ยังใช้งานกับภาษาอื่นๆ ได้อีกมากมายนะครับ เช่น
Library JSON สำหรับ ภาษา C
Library JSON สำหรับ ภาษา PHP
หรือ ภาษา อื่นๆ
โค้ดตัวอย่างการใช้งาน JSON
สมมุติให้มีข้อมูลเป็นดัง Array นี้
members[0][firstname]="สมชาย"
members[0][lastname]="สายเสมอ"
members[1][firstname]="ไมรู้"
members[1][lastname]="ไม่ทราบ"
JSON จะ ใช้ [ ] แทน Array และ { } แทน Hash (หรือ Associative array) จากตัวอย่างถ้าแปลงเป็น JSON จะได้ข้อมูลในรูปของ JSON ดังนี้
[
{"firstname":"สมชาย", "lastname":"สายเสมอ"},
{"firstname":"ไม่รู้", "lastname":"ไม่ทราบ"}
]
สำหรับการแปลงกลับเป็นข้อมูล ก็ใช้เพียงคำสั่ง eval() เท่านั้นข้อมูลก็จะกลับมาเป็น Array เช่น
// สมมุติว่า members_data เป็นไปตามตัวอย่างข้างบน
var members = eval('(' +members_data+')');
// เราก็จะได้ members เป็น Array ของข้อมูล
alert(members[0].firstname); //สมชาย
นอกจากนี้ JSON ยังใช้งานกับภาษาอื่นๆ ได้อีกมากมายนะครับ เช่น
Library JSON สำหรับ ภาษา C
Library JSON สำหรับ ภาษา PHP
หรือ ภาษา อื่นๆ
โค้ดตัวอย่างการใช้งาน JSON
<br />คลิกเพื่อดูข้อมูล ลำดับที่<br />
<input type="button" value="0" onclick="getData(this.value)" />
<br /><input type="button" value="1" onclick="getData(this.value)" />
<script language="Javascript">
var members_data='[{"firstname":"สมชาย", "lastname":"สายเสมอ"},{"firstname":"ไม่รู้", "lastname":"ไม่ทราบ"}]'
function getData(id) {
// สมมุติว่า members_data เป็นไปตามตัวอย่างข้างบน
var members = eval('('+members_data+')');
// เราก็จะได้ members เป็น Array ของข้อมูล
alert("ชื่อ : "+members[id].firstname+" นามสกุล : "+members[id].lastname);
}
</script>
ตัวอย่าง