เดี๋ยวอธิบายให้ละเอียดเลยครับ
ให้ลองเอา code ตามตัวอย่างของผมไปทดสอบดูน่าจะเข้าใจมากขึ้นครับ
1. ตัวอย่าง File php นะครับ สมมุติว่าชื่อ json.php
<?php
$array = array("link"=>"jQuery","URL"=>"http://www.jquery.in.th");
echo json_encode($array);
?>
output ที่ได้ก็จะเป็นหน้าตาแบบนี้นะครับ
{"link":"jQuery","URL":"http://www.jquery.in.th"}
2. มาทางฝั่ง js ที่ใช้ jQuery ในการส่ง ajax ไปหา php สมมุติเป็น index.html ก็แล้วกันครับ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> jQuery and JSON PHP </TITLE>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
</HEAD>
<BODY>
<!-- ปุ่ม --->
<input type="button" id="myButton" value="Click Here" />
<!-- js -->
<script>
$("#myButton").click( function(){
$.post("json.php", {"action":"Click"},
function( data ){
alert(data.link " - " data.URL);
},
"json");
} );
</script>
</BODY>
</HTML>
อธิบายการทำงานได้ดังนี้ครับ
1. หลังจากที่กดปุ่มไปแล้ว มันจะไปเรียก Function ที่เรากำหนดให้กับ Event Click ใน funnction นั้นจะบรรจุการทำงานของ ajax เอาใว้
2. เริ่มการทำงาน ajax จะทำการส่ง Request แบบ POST ไปยัง json.php
3. ใน json.php นั้นจะมีการสั่งให้ echo ค่าของรูปแบบ json ออกมา
4. ในระหว่างที่ส่งค่าไปให้ json.php นั้นนะครับ ตัว ajax มันจะเช็คว่า complete หรือยังถ้า complete แล้วมันจะทำการเรียกค่าจาก json.php ที่ echo ออกมาด้วยหรือเรียกว่าการ callback
5. เวลา callback กลับมานั้น ค่าของ json ที่ php มัน echo ออกมานั้นจะถูก ajax เก็บใว้ในตัวแปร data คือมันจะคืนค่ากลับมาให้ผ่านตัวแปร data
6. เราก็สามารถจะเอาค่านั้นออกมาใช้งานได้โดย data.ชื่อตัวแปร เช่นในตัวอย่าง data.URL มันก็จะได้ค่าของ URL ออกมานั้นก็คือ
http://www.jquery.in.th 
พัฒนาเว็บไซต์
