jQuery Basic #3 - Ajax send value and show data

B. Kittisak พฤศจิกายน 13, 2557
นี่เป็นตัวอย่างแบบง่ายที่แสดงให้เห็นหลักการทำงานของ Ajax ครับ (แม้ตัวอย่างนี้มี BackEnd เป็น ASP แต่ปรับมาใช้เป็น PHP ก็ไม่ได้ยุ่งยากอะไรมากครับ "ล่าสุดพบลิงก์ของ PHP แล้วครับลองดูที่ php_ajax_database") ซึ่งตัวอย่างนี้จะเห็นว่ามีการใช้ ActiveXObject("Microsoft.XMLHTTP") และฟังก์ชั่นอื่นๆประกอบเพื่อตั้งค่าำให้ Browser ที่ใช้อยู่สามารถทำงานเพื่อส่งค่า (ทั้งแบบ POST และ GET) และรับค่ากลับมาแสดงผลได้แบบ Automatic โดยไม่ต้อง Refresh หน้าเพจ

ซึ่งกว่าจะได้ใช้ก็ต้องเขียน code กันและแก้ Error ผสมลงไปด้วย ในความเห็นผมนั้นวิธีการนี้เองก็ยังไม่สะดวกนักเมื่อเจอปัญหาไม่ Compatible กับ Browser รุ่นและค่ายต่างๆ ดังนั้นผมจึงเลือกใช้ JavaScript Framework ที่ได้รับความนิยมแทน เนื่องจากว่ามีการแก้ปัญหาดังกล่าวไว้แล้ว เช่น jQuery เป็นต้น .... ซึ่งจะได้นำเสนอในโอกาสต่อไป

Demo From : asp_ajax_database

<!DOCTYPE html>
<html>

<head>
<script>
function showCustomer(str){
    if (str==""){
        document.getElementById("txtHint").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }else{
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET","getcustomer.asp?q="+str,true);
    xmlhttp.send();
}
</script>
</head>

<body>

<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>

<br>
<div id="txtHint">Customer info will be listed here...</div>

</body>
</html>
Tags

แสดงความคิดเห็น

0 ความคิดเห็น