การทำงานกับ AJAX (Working with AJAX)

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

ตัวอย่างการใช้งาน AJAX ใน JavaScript:

Copycopy code to clipboard
// ส่งคำร้องขอ HTTP GET ด้วย XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

xhr.onreadystatechange = function () {
 if (xhr.readyState === XMLHttpRequest.DONE) {
 if (xhr.status === 200) {
 const response = JSON.parse(xhr.responseText);
 console.log(response);
 } else {
 console.log('เกิดข้อผิดพลาดในการรับข้อมูล');
 }
 }
};

xhr.send();

// ส่งคำร้องขอ HTTP GET ด้วย Fetch API
fetch('https://api.example.com/data')
 .then(response => response.json())
 .then(data => {
 console.log(data);
 })
 .catch(error => {
 console.log('เกิดข้อผิดพลาดในการรับข้อมูล');
 });`

ในตัวอย่างข้างต้น เราใช้ XMLHttpRequest เพื่อสร้างคำร้องขอ HTTP GET ไปยังเซิร์ฟเวอร์ เมื่อคำร้องขอสมบูรณ์แล้ว เราใช้ onreadystatechange เพื่อตรวจสอบสถานะของคำร้องขอและรับข้อมูลที่ถูกส่งกลับมา หากสถานะคือ XMLHttpRequest.DONE และสถานะการตอบสนองของเซิร์ฟเวอร์เป็น 200 (OK) เราจะแปลงข้อมูลที่ได้รับกลับมาในรูปแบบ JSON และทำการประมวลผลต่อไป

ในบริบทของ Fetch API เราใช้ฟังก์ชัน fetch() เพื่อส่งคำร้องขอ HTTP GET และเรียกใช้เมธอด .json() เพื่อแปลงข้อมูลที่ได้รับกลับมาในรูปแบบ JSON เราสามารถเรียกใช้ .then() เพื่อดำเนินการต่อกับข้อมูลที่ได้รับ และ .catch() เพื่อจัดการข้อผิดพลาดที่เกิดขึ้น

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

การใช้งาน AJAX ยังมีความสำคัญในการจัดการกับการส่งข้อมูลไปยังเซิร์ฟเวอร์เพื่อทำการบันทึกหรือปรับเปลี่ยนข้อมูลบนเซิร์ฟเวอร์ด้วยเช่นกัน นี่คือตัวอย่างการใช้งาน AJAX เพื่อส่งข้อมูลไปยังเซิร์ฟเวอร์:

Copycopy code to clipboard
// ส่งคำร้องขอ HTTP POST ด้วย XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/save-data', true);
xhr.setRequestHeader('Content-Type', 'application/json');

const data = {
 name: 'John Doe',
 email: 'johndoe@example.com'
};

xhr.onreadystatechange = function () {
 if (xhr.readyState === XMLHttpRequest.DONE) {
 if (xhr.status === 200) {
 console.log('บันทึกข้อมูลสำเร็จ');
 } else {
 console.log('เกิดข้อผิดพลาดในการบันทึกข้อมูล');
 }
 }
};

xhr.send(JSON.stringify(data));

// ส่งคำร้องขอ HTTP POST ด้วย Fetch API
const data = {
 name: 'John Doe',
 email: 'johndoe@example.com'
};

fetch('https://api.example.com/save-data', {
 method: 'POST',
 headers: {
 'Content-Type': 'application/json'
 },
 body: JSON.stringify(data)
})
 .then(response => {
 if (response.ok) {
 console.log('บันทึกข้อมูลสำเร็จ');
 } else {
 console.log('เกิดข้อผิดพลาดในการบันทึกข้อมูล');
 }
 })
 .catch(error => {
 console.log('เกิดข้อผิดพลาดในการส่งคำร้องขอ');
 });`

ในตัวอย่างข้างต้น เราใช้ XMLHttpRequest และ Fetch API เพื่อสร้างคำร้องขอ HTTP POST และส่งข้อมูลไปยังเซิร์ฟเวอร์ เราต้องกำหนดส่วนหัว Content-Type เป็น application/json เพื่อระบุว่าข้อมูลที่ส่งไปเป็นรูปแบบ JSON ในการส่งข้อมูล เราใช้ JSON.stringify() เพื่อแปลงข้อมูลให้เป็นสตริง JSON และส่งไปพร้อมกับคำร้องขอ

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

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