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

ลองกันอีกสักตั้ง iPad Pro ใช้แทนคอมพิวเตอร์ได้มั้ย

ลองกันอีกสักตั้ง iPad Pro ใช้แทนคอมพิวเตอร์ได้มั้ย

เมื่อ 3 ปีก่อน เรามีความพยายามที่จะใช้ iPad Pro เครื่องเดิมแทนคอมพิวเตอร์ ไหน ๆ ตอนนี้เราเปลี่ยน iPad Pro ใหม่แล้ว เราจะมาลองกันอีกสักตั้งว่า เมื่อเวลาผ่านไป มันใช้งานจริงได้มากขึ้นหรือไม่...

ทำไม iPad ยังเป็น iPad ไม่เป็น Mac

ทำไม iPad ยังเป็น iPad ไม่เป็น Mac

ตั้งแต่ iPad Pro M4 และ iPad Air M2 เปิดตัวและเริ่มจำหน่ายออกไป Reviewer หลายคนเริ่มมองเห็นแล้วว่า ปัญหาจริง ๆ ของ iPad ในรอบหลายปีที่ผ่านมา ไม่ได้เกิดจาก iPad แต่เกิดจาก iPadOS บางเจ้าบอกว่า อยากให้เอา macOS มาใส่ด้วยซ้ำ มันยังไงกันนะ วันนี้เราจะมาเล่าประเด็นและความเห็นจากเราให้ให้อ่านกัน...

Microinverter ต่างจาก String Inverter อย่างไร เลือกแบบไหนดีกว่ากัน

Microinverter ต่างจาก String Inverter อย่างไร เลือกแบบไหนดีกว่ากัน

หลังจากเราเขียนเรื่อง Solar Cell ไปมีคนถามเข้ามาอยู่ว่า ถ้าจะเลือกติดตั้ง Solar ระหว่างการใช้ระบบ String Inverter กับ Microinverter เราจะเลือกตัวไหนดี วันนี้เราจะมาเล่าเปรียบเทียบให้อ่านกันว่าแบบไหน น่าจะเหมาะกับใคร...

ทำไมภาษา Programming สมัยใหม่ ถึงไม่มี Pointer Concept

ทำไมภาษา Programming สมัยใหม่ ถึงไม่มี Pointer Concept

ทำไมภาษาบางตัวอย่างภาษา C มี Pointer ในขณะที่ภาษาใหม่ ๆ หลายตัว ไม่มี ทำไมการ Implement Concept หรือเครื่องมือเหล่านี้ถึงไม่ได้รับความนิยม วันนี้เราจะมาเล่าข้อดีข้อเสียของ Feature นี้ในภาษา Programming กัน...