Technology

[Just For Fun] jQuery กับ AJAX

By Arnon Puitrakul - 26 พฤศจิกายน 2015

ช่วงนี้ใกล้สอบด้วย ประกอบกับ 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 เราจะเขียนมันยังไง สำหรับวันนี้ก็สวัสดีครับ

Read Next...

การเบลอรูปภาพ มันทำได้อย่างไร ทำไมภาพถึงเบลอได้

การเบลอรูปภาพ มันทำได้อย่างไร ทำไมภาพถึงเบลอได้

เคยสงสัยกันมั้ยว่า Filter ที่เราใช้เบลอภาพ ไม่ว่าจะเพื่อความสวยงาม หรืออะไรก็ตาม แท้จริงแล้ว มันทำงานอย่างไร วันนี้เราจะพาไปดูคณิตศาสตร์และเทคนิคเบื้องหลังกันว่า กว่าที่รูปภาพจะถูกเบลอได้ มันเกิดจากอะไร...

AI Watermark กับความรับผิดชอบต่อการใช้ AI

AI Watermark กับความรับผิดชอบต่อการใช้ AI

หลังจากดูงาน Google I/O 2024 ที่ผ่านมา เรามาสะดุดเรื่องของการใส่ Watermark ลงไปใน Content ที่ Generate จาก AI วันนี้เราจะมาเล่าให้อ่านกันว่า วิธีการทำ Watermark ใน Content ทำอย่างไร...

เราจำเป็นต้องใช้ NPU จริง ๆ เหรอ

เราจำเป็นต้องใช้ NPU จริง ๆ เหรอ

ก่อนหน้านี้เราทำ Content เล่าความแตกต่างระหว่าง CPU, GPU และ NPU ทำให้เราเกิดคำถามขึ้นมาว่า เอาเข้าจริง เราจำเป็นต้องมี NPU อยู่ในตลาดจริง ๆ รึเปล่า หรือมันอาจจะเป็นแค่ Hardware ตัวนึงที่เข้ามาแล้วก็จากไปเท่านั้น วันนี้เราจะมาเล่าให้อ่านกัน...

Database 101 : Spreadsheet ไม่ใช่ Database โว้ยยยย

Database 101 : Spreadsheet ไม่ใช่ Database โว้ยยยย

บทความนี้ เราเขียนสำหรับมือใหม่ หรือคนที่ไม่ได้เรียนด้านนี้แต่อยากรู้ละกัน สำหรับวันนี้เรามาพูดถึงคำที่ถ้าเราทำงานกับพวก Developer เขาคุยกันบ่อย ๆ ใช้งานกันเยอะ ๆ อย่าง Database กันว่า มันคืออะไร ทำไมเราต้องใช้ และ เราจะมีตัวเลือกอะไรในการใช้งานบ้าง...