ช่วงนี้ใกล้สอบด้วย ประกอบกับ Project ที่ทำเท่าไหร่ก็ไม่เสร็จสักที เลยหายไปหลายวันมาก ๆ 10 กว่าวันเลยล่ะ ตอนนี้กลับมาแล้ว ด้วยเรื่องที่เอาไปใช้ใน Project เป็นเรื่องง่าย ๆ เลยล่ะที่ใคร ๆ เขียนเว็บน่าจะเคยทำกันหมดแล้วกับ AJAX แต่วันนี้ เราไม่ได้มาแค่ AJAX ธรรมดาหรอก เพราะวันนี้เราจะใช้ Javascript Library ยอดนิยมอย่าง jQuery มาช่วยให้งาน เราเสร็จเร็วขึ้นกัน

jQuery คืออะไร ?

jQuery เป็น Javascript Library ตัวหนึ่ง ที่มันรวบรวม Function ต่าง ๆ ที่เราใช้กันบ่อย ๆ มารวมเข้าไว้ด้วยกัน ทำให้เราไม่จำเป็นต้องเขียนเองทั้งหมด ให้ปวดหัวและเสียเวลา โดยตัวมันสามารถทำอะไรได้หลายอย่าง เยอะมาก ๆ เลย ไม่ว่าจะเป็นการทำ AJAX ที่เราจะพูดถึงในบทความนี้ หรือจะเป็น การดักจับ Event ต่าง ๆ ซึ่งถ้าเขียนเองนี่คงจะยาวมาก (ไม่ใช่ คง สิ ยาวจริง ๆ ลองแล้ว รู้เรื่องเลย) และอื่น ๆ อีกมากมาย อันนี้ก็ต้องลองไปศึกษากันเอาเองนะครับ

หลักการทำงานของ AJAX

ก่อนที่เราจะไปใช้ตัวช่วยอย่าง jQuery เราก็ต้องมาเข้าใจหลักการทำงานของ AJAX กันก่อน (จะไม่ขอพูดว่า มันคืออะไรนะ เพราะถ้ากดเข้ามาดู ก็ต้องน่าจะนึกออกคร่าว ๆ อยู่แล้ว) โดยทั่วไปแล้ว AJAX มันก็คือการนำ XML มาผนวกกับ Javascript โดยผ่านทาง XMLHttpRequest เท่านั้นเอง ถ้าเราเขียนด้วย PHP ปกติ ก็คงต้องเขียนหลายบรรทัดอยู่ แต่ด้วย jQuery เราสามารถจัดการมันได้ในไม่กี่บรรทัดเท่านั้นเอง

โดยตัวอย่างที่จะเอามาให้ดูในวันนี้จะเป็น การส่งข้อมูลแบบ POST ง่าย ๆ ล่ะกัน จะทำในลักษณะของ Textbox และมีข้อความขึ้นกลับมาเป็น Hello แล้วก็ ข้อความใน Textbox ล่ะกัน

Step 1 : Design หน้า Form

อย่างที่บอกไป เราก็จะ Design กันง่าย ๆ เลย

<form method = 'POST' action = '' >
   <span>Name : </span>
   <input type = 'text' id='name'>
   <input type = 'submit' id='submitbtn' onclick = 'sendData()'>
</form>

<div id = 'result'></div>

หลังจากที่เราได้หน้า Form กันแล้ว ลองไป Step 2 กันเลย อ่อลืมไป อย่าลืมไป Import JQuery เข้ามาในหน้าเราด้วยนะ ไม่งั้นจะใช้ไม่ได้นะ

Step 2 : Design หน้า Result

ในที่นี้ผมจะตั้งชื่อหน้านี้ว่า Result.php เพื่อให้หน้าที่เราเขียนเมื่อครู่มันส่งข้อมูลมาให้ และแปลงเป็นข้อความ Hello แล้วตามด้วยชื่ออย่างที่เราต้องการ

<?php
  echo "Hello " . $_REQUEST['name'];
?>

โดยเราสามารถเข้าถึงค่าที่ส่งมาผ่านตัวแปร Array ตามปกติเลย เหมือนกับที่เรารับค่ามาจากพวก POST, GET Method อะไรพวกนี้เลย

Step 3 : เขียน Javascript เพื่อควบคุม

มาถึงขึ้นตอนสุดท้ายแล้ว แต่สำคัญมาก นั่นคือการเขียน Javascript เพื่อให้หน้าแรกของเราส่งค่าให้กับ Result และเอาผลกลับไปแปะที่ Result

function sendData()
{
 var name = $("#name").val()

 $.post("Result.php",{ name: name },function(data)
    {
      $('#result').html(data);
    }
 );}

Code ตัวนี้จริง ๆ แล้วก็ไม่ได้มีอะไรยากเลย ก่อนอื่น ผมก็ดูดค่ามาจาก Textbox ที่เรากรอกชื่อเข้าไป และทำการแปะลงใน Post เพื่อให้มันส่งค่าแบบ Post ไปที่หน้าที่เราบอกมัน ก่อนอื่นผมก็บอกมันก่อนว่า จะให้มันโยนค่าไปที่ไหน ในที่นี้คือ Result.php ถัดไปเป็นค่าที่จะส่งไป โดยมันจะเป็น Array และสุดท้ายเป็น Function ที่จะให้มันทำเมื่อมันได้รับค่ากลับมาแล้ว ในที่นี้ผมจะให้มันเอาผลไปแปะลงที่ #result หรือนั่นก็คือใน Div Tag ที่เราเขียนกันในไฟล์แรกนั่นเอง

สรุป

การเขียน AJAX โดยใช้ JQuery ทำให้เราสามารถสร้างหน้าที่ใช้ AJAX ได้เร็วขึ้น และง่ายขึ้นเยอะเลย จากเมื่อก่อนที่เราต้องมานั่งเขียนเพื่อเช็คว่า Browser นี้เป็นอะไร แล้วต้องสร้าง XMLHttpRequest มาให้ถูกอีกอะไรเยอะแยะไปหมด ปัญหานี้จะหมดไปเลย ถ้าเราใช้ jQuery แบบที่ได้สอนไปในบทความนี้ แต่ก็อย่าใช้เพลินจนลืมล่ะครับว่า ถ้าไม่มี JQuery เราจะเขียนมันยังไง สำหรับวันนี้ก็สวัสดีครับ