ได้เขียนเล่น ๆ แล้ว ก็ติดลม แบบว่ามันค้างคาใจอยู่นะครับ ก็เลยมีภาคต่อ (อาจจะเป็นมหากาพย์เลยก็ได้ เพราะนี่แค่เริ่มต้นเอง) ภาคที่แล้วผมเขียนเครื่องคิดเลขแบบง่าย ๆ ส่งค่าผ่าน form ไปแล้ว วันนี้ก็เลยจะมาต่อยอด หรือ ทดสอบ เครื่องคิดเลขแบบ Ajax ดูบ้าง คงจะพอผ่านหู ผ่านตากันบ้างแล้วนะครับ กับเจ้า Ajax มันก็คือ การส่งค่าและแสดงค่าแบบไม่ต้อง refresh หน้านะครับ แบบว่า คลิกแล้วส่งค่าไปประมวลผล และแสดงผลเลยนั้นเอง
หลายคนอาจจะคิดว่ามันยาก เลยไม่เคยลอง ผมเองก็เช่นกัน แรก ๆ ก็กลัวว่าจะไปไม่เป็น แต่พอลองแล้วก็พบว่าเจ้า Ajax มันไม่ได้ยากอย่างที่คิดครับ ลองทำจากตัวอย่างตามเว็บ หรือ การส่งค่า ประมวลผล เล็ก ๆ ง่าย ๆ ไปก่อน เข้าเรื่องกันเลยดีกว่า โค้ดเครื่องคิดเลขแบบง่าย ๆ ด้วย Ajax ครับ
หลักการทำงานของเครื่องคิดเลข Ajax กับ PHP คร่าว ๆ
kidlak.php
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>เครื่องคิดเลขอย่างง่าย บวก ลบ คูณ หาร ภาคต่อ กับ Ajax</title>
<b id="show_result"></b>
<input type="text" name="number" id="number">
<input type="submit" name="Submit" value="คำนวณ" onclick="kidlak_chk(); return false;">
<script language="javascript">
// Start XmlHttp Object
function uzXmlHttp(){
var xmlhttp = false;
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlhttp = false;
}
}
if(!xmlhttp && document.createElement){
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
// End XmlHttp Object
function kidlak_chk(){
var url = 'kidlak_chk.php?number='+document.getElementById('number').value;
//alert(url);
xmlhttp = uzXmlHttp();
xmlhttp.open("GET", url, false);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8"); // set Header
xmlhttp.send(null);
document.getElementById('show_result').innerHTML = xmlhttp.responseText;
}
</script>
kidlak_chk.php
<?php
$number=$_GET['number']; // รับค่าตัวแปร GET
if(strpos($number," ")){ // ถ้าเป็นช่องว่าง แสดงว่าเป็น +
$Midtxt=explode(' ',$number);
$num1=$Midtxt[0];
$num2=$Midtxt[1];
echo $number." = ".($num1+$num2);
}
if(strpos($number,"-")){
$Midtxt=explode('-',$number);
$num1=$Midtxt[0];
$num2=$Midtxt[1];
echo $number." = ".($num1-$num2);
}
if(strpos($number,"*")){
$Midtxt=explode('*',$number);
$num1=$Midtxt[0];
$num2=$Midtxt[1];
echo $number." = ".($num1*$num2);
}
if(strpos($number,"/")){
$Midtxt=explode('/',$number);
$num1=$Midtxt[0];
$num2=$Midtxt[1];
echo $number." = ".($num1/$num2);
}?>
*** เห็นง่าย ๆ แบบนี้ ตอนทำจริงทำเอาผมเกือบไปไม่เป็นเลยทีเดียว เนื่องจากตอนส่งค่าเครื่องหมายบวก (+) จากไฟล์ kidlak_ajax.php ไป kidlak_chk.php นั้น เครื่องหมายบวก กลายเป็นช่องว่าง ซะงั้น งมอยู่ตั้งนานกว่าจะเจอฟังก์ชั่นมาจัดการกับมัน นั่นก็คือใช้คำสั่ง strpos เช็คค่าว่างครับ ถ้าเจอค่าว่างก็แสดงว่าผู้ใช้ต้องการ บวกเลขนั่นเอง หรือใครที่มีวิธีอื่นที่ดีกว่าก็เปลี่ยนได้ ตามสะดวกนะครับ อันนี้ผมเขียนเล่น ๆ ลองฝึกสมองเท่านั้น
ใครที่กำลังมองหาแนวทางการเขียนโค้ด PHP เครื่องคิดเลขแบบ Ajax อยู่ ก็ลองเอาโค้ดที่ผมเขียนนี้ไปปรับ ประยุกต์ใช้กันดูนะครับ หวังว่าบทความนี้จะเป็นประโยชน์กับหลาย ๆ ท่านที่กำลังเจอปัญหา หรือกำลังจะทำโปรแกรมเล็ก ๆ อย่างเครื่องคิดเลขบางนะครับ หากมีข้อผิดพลาดประการใด ต้องขออภัยไว้ ณ ที่นี้ด้วยนะครับผม
ขอบคุณทุกท่่านที่แวะเข้ามาเยี่ยมชมเว็บของเรา www.code-father.com