การใช้งาน Javascript ในหน้าที่ถูก Ajax เรียก

โดยปกติแล้วเราจะไม่สามารถใช้งาน Javascript ในหน้าที่ถูก Ajax เรียกได้ครับ เนื่องจากคำสั่ง innerHTML ที่เราเรียกใช้ไม่สามารถประมวลผล Javascript ได้ครับ ทำให้ Javascript ในหน้าที่ถูก Ajax โหลดมาไม่ทำงาน

ดูตัวอย่างการใช้ Ajax โหลด PHP ทั่วไป ซึ่งเรากำหนดให้ค่าที่ตอบกลับถูกนำไปแสดงผลโดยคำสั่ง innerHTML

โค้ดด้านล่างนี่เป็นโค้ด HTML และ Javascript ที่ต้องการส่งกลับครับ จะเห็นว่ามีการแทรก Javascript ลงไป 2 คำสั่ง

ถ้าได้ทดสอบโค้ดด้านบน จะเห็นว่า Javascript ไม่ทำงานเลย

การแก้ไขก็พอมีครับ

ถ้าคุณใช้งาน Javascript และ Ajax ด้วย Frame Work ทั่วๆไป หรือใช้งานบน Javascript ปกติ การแก้ไขที่ทำได้ก็คือต้องทำการย้ายเอา Javascript ไปทำงานบนเว็บหลักหรือ Javascript หลักครับ

โค้ด PHP ที่ถูก Ajax เรียกครััับ

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

แต่ถ้าคุณใช้งาน GAJAX ซึ่งมีความสามารถประมวลผลคำสั่ง Javascript ในหน้าที่โหลดมาจาก Ajax ได้ งานนี้ก็จะง่ายขึ้นแหละครับ แต่คุณอาจต้องเปลี่ยนวิธีเขียน Javascript เพื่อทำงานร่วมกับ Frame Work นิดหน่อย

หน้าหลักแทบไม่มีอะไรเปลี่ยนแปลงไปจากเดิมครับ มีเพียงคำสั่งเดียวที่เพิ่มเข้ามาเพื่อประมวลผล Javascript ครับ
แต่ในหน้าที่ถูก Ajax เรียก อาจต้องมีการปรับปรุงวิธีการเขียนเล็กน้อยเพื่อให้ใช้งานร่วมกับ Frame Work ได้

จะเห็นได้ว่า ถ้าเราใช้ GAJAX เราไม่จำเป็นต้องโหลด Javascript เตรียมไว้ก่อน ฟังก์ชั่นต่างๆก็สามารถเขียนไปได้ตามปกติ เพียงแต่การดัก Event เราต้องใช้ DOM ระดับ 3 แทน ครับ (สามารถดูบทความเกี่ยวกับเรื่องนี้ได้ที่ GAJAX)