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

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

ดูตัวอย่างการใช้ Ajax โหลด PHP ทั่วไป ซึ่งเรากำหนดให้ค่าที่ตอบกลับถูกนำไปแสดงผลโดยคำสั่ง innerHTML
<head>
<title>Javascript in Ajax</title>
<script src="https://www.goragod.com/ajax/gajax.js" type="text/javascript"></script>
<script type="text/javascript">
    function doLoad(){
        new GAjax().send('test.php',null,function(xhr){
            // alert(xhr.responseText); // ดูค่าที่ตอบกลับ
            $E('result').innerHTML = xhr.responseText;
        });
    };
</script>

</head>
<body>
<div id="result">Result</div>
<input type="button" onclick="doLoad( )" value="Load" />
</body>
</html>

โค้ดด้านล่างนี่เป็นโค้ด HTML และ Javascript ที่ต้องการส่งกลับครับ จะเห็นว่ามีการแทรก Javascript ลงไป 2 คำสั่ง
คุณเห็น alert มั้ย ?
<script type="text/javascript">
alert('xxx'); // alert เมื่อโหลด
function doClick(){
    alert('yyy'); // alert เมื่อคลิก
}
</script>

<p><input type="button" value="ลองคลิก !" onclick="doClick()" /></p>

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

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

ถ้าคุณใช้งาน Javascript และ Ajax ด้วย Frame Work ทั่วๆไป หรือใช้งานบน Javascript ปกติ การแก้ไขที่ทำได้ก็คือต้องทำการย้ายเอา Javascript ไปทำงานบนเว็บหลักหรือ Javascript หลักครับ
<head>
<title>Javascript in Ajax</title>
<script src="https://www.goragod.com/ajax/gajax.js" type="text/javascript"></script>
<script type="text/javascript">
    // ย้าย doClick มาบน Javascript หลัก
    var doClick = function(){
        alert('yyy');
    };
    function doLoad(){
        new GAjax().send('test.php',null,function(xhr){
            // alert(xhr.responseText); // ดูค่าที่ตอบกลับ
            $E('result').innerHTML = xhr.responseText;
            alert('xxx'); // javascript ที่ต้องทำเมื่อทำการโหลดเพจ เอามาไว้ที่ event ตอบกลับของ Ajax แทน
        });
    };
</script>

</head>
<body>
<div id="result">Result</div>
<input type="button" onclick="doLoad( )" value="Load" />
</body>
</html>

โค้ด PHP ที่ถูก Ajax เรียกครััับ
คุณเห็น alert มั้ย ?
<p><input type="button" value="ลองคลิก" onclick="doClick()" /></p>

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

แต่ถ้าคุณใช้งาน GAJAX ซึ่งมีความสามารถประมวลผลคำสั่ง Javascript ในหน้าที่โหลดมาจาก Ajax ได้ งานนี้ก็จะง่ายขึ้นแหละครับ แต่คุณอาจต้องเปลี่ยนวิธีเขียน Javascript เพื่อทำงานร่วมกับ Frame Work นิดหน่อย
<head>
<title>Javascript in Ajax</title>
<script src="https://www.goragod.com/ajax/gajax.js" type="text/javascript"></script>
<script type="text/javascript">
    function doLoad(){
        new GAjax().send('test.php',null,function(xhr){
            // alert(xhr.responseText); // ดูค่าที่ตอบกลับ
            $E('result').innerHTML = xhr.responseText;
            xhr.responseText.evalScript();
        });
    };
</script>

</head>
<body>
<div id="result">Result</div>
<input type="button" onclick="doLoad( )" value="Load" />
</body>
</html>

หน้าหลักแทบไม่มีอะไรเปลี่ยนแปลงไปจากเดิมครับ มีเพียงคำสั่งเดียวที่เพิ่มเข้ามาเพื่อประมวลผล Javascript ครับ
แต่ในหน้าที่ถูก Ajax เรียก อาจต้องมีการปรับปรุงวิธีการเขียนเล็กน้อยเพื่อให้ใช้งานร่วมกับ Frame Work ได้
คุณเห็น alert มั้ย ?
<p><input type="button" value="ลองคลิก" id="test" /></p>
<script type="text/javascript">
alert('xxx');
var doClick = function(){
    alert('yyy');
};
$G('test').addEvent('click', doClick);
</script>

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