เมื่อหลายปีก่อนผมเคยเขียนเรืองการใช้งาน ajax เบื่องต้นไปแล้วรอบหนึ่งในเรื่อง “ใครๆ ก็ ajax มาดูซิมันทำงานยังไง” โดยเป็นการเขียน script ขึ้นมาใช้งานเองทั้งหมด ซึ่งอาจจะมีข้อจำกัดหลายๆอย่าง และการใช้งานก็ยุ่งยากเพระว่าต้องเรียกใช้ function และส่งค่าต่างๆเองทั้งหมด
แต่เมื่อเวลาผ่านไป ก็ได้มี library หลายๆตัวที่ถูกคิดค้นขึ้นมาเพื่อช่วยให้เราใช้งาน ajax ให้ง่ายขึ้น และตัวที่ผมจะเลือกใช้ก็คือ jQuery พระเอกของเรานี้เอง ซึ่งก็ได้นำไปใช้ในบทความก่อนๆของผมด้วย มันเทพมากๆ
เลิกโม้แล้วก็เข้าเรื่องและดูตัวอย่างกันเลย
อย่างแรกสุดของที่สุด ก็ต้องทำการ download jQuery จาก http://jquery.com/ ซะก่อน
จากนั้นมาสร้าง file ต่างๆเอาไว้ทดสอบตามนี้
ใจร้อนอยากทดสอบก็คลิก http://www.unzeen.com/example/jquery-ajax/ajax-jquery.html
ถ้าขี้เกียจพิมพ์ก็ download http://www.unzeen.com/example/jquery-ajax/jquery-ajax.zip
# ajax-jquery.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-874" /> <title>ajax ของง่ายถ้าใช้ jQuery</title> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript"> // ทดสอบการใช้ GET function getData(){ $.get("get.php", { data: $("#data1").val()}, function(data){ $("#divGetData").html(data); } ); } // ทดสอบการใช้ POST function postData(){ $.post("post.php", { data: $("#data2").val()}, function(data){ $("#divPostData").html(data); } ); } // ทดสอบการใช้ LOAD function loadData(){ $("#divLoadData").load("load.php?data="+$("#data3").val()); } </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <div id="divGetData"></div> <input name="data1" type="text" id="data1" size="40" /> <input type="button" name="Button1" id="button1" value="Get" onclick="getData()" /> </form> <hr /> <form id="form2" name="form2" method="post" action=""> <div id="divPostData"></div> <input name="data2" type="text" id="data2" size="40" /> <input type="button" name="Button2" id="button2" value="Post" onclick="postData()" /> </form> <hr /> <form id="form3" name="form3" method="post" action=""> <div id="divLoadData"></div> <input name="data3" type="text" id="data3" size="40" /> <input type="button" name="Button3" id="button3" value="Load" onclick="loadData()" /> </form> </body> </html> |
# get.php
1 2 3 4 5 | <?php print "You Get Data : ".$_GET['data']; ?> |
# post.php
1 2 3 4 5 | <?php print "You Post Data : ".$_POST['data']; ?> |
# load.php
1 2 3 4 5 | <?php print "You Load Data : ".$_GET['data']; ?> |
คงพอเห็นภาพกันแล้ว ต่อไปอธิบายให้งง เล็กน้อย (จะอธิบายทำไมเนี้ย)
เริ่มกันที่ function getData จะเป็นการเรียกใช้ method $.get ที่ jQuery ได้เตรียมไว้ให้เราอยู่แล้ว โดยที่เราก็ไม่ต้องทำอะไรมาก แค่กำหนดตัวแปรที่ต้องการจะส่ง และทำ function เพื่อรับค่ากลับมาจาก server เท่านั้น โดยจากตัวอย่างเป็นการรับค่ากลับมาแล้วนำไปแสดงใน divGetData
function ต่อไปเป็น postData อันนี้ก็เหมือนอันแรก แค่เปลียนจาก get เป็น post และรับข้อมูลมาแสดงผลเหมือนกัน
ส่วนอีกตัว loadData ตัวนี้ใช้สำหรับ load ข้อมูลมาแสดงใน div โดยเฉพาะ ทำให้ง่ายขึ้นหากเราต้องการแค่จะน้ำข้อมูลมาแสดงผล โดยไม่ต้องประมวลผลอะไรเพิ่มเติม
การจะเลือกว่าจะใช้ get , post , load ก็ขึ้นอยู่กับความเหมาะสมของงานนะครับ ใช้วิจารณาญาณเอา !!
Mr.Khwanchai Kaewyos (LookHin)
