มาทำการศึกษาการใช้ JavaScript และ XML ในการรับส่งขอ้มูลระหว่าง client กับ server โดยผ่านทาง XMLHttpRequest อย่างที่ใครๆเขาก็เรียกกันว่า AJAX (Asynchronous JavaScript and XML) โดย AJAX เป็นเทคนิคที่เราสามารถทำการรับส่งข้อมูลระหว่าง client กับ server ได้โดยที่เราไม่ต้องทำการ submit ข้อมูลผ่าน form แต่อย่างใด ซึ่งเทคนิคนี้เราสามารถที่จะเอามาทำ webapplication ที่มีการรับส่งข้อมูลระหว่าง client กับ server ได้โดยที่ไม่ต้องทำการ refresh หน้า browser
มีสมาชิกหลายคน email มาบอกว่าสนใจการทำงานของระบบ favorites online ว่าสามารถที่จะทำการส่งข้อมูลต่างๆ ไปเก็บที่ server ได้อย่างไร โดยที่ไม่ต้องทำการ refresh browser อย่างเช่นตอนที่เราทำการเพิ่มข้อมูลเข้าไปใน favorites online แล้วข้อมูลก็จะไปแสดงในส่วนของการแสดงผลทันที โดยที่ไม่มีการ refresh หรือว่า การคลิกขวาเพื่อเลือก group ก็ไม่มีการ refresh เหมือนกัน เมื่อมีสมาชิกขอมากเราก็จะจัดให้
ที่จริงแล้วการทำงานของระบบก็ไม่ได้ยากอะไร เพียงแค่ใช้เจ้า AJAX (Asynchronous JavaScript and XML) ในการทำงานเท่านั้น ความ จริงแล้ว AJAX ไม่ใช้เทคโนโลยีใหม่แต่อย่างใด เป็นเพียงการนำ XML และ JavaScript มาใช้งานร่วมกัน เพื่อทำการส่งข้อมูลระหว่าง client กับ serverเท่านั้น
ตัวอย่าง website ที่มีการนำ AJAX ไปใช้งาน
Gmail
http://www.gmail.com/
Google Suggest
http://www.google.com/webhp?complete=1&hl=en
และตอนนี้ www.hotmail.com เองก็กำลังทำ Hotmail ตัวใหม่ที่ใช้ AJAX เหมือนกัน
ก่อนที่จะไปดู code ตัวอย่างมาดูที่หลักการทำงานกันก่อน
หลักการทำงานของ AJAX ก็คือ จะมี JavaScritp ชุดหนึงที่จะทำหน้าที่ Request ข้อมูลจากทาง server ผ่านทาง XMLHttpRequest และทำการนำค่าที่ได้นั้นออกมาแสดงที่หน้า browser อีกที โดยข้อมูลที่จะรับเข้ามานั้นจะเป็น XML หรือว่าเป็น text plan ธรรมดาก็ได้ แต่ในตัวอย่าง ผมจะแนะนำการรับข้อมูลที่เป็น text ธรรมดาเท่านั้นนะครับ เพื่อให้ง่ายต่อความเข้าใจ
โอ้ว พระแม่เจ้า นี้ขนาดอธิบายการทำงาน ยังงงเองเลยนะนี้ ไม่อธิบายแล้วไปดูตัวอย่างกันเลยดีกว่า
ในตัวอย่างต่อไปนี้ จะเป็นการส่งค่าของ ตัวเลข 2 ตัวไปบวกกันที่ server และรับค่ากลับมาแสดงผลที่หน้า browser โดยโปรแกรมทางฝั่ง server เราก็จะใช้ php เหมือนเดิม (คิดได้ไงอะ ตัวอย่างโปรแกรมบวกเลข โดยส่งค่าตัวเลข 2 ตัวไปบวกที่ server)
ขั้นแรกสร้าง file html ขึ้นมาก่อน
xmlhttp.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <html> <head> <title> AJAX Example by www.unzeen.com</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-874"> <style type="text/css"> <!-- body,td,th { font-family: MS Sans Serif, Microsoft Sans Serif, Tahoma; font-size: 10pt; } --> </style></head> <body> <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 getresult(){ // เอาค่าจาก form มาเก็บลง num1,num2 var num1 = document.form1.num1.value; var num2 = document.form1.num2.value; var result; var url = 'ajax.php?num1=' + num1 + '&num2='+ num2; xmlhttp = uzXmlHttp(); xmlhttp.open("GET", url, false); xmlhttp.send(null); // รับค่ากลับจาก server มาเก็บลง result result = xmlhttp.responseText; // นำค่าที่ได้ออกไปแสงผล document.form1.result.value = result; } </script> <form name="form1" method="post" action=""> <br> <table width="365" border="0" cellpadding="1" cellspacing="1" bgcolor="#CCCCCC"> <tr bgcolor="#FFFFFF"> <td colspan="2"><strong>โปรแกรมบวกเลขที่ server</strong></td> </tr> <tr bgcolor="#FFFFFF"> <td>ตัวเลขที่ 1</td> <td><input name="num1" type="text" id="num1"></td> </tr> <tr bgcolor="#FFFFFF"> <td>ตัวเลขที่ 2</td> <td><input name="num2" type="text" id="num2"></td> </tr> <tr bgcolor="#FFFFFF"> <td colspan="2"><strong>ค่าที่รับกลับมาจาก server </strong></td> </tr> <tr bgcolor="#FFFFFF"> <td>ผลบวก</td> <td><input name="result" type="text" id="result"></td> </tr> <tr bgcolor="#FFFFFF"> <td> </td> <td><input type="button" name="Button" value="นำไปบวกที่ server " onClick="getresult();"></td> </tr> </table> <br> </form> </body> </html> |
ต่อไปก็มาทำตัวโปรแกรมที่จะใช้บวกเลขกันต่อเลย โดยที่โปรแกรม ajax.php จะรับค่า $num1 และ $num2 เข้ามา จากนั้นจะทำการบวกกัน และนำค่าที่ได้ไปเก็บไว้ที่ $result และทำการ print ค่า $result ออกมา
ajax.php
1 2 3 4 5 6 | <?php $result = $num1 + $num2; print $result; ?> |
เมือ่สร้างทั้ง 2 file เสร็จแล้วเราก็มาลองทดสอบการทำงานของโปรแกรมกันดูเลย โดยจะ upload ขึ้นไปที่ server ของคุณ หรือว่าจะทดสอบ จาก script ของผมก็ได้ https://www.unzeen.com/example/xmlhttp/xmlhttp.html
ต่อไปมาดูหลักการทำงานของโปรแกรมบวกเลขนี้กัน จะเห็นว่าที่ file xmlhttp.html จะมี JavaScript ดังนี้ ผมจะอธิบายการทำงาน ตาม code ไปเลยนะครับ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | <script language="javascript"> /** function uzXmlHttp เป็น function ที่ใช้สร้าง object ของ XMLHTTP จะเห็นว่าเราจะทำการตรวจสอบ ก่อนว่าบนเครื่องนี้มี XMLHTTP ตัวไหนอยู่ โดยจะทำการเรียกใช้ Msxml2.XMLHTTP ก่อนหากว่าไม่พอก็จะไปเรียก Microsoft.XMLHTTP และหากว่าไม่พบอีกก็จะไปเรียกใช้ XMLHttpRequest ซึ่ง XMLHTTP 2 ตัวแรกคือ Msxml2.XMLHTTP กับ Microsoft.XMLHTTP จะเป็นตัวที่ทำงานบน IE และตัว XMLHttpRequest ก็จะเป็นตัวที่ทำงานบน Firefox ดังนั้นเราจึงสามารถใช้ script ตัวนี้ได้ทั้ง IE และ Firefox โดยสามารถทำงานได้ทั้งบน Windows และ Linux **/ // 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 getresult เป็น function ที่จะทำการส่งค่า ของ num1 และ num2 ไปที่ server โดยผ่าน Method GET และจะทำการรับค่ากลับจาก server โดยผ่าน properties responseText และนำค่าที่ได้มาเก็บไว้ที่ตัวแปร result จากนั้นก็จะนำค่าที่ได้ไปแสดงที่ Text Field ที่ชื่อ result อีกทีหนึง */ function getresult(){ // เอาค่าจาก form มาเก็บลง num1,num2 var num1 = document.form1.num1.value; var num2 = document.form1.num2.value; var result; // กำหนด URL ของโปรแกรมที่จะรับค่าและใส่ค่าของตัวแปรที่ต้องการส่งไปด้วย var url = 'ajax.php?num1=' + num1 + '&num2='+ num2; xmlhttp = uzXmlHttp(); xmlhttp.open("GET", url, false); xmlhttp.send(null); // รับค่ากลับจาก server มาเก็บลง result result = xmlhttp.responseText; // นำค่าที่ได้ออกไปแสงผล document.form1.result.value = result; } </script> |
มาถึงตรงนี้ หลายคนก็พอจะได้แนวคิดที่จะนำไปใช้ทำ webapplication ของตัวเองบ้างแล้วนะครับ
ขอให้สนุกกับการใช้ AJAX ครับ
