ได้เขียนเล่น ๆ แล้ว ก็ติดลม แบบว่ามันค้างคาใจอยู่นะครับ

ก็เลยมีภาคต่อ (อาจจะเป็นมหากาพย์เลยก็ได้ เพราะนี่แค่เริ่มต้นเอง)

ภาคที่แล้วผมเขียนเครื่องคิดเลขแบบง่าย ๆ ส่งค่าผ่าน form ไปแล้ว

วันนี้ก็เลยจะมาต่อยอด หรือ ทดสอบ เครื่องคิดเลขแบบ Ajax ดูบ้าง

คงจะพอผ่านหู ผ่านตากันบ้างแล้วนะครับ กับเจ้า Ajax

มันก็คือ การส่งค่าและแสดงค่าแบบไม่ต้อง refresh หน้านะครับ

แบบว่า คลิกแล้วส่งค่าไปประมวลผล และแสดงผลเลยนั้นเอง

หลายคนอาจจะคิดว่ามันยาก เลยไม่เคยลอง ผมเองก็เช่นกัน

แรก ๆ ก็กลัวว่าจะไปไม่เป็น แต่พอลองแล้วก็พบว่าเจ้า Ajax มันไม่ได้ยากอย่างที่คิดครับ

ลองทำจากตัวอย่างตามเว็บ หรือ การส่งค่า ประมวลผล เล็ก ๆ ง่าย ๆ ไปก่อน

เข้าเรื่องกันเลยดีกว่า โค้ดเครื่องคิดเลขแบบง่าย ๆ ด้วย Ajax ครับ

kidlak_ajax.php

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>เครื่องคิดเลขอย่างง่าย บวก ลบ คูณ หาร ภาคต่อ กับ Ajax</title>

<b id="show_result"></b>&nbsp;
 <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=tis-620"); // set Header
    xmlhttp.send(null);
 document.getElementById('show_result').innerHTML =  xmlhttp.responseText;
}
</script>

kidlak_chk.php

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<?
 $number=urlencode($number); // ต้อง encode ก่อน ไม่งั้นเครื่องหมายบวกจะกลายเป็นช่องว่างนะจ๊ะ ๆ
 
 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 นั้น

เครื่องหมายบวก กลายเป็นช่องว่าง ซะงั้น งมอยู่ตั้งนานกว่าจะเจอฟังก์ชั่นมาจัดการกับมัน

นั่นก็คือเครื่องหมาย urlencode(); นั่นเองครับ ใครที่เจอปัญหานี้ก็สามารถเอาไปจัดการกับมันได้เลยครับ

ขอบคุณครับ ...ไม่เข้าใจตรงไหนโพสถามไว้ได้เลยนะครับ