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