ข้ามไปที่เนื้อหาหลัก
AJAX คืออะไร? กรณีการใช้งาน AJAX มีอะไรบ้าง? อะไรคือตัวอย่างการทำงานของ AJAX? AJAX ใช้เทคโนโลยีอะไรบ้าง? AJAX ทำงานอย่างไร? AWS สามารถสนับสนุนข้อกำหนดในการพัฒนาเว็บแอปพลิเคชันของคุณได้อย่างไร?

AJAX คืออะไร?

Asynchronous JavaScript และ XML (AJAX) คือการผสมผสานกันของเทคโนโลยีการพัฒนาเว็บแอปพลิเคชันที่ทำให้เว็บแอปพลิเคชันตอบสนองต่อการโต้ตอบของผู้ใช้เร็วขึ้น เมื่อใดก็ตามที่ผู้ใช้ของคุณโต้ตอบกับเว็บแอปพลิเคชัน เช่น เมื่อพวกเขาคลิกปุ่มหรือกล่องกาเครื่องหมาย เบราว์เซอร์จะแลกเปลี่ยนข้อมูลกับเซิร์ฟเวอร์ทางไกล การแลกเปลี่ยนข้อมูลอาจเป็นสาเหตุทำให้หน้าเพจทำงานหนักและขัดจังหวะประสบการณ์ของผู้ใช้ได้ ด้วย AJAX เว็บแอปพลิเคชันจะสามารถส่งและรับข้อมูลในพื้นหลังเพื่อให้มีการรีเฟรชหน้าเว็บเฉพาะเพียงส่วนย่อยๆ เท่าที่จำเป็นเท่านั้น

กรณีการใช้งาน AJAX มีอะไรบ้าง?

คุณสามารถใช้ AJAX เพื่อสร้างคุณสมบัติต่างๆ ในเว็บแอปพลิเคชันได้

การป้อนคำโดยอัตโนมัติ

เครื่องมือค้นหาให้ตัวเลือกการเติมข้อความอัตโนมัติแบบเรียลไทม์เมื่อผู้ใช้ค้นหาคีย์เวิร์ดที่เฉพาะเจาะจงในแถบค้นหา AJAX ช่วยในการถ่ายทอดการป้อนข้อมูลตัวอักษรแต่ละตัวให้หน้าเว็บไปยังเว็บเซิร์ฟเวอร์และส่งกลับมาเป็นรายการของคำแนะนำที่เกี่ยวข้องบนหน้าเว็บที่มีอยู่

การยืนยันแบบฟอร์ม

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

ฟังก์ชันการแชท

ผู้ส่งข้อความและแชทบอทจะใช้ AJAX เพื่อแสดงการสนทนาแบบเรียลไทม์บนเบราว์เซอร์ โดย AJAX จะส่งข้อความที่เขียนโดยผู้ใช้ไปยังเซิร์ฟเวอร์และเผยแพร่พร้อมกันในอินเตอร์เฟซการแชทของผู้ใช้อื่น ๆ

โซเชียลมีเดีย

แพลตฟอร์มโซเชียลมีเดียวมีการใช้ AJAX เพื่อปรับปรุงฟีดของผู้ใช้ที่มีเนื้อหาล่าสุดโดยไม่ต้องโหลดหน้าใหม่บนเบราว์เซอร์ ยกตัวอย่างเช่น Twitter ที่รีเฟรชหน้าฟีดของคุณทันทีเมื่อใดก็ตามที่คุณตามทวีตที่มีการอัพเดท 

ระบบการลงคะแนนเสียงและการให้คะแนน

บางฟอรั่มและเว็บไซต์โซเชียลบุ๊คมาร์คมีการใช้ AJAX ในการแสดงการให้คะแนนหรือคะแนนโหวตของโพสต์ที่เฉพาะเจาะจงในเวลาจริง ยกตัวอย่างเช่น คุณสามารถโหวตลงคะแนนเห็นด้วยหรือไม่เห็นด้วยโพสต์บน Reddit โดยไม่ต้องรีเฟรชทั้งหน้า

อะไรคือตัวอย่างการทำงานของ AJAX?

เราแบ่งปันแอปพลิเคชัน AJAX ที่ใช้งานจริงหลายรายการดังต่อไปนี้

AJAX ใช้เทคโนโลยีอะไรบ้าง?

AJAX ประกอบด้วยเว็บและเทคโนโลยีโปรแกรมมิ่งที่หลากหลาย ซึ่งช่วยเว็บแอปพลิเคชันในการแลกเปลี่ยนข้อมูลกับเว็บเซิร์ฟเวอร์แบบอะซิงโครนัส 

XHTML, HTML และ CSS

ภาษามาร์กอัปข้อความหลายมิติขยายได้ (XHTML), HTML และ สไตล์ชีต (CSS) เป็นภาษามาร์กอัป คุณสามารถใช้ภาษาเหล่านี้เพื่อให้ข้อมูลกับเว็บเบราเซอร์เกี่ยวกับการออกแบบและรูปแบบของเนื้อหาของหน้าเว็บของคุณ

ตัวอย่างเช่น คุณสามารถใช้ XHTML หรือ HTML เพื่อจัดตำแหน่งข้อความและรูปภาพบนเว็บเพจ จากนั้นคุณสามารถใช้ CSS เพื่อเปลี่ยนชนิดตัวอักษรและสีพื้นหลัง 

XML

XML เป็นภาษาโปรแกรมที่ช่วยให้การใช้งานที่แตกต่างกันในการแลกเปลี่ยนข้อมูล ในฐานะที่เป็นข้อมูลที่เป็นตัวแทนที่แตกต่างกันในการใช้งานต่างๆ คุณสามารถใช้ XML เพื่อให้ข้อมูลอยู่ในรูปแบบข้อความธรรมดา จากนั้นแอปพลิเคชัน AJAX จะสามารถแลกเปลี่ยนและประมวลผลข้อมูลในรูปแบบ XML ที่ใช้ร่วมกันได้

XMLHttpRequest

XMLHttpRequest เป็น API ที่ช่วยให้เว็บเบราว์เซอร์ในการสื่อสารกับเว็บเซิร์ฟเวอร์อย่างอะซิงโครนัส คุณสามารถใช้ XMLHttpRequest object เพื่อส่งข้อมูลหน้าเว็บบางส่วนไปยังเซิร์ฟเวอร์ในรูปแบบ XML

อ่านเพิ่มเติมเกี่ยวกับ API »

Document Object Model

Document Object Model (DOM) จะจัดระเบียบหน้าเอกสาร HTML และ XML เป็นแบบโครงสร้างต้นไม้ DOM ประกอบด้วยโหนดที่สาขาเป็นโหนดลูกหรือวัตถุ DOM จะช่วยให้คุณสามารถจัดรูปแบบหรือแก้ไขรหัสบนหน้าเว็บที่เฉพาะเจาะจงได้อย่างมีประสิทธิภาพมากขึ้น 

JavaScript 

JavaScript เป็นภาษาสคริปต์ที่คุณสามารถใช้เพื่อแสดงเนื้อหาแบบไดนามิกไปยังเว็บเพจ เนื้อหาแบบไดนามิก (Dynamic content) หมายถึงข้อมูลเว็บเพจที่อัปเดตแบบเรียลไทม์หรือขึ้นอยู่กับการโต้ตอบของผู้ใช้ ยกตัวอย่างเช่นใน AJAX, JavaScript ซึ่งทำงานร่วมกับเทคโนโลยีเว็บอื่น ๆ ที่เรากล่าวถึงในโพสต์นี้เพื่อเปิดใช้งานการอัพเดทเพจแบบอะซิงโครนัส 

AJAX ทำงานอย่างไร?

AJAX ใช้ JavaScript และ XML เพื่อเปิดใช้งานการเรียกใช้แบบ asynchronous เมื่อเบราว์เซอร์และเซิร์ฟเวอร์แลกเปลี่ยนข้อมูลกัน ต่อไปเราจะอธิบายวิธีที่เบราว์เซอร์แลกเปลี่ยนข้อมูลกันแบบดั้งเดิม และเปรียบเทียบกับการแลกเปลี่ยนข้อมูลด้วย AJAX

การแลกเปลี่ยนข้อมูลโดยไม่ใช้ AJAX

ในโมเดลแบบดั้งเดิม เบราว์เซอร์ส่งคำขอ HTTP ไปยังฝั่งเซิร์ฟเวอร์เมื่อผู้ใช้ดำเนินการบางอย่าง เว็บเซิร์ฟเวอร์ได้รับและประมวลผลคำขอและส่งข้อมูลที่ปรับปรุงไปยังเบราว์เซอร์ จากนั้นเบราว์เซอร์รีเฟรชหน้าเว็บด้วยข้อมูลใหม่

ในวิธีการนี้ เบราว์เซอร์จะโหลดอีกครั้งทั้งหน้าแม้ว่าข้อมูลที่ร้องขอประกอบด้วยการเปลี่ยนแปลงเล็กน้อย นอกจากนี้ เบราว์เซอร์อาจส่งคำขอบ่อยซึ่งทำให้ซอฟต์แวร์เว็บเซิร์ฟเวอร์ทำงานหนักขึ้น 

การแลกเปลี่ยนข้อมูลกับ AJAX

แทนที่จะอัพเดททั้งหน้า AJAX จะใช้ฟังก์ชัน JavaScript เพื่อสร้าง XMLHttpRequest object บนเบราว์เซอร์ จากนั้น AJAX จะรวบรวมข้อมูลหน้าในรูปแบบ XML ซึ่ง XMLHttpRequest object จะถูกส่งไปยังเว็บเซิร์ฟเวอร์ เว็บเซิร์ฟเวอร์ทำการประมวลผลตามการร้องขอและตอบสนองกับข้อมูลที่ร้องขอ สุดท้ายเบราว์เซอร์จะอัปเดตหน้าจอปัจจุบันด้วยข้อมูลล่าสุดโดยไม่ต้องรีเฟรชหน้าเว็บ 

ทำไม AJAX จึงมีประสิทธิภาพมากขึ้น?

แม้จะมีความคล้ายคลึงกันในการแลกเปลี่ยนข้อมูลและรูปแบบการไหลของข้อมูล แต่ทว่า AJAX มีประสิทธิภาพมากกว่าคำขอเว็บแบบเดิม ด้วยการใช้ AJAX ทำให้เบราว์เซอร์เพียงปรับปรุงเนื้อหาเว็บในส่วนที่เฉพาะเจาะจง ขึ้นอยู่กับข้อมูลที่ร้องขอ มันไม่ได้ทำให้เกิดการรีเฟรชทีส่วน่ไม่จำเป็นในเนื้อหาอื่น ๆ บนหน้าเว็บ สิ่งนี้จะทำให้แอปพลิเคชัน AJAX ทำงานเร็วขึ้นและตอบสนองเร็วขึ้นเมื่อเทียบกับเว็บแอปพลิเคชันธรรมดา 

AWS สามารถสนับสนุนข้อกำหนดในการพัฒนาเว็บแอปพลิเคชันของคุณได้อย่างไร?

Amazon Web Services (AWS) มีเทคโนโลยีหลายอย่างที่จะสนับสนุนคุณในการพัฒนาเว็บแอปพลิเคชัน:

  • AWS Amplify มีชุดเครื่องมือในการสร้าง ปรับใช้ และปรับขนาดเว็บและแอปมือถือได้อย่างง่ายดาย คุณสามารถใช้ AWS Amplify เพื่อสร้างแอปพลิเคชันข้ามแพลตฟอร์ม สร้างอินเทอร์เฟซแอปที่ใช้งานง่าย และโฮสต์เว็บแอปพลิเคชันผ่านเครือข่ายการส่งเนื้อหาของ AWS ที่ปลอดภัย
  • AWS API Gateway เป็นบริการที่มีการจัดการอย่างเต็มที่สำหรับการสร้าง ปรับใช้ และจัดการ API ในระดับสเกล มันจะจัดการการเรียก API หลายร้อยรายการพร้อมกันโดยให้มีความปลอดภัย มีความยืดหยุ่น และมีสภาพแวดล้อมที่โปร่งใส คุณสามารถใช้ AWS API Gateway เพื่อสร้าง API แบบ RESTful และผ่านทาง HTTP สำหรับเว็บแอปพลิเคชันได้
  • AWS Lambda เป็นบริการไร้เซิร์ฟเวอร์ที่ช่วยให้คุณสามารถเรียกใช้รหัสโดยไม่ต้องจัดเตรียมโครงสร้างพื้นฐาน คุณสามารถปรับขนาดทรัพยากรการคำนวณสำหรับ app ของคุณตามความต้องการและจ่ายเฉพาะสำหรับทรัพยากรที่คุณใช้ 

คุณสามารถใช้เกตเวย์ของ Amazon API ที่จะเปิดให้ฟังก์ชั่น Lambda ของคุณสามารถเข้าถึงได้โดยเป็น RESTful API จากนั้น คุณจะสามารถสร้างเว็บแอปพลิเคชันแบบไดนามิกโดยการเพิ่ม JavaScript ฝั่งไคลเอ็นต์ที่ทำการเรียก AJAX ไปยัง API ที่เปิดให้ใช้งาน เรียนรู้วิธีสร้างแอปพลิเคชันไร้เซิร์ฟเวอร์ด้วย AWS Amplify, AWS Lambda และ AWS API Gateway  

เริ่มต้นใช้งาน AJAX บน AWS โดย การสร้างบัญชี วันนี้