การ debug ajax
หลายๆครั้งที่เราใช้งาน Ajax แล้วพบข้อผิดพลาด เรามักจะไม่ค่อยรู้ครับ ว่ามันผิดพลาดที่ตรงไหน เนื่องจาก ถึงแม้ว่า browser จะแจ้งว่าพบข้อผิดพลาดที่ Javascript ก็ตาม
หลักการจริงๆ ก็คือเราต้องแยกให้ออกว่าข้อผิดพลาดนั้นเกิดที่ไหนครับ
ด้านบนคือโค้ดทั่วๆไปของ Javascript การตรวจสอบว่า Javascript ผิดพลาดหรือเปล่า สามารถทำได้ด้วยการ alert() ค่าออกมาดูครับ ถ้าสงสัยบรรทัดไหน ก็ให้ alert ค่าที่สงสัยออกมาดูก่อนและหลังทำงาน เช่น error บอกว่าเกิดที่ var req = Inint_AJAX(); ก็ให้เราลอง alert(req) ออกมาดู
ส่วนผลลัพท์ที่ได้จะเป็นอะไรนั้นให้สังเกตุดูครับ ทำบ่อยๆจะรู้เองครับว่าแต่ละฟังก์ชั่นที่เราใช้งานมันจะคืนค่าอะไรออกมา ถ้ามันปกติ
ข้อสำคัญ อย่าขี้เกียจที่จะทดสอบครับ เพราะมันจะเสียเวลาน้อยกว่าการนั่งงมหาที่ผิดโดยไม่รู้ตำแหน่งที่ถูกต้อง หรือปัญหาที่ถูกต้อง
นอกจากนี้ข้อผิดพลาดอาจเกิดขึ้นจากผลลัพท์ที่ตอบกลับมาจาก Ajax ก็ได้ครับ ซึ่งข้อผิดพลาดที่เกิดขึ้นก็จะอยู่ใน if(req.status==200) {...} เนื่องจากในส่วนนี้จะเป็นส่วนที่มีผลตอบกลับจาก PHP ครับ ในส่วนนี้ การ debug PHP ก็ทำได้ง่ายๆแค่ alert(req.responseText) ครับ
ซึ่งหากไม่มีการ alert() เกิดขึ้นก็หมายความว่า Ajax ไม่ได้รับผลตอบกลับอันเนื่องมาจากการกำหนดค่าฟังก์ชั่นไม่ถูก หรือไม่ก็ไม่พบเพจ PHP ปลายทางก็ได้ครับ
ส่วนผลตอบกลับที่ได้จะเป็นอะไรนั้น ก็แล้วแต่การออกแบบละครับ ผิดตรงไหนบน PHP ก็อาจเห็นได้เองครับ
หลักการจริงๆ ก็คือเราต้องแยกให้ออกว่าข้อผิดพลาดนั้นเกิดที่ไหนครับ
// สร้าง Object
var req = Inint_AJAX();
// กำหนด สถานะการทำงานของ AJAX
req.open('GET', 'test3.php', true);
// เหตุการณ์เมื่อมีการตอบกลับ
req.onreadystatechange = function () {
// ได้รับการตอบกลับเรียบร้อย
if (req.readyState == 4) {
// ข้อความที่ได้มาจากการทำงานของ test3.php
if (req.status == 200) {
var data = req.responseText;
// แสดงผล
document.getElementById("content").innerHTML = "ข้อความที่ตอบกลับจาก server คือ " + data}
}
};
// Header ที่ส่งไป
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// ทำการส่ง
req.send(null);
ด้านบนคือโค้ดทั่วๆไปของ Javascript การตรวจสอบว่า Javascript ผิดพลาดหรือเปล่า สามารถทำได้ด้วยการ alert() ค่าออกมาดูครับ ถ้าสงสัยบรรทัดไหน ก็ให้ alert ค่าที่สงสัยออกมาดูก่อนและหลังทำงาน เช่น error บอกว่าเกิดที่ var req = Inint_AJAX(); ก็ให้เราลอง alert(req) ออกมาดู
var req = Inint_AJAX();
// debug
alert(req);
ส่วนผลลัพท์ที่ได้จะเป็นอะไรนั้นให้สังเกตุดูครับ ทำบ่อยๆจะรู้เองครับว่าแต่ละฟังก์ชั่นที่เราใช้งานมันจะคืนค่าอะไรออกมา ถ้ามันปกติ
ข้อสำคัญ อย่าขี้เกียจที่จะทดสอบครับ เพราะมันจะเสียเวลาน้อยกว่าการนั่งงมหาที่ผิดโดยไม่รู้ตำแหน่งที่ถูกต้อง หรือปัญหาที่ถูกต้อง
นอกจากนี้ข้อผิดพลาดอาจเกิดขึ้นจากผลลัพท์ที่ตอบกลับมาจาก Ajax ก็ได้ครับ ซึ่งข้อผิดพลาดที่เกิดขึ้นก็จะอยู่ใน if(req.status==200) {...} เนื่องจากในส่วนนี้จะเป็นส่วนที่มีผลตอบกลับจาก PHP ครับ ในส่วนนี้ การ debug PHP ก็ทำได้ง่ายๆแค่ alert(req.responseText) ครับ
// ได้รับการตอบกลับเรียบร้อย
if (req.status == 200) {
// ผลตอบกลับจาก PHP
alert(req.responseText);
// ข้อความที่ได้มาจากการทำงานของ test3.php
var data = req.responseText;
// แสดงผล
document.getElementById("content").innerHTML = "ข้อความที่ตอบกลับจาก server คือ " + data;
}
ซึ่งหากไม่มีการ alert() เกิดขึ้นก็หมายความว่า Ajax ไม่ได้รับผลตอบกลับอันเนื่องมาจากการกำหนดค่าฟังก์ชั่นไม่ถูก หรือไม่ก็ไม่พบเพจ PHP ปลายทางก็ได้ครับ
ส่วนผลตอบกลับที่ได้จะเป็นอะไรนั้น ก็แล้วแต่การออกแบบละครับ ผิดตรงไหนบน PHP ก็อาจเห็นได้เองครับ