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...

ใช้ HDD ขนาดใหญ่ หรือ HDD ขนาดเล็กจำนวนมากใน NAS ดี?

ใช้ HDD ขนาดใหญ่ หรือ HDD ขนาดเล็กจำนวนมากใน NAS ดี?

จากเมื่อเดือนก่อน ๆ เราเล่าเรื่องที่เราเปลี่ยน HDD ไปในความจุที่ใหญ่ขึ้น ทำให้เราคิดย้อนตอนที่เรา Design NAS ที่จะใช้ในบ้านครั้งแรกว่า เราควรจะใช้ HDD ขนาดเท่าไหร่ดี จะใช้ HDD ขนาดความจุเล็ก ๆ จำนวนมาก หรือเอาความจุสูง ๆ ไม่กี่ลูกดีกว่า วันนี้เราเอาประสบการณ์มาเล่ากัน...

Dual Stack และ Tunnelling วิธีการเชื่อมโลก IPv4 และ IPv6 เข้าด้วยกัน

Dual Stack และ Tunnelling วิธีการเชื่อมโลก IPv4 และ IPv6 เข้าด้วยกัน

ปัจจุบันนี้เรามีการใช้ IPv6 มากขึ้นเรื่อย ๆ แน่นอนว่ายังไม่เท่ากับอุปกรณ์ที่ทำงานบน IPv4 และทั้งสอง Version นี้ไม่สามารถเชื่อมต่อคุยกันได้โดยตรง ทำให้เราจำเป็นต้องมีเทคนิคบางอย่าง วันนี้เราจะมาเล่าให้อ่านกันว่า เขาทำกันยังไง...

ประหยัดเงินหลักหมื่นค่า Mac ด้วย External SSD

ประหยัดเงินหลักหมื่นค่า Mac ด้วย External SSD

หนึ่งในตัวเลือกที่ Apple ให้เราเลือกตอนจะซื้อเครื่อง Mac คือ Storage หรือขนาดของที่เก็บข้อมูล ปัญหาคือ ยิ่งเยอะ มันทำให้เรามีพื้นที่เก็บข้อมูลมากขึ้น แต่มันมากับราคาที่สูงเหลือเกิน วันนี้เราเอาตัวเลือกในการประหยัดเงินกว่าหมื่นบาท มาใช้ External SSD กัน...

NAS vs DAS ต่างกันอย่างไร ? เราจะใช้อะไรดี ?

NAS vs DAS ต่างกันอย่างไร ? เราจะใช้อะไรดี ?

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