การใช้งาน 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)

0SHAREFacebook Twitter LINE it!