บทที่ 17 AJAX กับ JSON (ตอนที่ 1)

JSON (JavaScript Object Notation) เป็นวิิธีหนึ่งที่จะทำให้ AJAX แลกเปลี่ยนข้อมูลกับ Server ได้อย่างง่ายๆ ซึ่งถ้าใช้ XML ส่งข้อมูลกลับมาเราก็ยังต้องมี parser เพื่อจัดการแยกข้อมูลออก เพื่อไปจัดการแสดงผลอีกที(หรือแม้กระทั่งส่งข้อมูลมาในแบบ Text เช่นกัน) แต่ JSON จะใช้เพียงคำสั่ง eval() ก็จะได้ข้อมูลกลับมาเป็น Array เพื่อให้ไปทำการจัดการแสดงผลได้อย่างง่ายๆ โดยไม่ต้องผ่านขั้นตอนการ parser

สมมุติให้มีข้อมูลเป็นดัง 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>

ตัวอย่าง
ผู้เขียน goragod โพสต์เมื่อ 03 เม.ย. 2551 เปิดดู 25,493 ป้ายกำกับ AJAX
^