แนะนำการใช้งาน ajax เบื้องต้น เพื่อเตรียมตัวเป็น "Web programming"
ajax จะทำให้เราเข้าใจ การทำงานระหว่าง server กับ Client มากขึ้น ajax เป็นตัวเชื่อมเเละนำ resource มาเเสดงผลโดยไม่ต้อง รีเฟตหน้า ในตัวอย่างจะใช้ ajax ใน jQuery
ตัวอย่างการเขียนคำสั่ง ajax
ไฟล์ตัวอย่าง :: code_7.html |
<!DOCTYPE html> <html> <head> <title> CSS </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> body { font-size: 36px; } #mindphp{ font-size: xx-small; background-color: #00FF00; } .classmindphp{ font-size: larger; font-style: italic; } div { background-color: #0000FF; } p.classmindphp { background-color:#999999; } </style> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#mindphp').load('ser1.php'); }) </script> </head> <body> <div>ตัวอย่าง</div> <div id="mindphp">Mindphp.com</div> <div class="classmindphp">ข้อความที่อยู่ใน classmindphp Mindphp.com</div> <p class="classmindphp">ข้อความที่อยู่ใน classmindphp Tag p</p> </body> </html>
|
ไฟล์ตัวอย่าง :: ser_1.php |
<?php echo date('Y-m-d H:i:s'); ?>
|
คำอธิบาย :: เราจะให้ตำแหน่ง #mindphp ให้ดึงค่ามาจาก Server
ผลที่ได้ :: ในตำแหน่งที่ #mindphp ก็จะแสดงผลเป็น 2014-06-20 11:11:47
ตัวอย่างการเขียนคำสั่ง ajax
ไฟล์ตัวอย่าง :: code_8.html |
<!DOCTYPE html> <html> <head> <title> CSS </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> body { font-size: 36px; } #mindphp{ font-size: xx-small; background-color: #00FF00; } .classmindphp{ font-size: larger; font-style: italic; } div { background-color: #0000FF; } p.classmindphp { background-color:#999999; } </style> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $.ajax({ url: 'ser1.php', success: function( data ) { $( "#mindphp2").html(data); }, }) }) </script> </head> <body> <div>ตัวอย่าง</div> <div id="mindphp">Mindphp.com</div> <div class="classmindphp">ข้อความที่อยู่ใน classmindphp Mindphp.com</div> <p class="classmindphp">ข้อความที่อยู่ใน classmindphp Tag p</p> <div id="mindphp2">TODO write content</div> </body> </html>
|
คำอธิบาย :: เราจะให้ตำแหน่ง #mindphp2 ให้ดึงค่ามาจาก Server มาเเสดงผล success โคยส่ง method เป็น data
ผลที่ได้ :: ในตำแหน่งที่ #mindphp2 ก็จะแสดงผลเป็น 2014-06-20 11:11:47
ตัวอย่างการเขียนคำสั่ง ajax
ไฟล์ตัวอย่าง :: code_9.html |
<!DOCTYPE html> <html> <head> <title> CSS </title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> body { font-size: 36px; } #mindphp{ font-size: xx-small; background-color: #00FF00; } .classmindphp{ font-size: larger; font-style: italic; } div { background-color: #0000FF; } p.classmindphp { background-color:#999999; } </style> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#Mybutton').click(function(){ $.ajax({ url: 'ser1.php', success: function( data ) { $( "#mindphp2").html(data); }, }) }) }); </script> </head> <body> <div>ตัวอย่าง</div> <div id="mindphp">Mindphp.com</div> <div class="classmindphp">ข้อความที่อยู่ใน classmindphp Mindphp.com</div> <p class="classmindphp">ข้อความที่อยู่ใน classmindphp Tag p</p> <div id="mindphp2">TODO write content</div> <button id="Mybutton">Mybutton</button> </body> </html>
|
คำอธิบาย :: เราจะให้ตำแหน่ง #mindphp2 ให้ดึงค่ามาจาก Server มาเเสดงผล success โคยส่ง method เป็น data หลังจากทำการคลิกที่ปุ่ม
ผลที่ได้ :: ในตำแหน่งที่ #mindphp2 ก็จะแสดงผลเป็น 2014-06-20 11:11:47 หลังจากทำการคลิกที่ปุ่ม