GORAGOD.com

freelance, web developer, web designer, hosting, domain name

บทที่ 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>

ตัวอย่าง
0SHAREFacebookLINE it!
^