พัฒนาเว็บไซต์ · WDC-01-17

PHP Ajax with jQuery

หลักสูตร PHP Ajax with jQuery เป็นการอบรมการเขียนเว็บแอปแบบ Ajax ด้วย PHP 8.5 และ MySQL โดยใช้ jQuery 4 คู่กับ Fetch API ทั้ง JSON, PDO ฟอร์ม Autocomplete อัปโหลดไฟล์ ระบบ Login ความปลอดภัย และ REST API เหมาะกับนักพัฒนาและ IT Manager ที่เขียน PHP และ JavaScript มาบ้าง จบแล้วสร้างร้านค้าออนไลน์แบบ Ajax ได้เอง

อัปเดตล่าสุด 9 ต.ค. 2569

ราคาเริ่มต้น 7,110 บาท / ท่าน 7,900 −10% ยังไม่รวม VAT 7% · มีราคาหมู่คณะ

ขอใบเสนอราคาอบรมองค์กร ลงชื่อจองไว้

PDFดาวน์โหลด Course Outline

ระยะเวลา24 ชั่วโมง · 4 วัน
รูปแบบออนไซต์ / ออนไลน์สด
รอบถัดไปเปิดตามคำขอ
ใบรับรองมี Certificate

ภาพรวมหลักสูตร

Ajax ทำให้หน้าเว็บส่งและรับข้อมูลกับเซิร์ฟเวอร์ได้โดยไม่ต้องโหลดทั้งหน้าใหม่ จึงเป็นพื้นฐานของฟอร์มที่ตอบสนองทันที ช่องค้นหาที่แนะนำคำ ตะกร้าสินค้า และหน้าระบบหลังบ้านแทบทุกระบบ ปัจจุบันเบราว์เซอร์มี Fetch API ให้ใช้เป็นมาตรฐาน ขณะที่ระบบ PHP จำนวนมากยังใช้ jQuery อยู่ และ PHP 8.5 ก็ทำให้เขียน API ที่ตอบกลับเป็น JSON ได้กระชับและปลอดภัยขึ้น นักพัฒนาจึงควรเขียน Ajax ได้ทั้งสองแบบและออกแบบฝั่งเซิร์ฟเวอร์ให้ถูกต้อง

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ที่สอนการเขียนเว็บแอปแบบ Ajax ด้วย PHP 8.5 และ MySQL 9.7 โดยใช้ jQuery 4 และ Fetch API คู่กัน ตั้งแต่หลักการ Ajax และ JSON การเขียน PHP ให้ตอบกลับเป็น JSON ฐานข้อมูลด้วย PDO ฟอร์ม Autocomplete และการอัปโหลดไฟล์ ระบบ Login ความปลอดภัย การจัดการสถานะ และ REST API แล้วปิดท้ายด้วย Workshop ร้านค้าออนไลน์แบบ Ajax (อบรม 4 วัน วันละ 6 ชั่วโมง รวม 24 ชั่วโมง ระดับ Intermediate)

สิ่งที่คุณจะได้รับ

เข้าใจหลักการ Ajax, HTTP และ JSON และเลือกรูปแบบการส่งข้อมูลได้เหมาะสม
เขียน PHP 8.5 ให้รับและตอบกลับข้อมูลแบบ JSON พร้อมรหัสสถานะที่ถูกต้องได้
เรียก Ajax ได้ทั้งด้วย jQuery 4 และ Fetch API และเลือกใช้ให้เหมาะกับงาน
ใช้ PDO ทำงานกับ MySQL อย่างปลอดภัย และสร้างฟอร์ม Autocomplete และการอัปโหลดไฟล์แบบ Ajax ได้
สร้างระบบ Login แบบ Ajax และป้องกัน CSRF, XSS และการเรียกข้ามโดเมนได้
พัฒนาเว็บแอปแบบ Ajax ขนาดเล็กตั้งแต่ฐานข้อมูลจนถึงหน้าเว็บได้ด้วยตนเอง

หลักสูตรนี้เหมาะสำหรับ

นักพัฒนาที่เขียน PHP และ JavaScript มาระยะหนึ่งและต้องการทำเว็บแอปแบบ Ajax
นักพัฒนาที่ดูแลระบบ PHP เดิมที่ใช้ jQuery และต้องการปรับให้ทันสมัย
IT Manager และหัวหน้าทีมที่ต้องการเข้าใจโครงสร้างเว็บแอปแบบ Ajax
ผู้ที่ผ่านหลักสูตร PHP และ JavaScript ระดับพื้นฐานมาแล้ว

พื้นฐานของผู้เข้าอบรม

เข้าใจการเขียนเว็บด้วย PHP และ JavaScript เบื้องต้น (มีทบทวนพื้นฐานที่จำเป็นให้)
เคยใช้ฐานข้อมูล MySQL หรือคำสั่ง SQL พื้นฐานมาบ้าง
ติดตั้งและถอนการติดตั้งโปรแกรม และใช้อินเทอร์เน็ตกับเครือข่ายพื้นฐานได้

หัวข้อการฝึกอบรม

รายละเอียดหลักสูตร

หลักสูตรนี้เป็นฉบับปรับปรุงใหม่ปี 2026 ของหลักสูตร PHP Ajax with jQuery เนื้อหาเขียนใหม่บน PHP 8.5, MySQL 9.7 LTS และ jQuery 4 พร้อมสอน Fetch API คู่กันทุกหัวข้อ อบรม 4 วัน วันละ 6 ชั่วโมง รวม 24 ชั่วโมง (09:00-16:00 น.) รูปแบบบรรยายสลับ Lab และ Workshop ตลอดหลักสูตร ระดับ Intermediate ผู้เรียนจะได้เขียน PHP ให้ตอบกลับเป็น JSON ใช้ PDO กับ MySQL สร้างฟอร์ม Autocomplete และการอัปโหลดไฟล์แบบ Ajax ทำระบบ Login ที่ปลอดภัย จัดการสถานะด้วย History API เรียกข้ามโดเมนด้วย CORS และออกแบบ REST API แล้วรวมทุกอย่างใน Workshop ร้านค้าออนไลน์แบบ Ajax พร้อมรับซอร์สโค้ดครบทุก Lab กลับไปใช้งานต่อ

Day 1 Ajax สมัยใหม่ด้วย PHP 8.5, jQuery และ Fetch

Section 1: Lab: เตรียมสภาพแวดล้อมการพัฒนา

ติดตั้ง PHP 8.5 และ MySQL 9.7 LTS บนเครื่องหรือด้วย Docker
เปิดเว็บด้วย PHP Built-in Server และจัดโครงสร้างโฟลเดอร์โปรเจกต์
ใช้ VS Code และแท็บ Network ใน Chrome DevTools
ทบทวน PHP และ JavaScript ที่จำเป็นสำหรับหลักสูตร
Lab: หน้าเว็บแรกที่เรียกข้อมูลจาก PHP

Section 2: หลักการ Ajax, HTTP และ JSON

Ajax ทำงานอย่างไร และจาก XMLHttpRequest สู่ Fetch API
Request, Response, Method, Header และรหัสสถานะ HTTP
โครงสร้าง JSON และเหตุผลที่ใช้แทน XML
รูปแบบการใช้ Ajax เช่น อัปเดตบางส่วน ค้นหาทันที และโหลดเพิ่ม
อ่านคำขอและผลลัพธ์จริงในแท็บ Network

Section 3: Lab: PHP 8.5 สำหรับตอบกลับ JSON

json_encode, json_decode และ JSON_THROW_ON_ERROR
ตั้ง Content-Type และรหัสสถานะด้วย http_response_code
อ่าน JSON จากคำขอผ่าน php://input
ฟีเจอร์ภาษาที่ช่วยเขียนโค้ดสั้นลง เช่น match, Enum และ Pipe Operator
Lab: ไฟล์ API ที่คืนรายการสินค้าและข้อความ Error แบบมาตรฐาน

Section 4: Lab: jQuery 4 Ajax

.load(), $.get, $.post และ $.getJSON
$.ajax พร้อมตัวเลือก method, data, dataType และ timeout
ใช้ jqXHR แบบ Promise และ async/await
Ajax Event ระดับหน้า และ $.ajaxSetup
Lab: หน้ารายการข่าวที่โหลดและกรองแบบ Ajax

Section 5: Lab: Fetch API คู่กับ jQuery

fetch แบบ GET และ POST พร้อมส่ง JSON
async/await, การตรวจ res.ok และ try/catch
ยกเลิกคำขอและตั้งเวลาหมดด้วย AbortController
เทียบโค้ด jQuery กับ Fetch แบบคู่ต่อคู่ และเกณฑ์เลือกใช้
Lab: เขียนหน้าเดิมใหม่ด้วย Fetch API และเทียบผล

Day 2 ฐานข้อมูล ฟอร์ม และไฟล์แบบ Ajax

Section 6: Workshop: ออกแบบฐานข้อมูล MySQL

ออกแบบตาราง ความสัมพันธ์ Primary Key และ Foreign Key
ตัวอย่างโครงสร้างฐานข้อมูลร้านค้าจากโครงงานจริง
ชนิดข้อมูล utf8mb4 และ Index ที่ช่วยให้ค้นหาเร็ว
สร้างผู้ใช้และกำหนดสิทธิ์ในฐานข้อมูล MySQL
Workshop: สร้างฐานข้อมูลด้วย phpMyAdmin และไฟล์ SQL

Section 7: Lab: PDO และ Prepared Statement

เชื่อมต่อ MySQL ด้วย PDO และตั้งค่าโหมด Exception
เพิ่ม อ่าน แก้ไข และลบข้อมูลด้วย Prepared Statement
ป้องกัน SQL Injection และจัดการ Error อย่างปลอดภัย
Transaction สำหรับงานที่ต้องบันทึกหลายตาราง
Lab: API จัดการข้อมูลสินค้าที่ต่อกับฐานข้อมูลจริง

Section 8: Lab: ฟอร์มแบบ Ajax

ส่งฟอร์มด้วย .serialize() และ FormData โดยไม่โหลดหน้าใหม่
ตรวจข้อมูลในเบราว์เซอร์และตรวจซ้ำฝั่ง PHP
ตอบกลับ Error แยกรายช่องเป็น JSON และแสดงใต้ช่องที่ผิด
ป้องกันการกดส่งซ้ำและแสดงสถานะการบันทึก
Lab: ฟอร์มติดต่อและฟอร์มเพิ่มสินค้าแบบ Ajax

Section 9: Lab: Autocomplete และค้นหาทันที

ค้นหาขณะพิมพ์ด้วย Debounce เพื่อลดจำนวนคำขอ
Query แบบ LIKE และการใช้ Index ให้ค้นหาเร็ว
jQuery UI Autocomplete และทางเลือกด้วยแท็ก datalist
ดึงข้อมูลที่เลือกมาเติมฟอร์มอัตโนมัติ
Lab: ช่องค้นหาลูกค้าที่เติมที่อยู่ให้ทันที

Section 10: Lab: อัปโหลดไฟล์แบบ Ajax

ส่งไฟล์ด้วย FormData ทั้งแบบ jQuery และ Fetch
แสดงความคืบหน้าและภาพตัวอย่างก่อนส่ง
ตรวจชนิดไฟล์ด้วย finfo และจำกัดขนาดฝั่ง PHP
ตั้งชื่อไฟล์ใหม่และเก็บไฟล์นอกโฟลเดอร์ที่รันสคริปต์ได้
Lab: อัปโหลดรูปสินค้าหลายรูปพร้อมลบและเรียงลำดับ

Day 3 Login สถานะ และความปลอดภัยของ Ajax

Section 11: Lab: ระบบ Login แบบ Ajax

เก็บรหัสผ่านด้วย password_hash และตรวจด้วย password_verify
Session, session_regenerate_id และการตั้งค่า Cookie ให้ปลอดภัย
ตอบกลับผล Login เป็น JSON และพาไปยังหน้าที่ถูกต้อง
จำกัดจำนวนครั้งที่ Login ผิด และออกจากระบบ
Lab: หน้า Login และหน้าสมาชิกที่ตรวจสิทธิ์ทุกคำขอ

Section 12: ความปลอดภัยของเว็บแอปแบบ Ajax

CSRF Token และการส่งผ่าน Header ของคำขอ Ajax
ป้องกัน XSS ด้วย htmlspecialchars และ .text() หรือ textContent
ตรวจสิทธิ์ทุก Endpoint โดยไม่เชื่อข้อมูลจากเบราว์เซอร์
ไม่เปิดเผยรายละเอียด Error และข้อมูลลับใน Response
Checklist ความปลอดภัยก่อนนำระบบขึ้นใช้งาน

Section 13: Lab: จัดการสถานะฝั่ง Client

เก็บสถานะด้วย sessionStorage และ localStorage ในรูปแบบ JSON
Cache ข้อมูลจาก Server และการล้าง Cache เมื่อข้อมูลเปลี่ยน
History API: pushState และ popstate แทนการปิดปุ่ม Back
ให้ URL สะท้อนคำค้นและหน้าที่เลือก เพื่อ Refresh แล้วไม่หาย
Lab: หน้าค้นหาสินค้าที่จำตัวกรองและกด Back ได้ถูกต้อง

Section 14: Lab: Ajax ข้ามโดเมนด้วย CORS

Same-Origin Policy และเหตุผลที่เบราว์เซอร์บล็อกคำขอ
ตั้งค่า CORS Header ใน PHP และคำขอแบบ Preflight
ส่ง Cookie ข้ามโดเมนด้วย credentials อย่างระมัดระวัง
ความเสี่ยงของ JSONP และการย้ายโค้ดเดิมมาใช้ CORS
Lab: หน้าเว็บอีกโดเมนที่เรียก API ของเราได้อย่างปลอดภัย

Section 15: Lab: ดีบักและทดสอบ Ajax

ตรวจคำขอ Header และ Payload ในแท็บ Network
Breakpoint และ Console ใน Chrome DevTools
อ่าน Error Log ของ PHP และตั้งค่าแสดงผลให้เหมาะกับแต่ละสภาพแวดล้อม
ทดสอบ API ด้วย VS Code REST Client
Lab: หาและแก้บั๊กในหน้าตัวอย่างที่เตรียมไว้

Day 4 REST API และ Workshop ร้านค้าออนไลน์

Section 16: Lab: ออกแบบ REST API ด้วย PHP

ตั้งชื่อ Endpoint และใช้ GET, POST, PUT, PATCH และ DELETE
Router อย่างง่ายและการแยกไฟล์ Controller
รูปแบบ Response และ Error ที่สม่ำเสมอ
Pagination, การเรียงลำดับ และตัวกรองผ่าน Query String
Lab: REST API สินค้าและหมวดหมู่ครบทุก Method

Section 17: Lab: โหลดข้อมูลเพิ่มและอัปเดตอัตโนมัติ

แบ่งหน้าแบบปุ่มและ Infinite Scroll ด้วย IntersectionObserver
อัปเดตข้อมูลเป็นระยะด้วย Polling
Server-Sent Events กับ PHP สำหรับการแจ้งเตือนทางเดียว
ลดภาระเซิร์ฟเวอร์ด้วย Cache และ ETag
Lab: หน้าคำสั่งซื้อที่อัปเดตสถานะอัตโนมัติ

Section 18: Workshop: หน้าร้านและตะกร้าสินค้า

หน้ารายการสินค้าพร้อมค้นหา กรอง และแบ่งหน้าแบบ Ajax
หน้ารายละเอียดสินค้าและรูปภาพ
ตะกร้าสินค้าที่เพิ่ม ลด และลบได้โดยไม่โหลดหน้าใหม่
เก็บตะกร้าใน Session และแสดงยอดรวมทันที
Workshop: เชื่อมหน้าร้านกับ REST API ที่สร้างไว้

Section 19: Workshop: สั่งซื้อและหลังบ้าน

ฟอร์มสั่งซื้อที่ตรวจข้อมูลสองฝั่ง
บันทึกคำสั่งซื้อหลายตารางด้วย Transaction
หน้าหลังบ้านสำหรับเปลี่ยนสถานะคำสั่งซื้อ
ตรวจสิทธิ์ผู้ดูแลระบบและป้องกัน CSRF
Workshop: ทดสอบสั่งซื้อจนถึงอัปเดตสถานะครบทั้งกระบวนการ

Section 20: Workshop: ทดสอบ นำขึ้นใช้งาน และนำเสนอ

ทดสอบทุก Endpoint และทุกหน้าบนมือถือและเดสก์ท็อป
ตั้งค่า PHP และ MySQL สำหรับ Production และสำรองฐานข้อมูล
นำขึ้นใช้งานบน Hosting หรือเซิร์ฟเวอร์ด้วย Docker
ทบทวน Checklist ความปลอดภัยและประสิทธิภาพ
นำเสนอผลงานและแนวทางต่อยอด

รอบอบรมและรูปแบบการอบรม

สำหรับบุคคล — รอบอบรมทั่วไป

ขณะนี้ยังไม่มีรอบอบรมเปิดรับสมัคร ลงชื่อจองไว้ได้เลย ทีมงานจะติดต่อกลับเป็นกลุ่มแรกเมื่อเปิดรอบถัดไป หรือสอบถามทางไลน์ หรือโทร 02-570-8449 หรือ 088-807-9770

ลงชื่อจองไว้ สอบถามรอบอบรม

สำหรับองค์กร — In-house / Private Training

ปรับเนื้อหาให้ตรงกับเครื่องมือและงานจริงของทีม
เลือกวันเอง อบรมที่บริษัทหรือออนไลน์สด
ออกใบเสนอราคาในนามนิติบุคคลให้ฝ่ายจัดซื้อ

ขอใบเสนอราคาอบรมองค์กร

วิทยากรผู้สอน

สามิตร โกยมCEO ที่สถาบันไอทีจีเนียส

คำถามที่พบบ่อย

Ajax คืออะไร ทำงานอย่างไร

Ajax คือเทคนิคที่ให้ JavaScript ส่งคำขอไปยังเซิร์ฟเวอร์อยู่เบื้องหลัง แล้วนำผลลัพธ์มาอัปเดตบางส่วนของหน้าเว็บโดยไม่ต้องโหลดทั้งหน้าใหม่ เช่น ตรวจชื่อผู้ใช้ซ้ำขณะพิมพ์ หรือโหลดรายการสินค้าเพิ่มเมื่อเลื่อนหน้า ปัจจุบันเบราว์เซอร์ใช้ Fetch API เป็นมาตรฐาน ส่วน jQuery ก็มี $.ajax ที่ยังใช้กันมากในระบบเดิม และเซิร์ฟเวอร์มักตอบกลับเป็น JSON แทน XML เพราะใช้ใน JavaScript ได้ทันที

ส่งข้อมูลฟอร์มไปยัง PHP ด้วย Ajax โดยไม่รีโหลดหน้า ทำอย่างไร

ดักเหตุการณ์ submit ของฟอร์มแล้วเรียก preventDefault จากนั้นรวมค่าทุกช่องด้วย FormData หรือ .serialize() แล้วส่งด้วย fetch หรือ $.ajax ไปยังไฟล์ PHP ฝั่ง PHP อ่านค่าจาก $_POST หรืออ่าน JSON จาก php://input ตรวจข้อมูลซ้ำทุกครั้ง บันทึกด้วย PDO และ Prepared Statement แล้วตอบกลับด้วย json_encode พร้อมรหัสสถานะที่ถูกต้อง หน้าเว็บจึงนำผลไปแสดงข้อความหรือ Error ของแต่ละช่องได้ และควรส่ง CSRF Token ไปด้วยเสมอ

ควรใช้ jQuery Ajax หรือ Fetch API ดี

Fetch API มีอยู่ในเบราว์เซอร์ทุกตัวโดยไม่ต้องโหลดไลบรารีเพิ่ม ใช้ร่วมกับ async/await ได้ตรงไปตรงมา จึงเหมาะกับงานใหม่ ส่วน jQuery Ajax เหมาะกับระบบที่ใช้ jQuery อยู่แล้ว เพราะเขียนสั้นและมีตัวเลือกอย่าง timeout และ Ajax Event ระดับหน้าให้ใช้ทันที ข้อควรรู้คือ fetch ไม่ถือว่าสถานะอย่าง 404 หรือ 500 เป็น Error จึงต้องตรวจ res.ok เอง หลักสูตรนี้สอนทั้งสองแบบคู่กันเพื่อให้เลือกได้ตามงาน

หลักสูตร PHP Ajax with jQuery เหมาะกับใคร ต้องมีพื้นฐานอะไรมาก่อน

เหมาะกับนักพัฒนาที่เขียน PHP และ JavaScript มาระยะหนึ่ง นักพัฒนาที่ดูแลระบบ PHP เดิมที่ใช้ jQuery และ IT Manager ที่ต้องการเข้าใจโครงสร้างเว็บแอปแบบ Ajax ควรเข้าใจการเขียนเว็บด้วย PHP และ JavaScript เบื้องต้น และเคยใช้ MySQL หรือคำสั่ง SQL มาบ้าง ถ้ายังไม่คล่องก็มีการทบทวนพื้นฐานที่จำเป็นให้ในช่วงแรก

เรียนจบหลักสูตร PHP Ajax with jQuery แล้วทำอะไรได้บ้าง

เขียน PHP 8.5 ให้ตอบกลับเป็น JSON เรียก Ajax ได้ทั้งด้วย jQuery 4 และ Fetch API ใช้ PDO กับ MySQL อย่างปลอดภัย สร้างฟอร์ม Ajax ช่อง Autocomplete และการอัปโหลดไฟล์ ทำระบบ Login แบบ Ajax ป้องกัน CSRF และ XSS จัดการสถานะด้วย History API เรียก API ข้ามโดเมนด้วย CORS ออกแบบ REST API และสร้างร้านค้าออนไลน์แบบ Ajax ได้ ผู้ผ่านการอบรมได้รับใบประกาศนียบัตร (Certificate of Completion) ที่มีเลขที่ของตัวเองและตรวจสอบออนไลน์ได้

จัดอบรมหลักสูตร PHP Ajax with jQuery ให้ทีมในองค์กรได้ไหม

ได้ หลักสูตรนี้จัดเป็นการอบรมแบบ In-house ให้ทีมในองค์กรได้ และปรับตัวอย่างให้ตรงกับงานของทีม เช่น ฝึกเพิ่ม Ajax ให้ฟอร์มและหน้าค้นหาในระบบที่ทีมดูแลอยู่ หรือปรับโค้ด Ajax เดิมให้ปลอดภัยขึ้น ขอใบเสนอราคาได้จากหน้านี้ หรือติดต่อทาง LINE @itgenius โทร 02-570-8449