การ debug ajax

หลายๆครั้งที่เราใช้งาน Ajax แล้วพบข้อผิดพลาด เรามักจะไม่ค่อยรู้ครับ ว่ามันผิดพลาดที่ตรงไหน เนื่องจาก ถึงแม้ว่า browser จะแจ้งว่าพบข้อผิดพลาดที่ Javascript ก็ตาม

หลักการจริงๆ ก็คือเราต้องแยกให้ออกว่าข้อผิดพลาดนั้นเกิดที่ไหนครับ
// สร้าง 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 ก็อาจเห็นได้เองครับ
ผู้เขียน goragod โพสต์เมื่อ 06 ต.ค. 2552 เปิดดู 12,080 ป้ายกำกับ Ajax Javascript
^