Download
1 / 23
230 likes | 358 Views
Ajax. อ.วชิระ หล่อประดิษฐ์ ระบบสารสนเทศทางคอมพิวเตอร์ มหาวิทยาลัยเทคโนโลยีราชมงคลล้านนา ลำปาง. Ajax คืออะไร ?. ย่อมาจาก Asynchronous JavaScript and XML คือ การพัฒนาโปรแกรมโดยใช้ JavaScript, XML และ PHP มาประยุกต์เข้าด้วยกัน
E N D
Ajax อ.วชิระ หล่อประดิษฐ์ ระบบสารสนเทศทางคอมพิวเตอร์ มหาวิทยาลัยเทคโนโลยีราชมงคลล้านนา ลำปาง
Ajax คืออะไร? • ย่อมาจาก Asynchronous JavaScript and XML • คือ การพัฒนาโปรแกรมโดยใช้ JavaScript, XML และ PHP มาประยุกต์เข้าด้วยกัน • 1 หน้าเว็บที่ใช้ Ajax จะมี HTML, PHP และ JavaScript (ใช้นามสกุลเป็น .html เป็นส่วนใหญ่) • ทำให้หน้าเว็บเพ็จสามารถทำงานได้รวดเร็วขึ้น
Ajax สามารถทำอะไรได้บ้าง? • เติมข้อความต่อท้ายคำอัตโนมัติ • ระบบแชทบนหน้าเว็บไซต์ • ตอบรับการกรอกข้อมูลโดยไม่ต้องเปิดหน้าเว็บใหม่ • ป็อปอัพขยายรายละเอียดให้เห็นชัดเจนขึ้น • แผนที่ออนไลน์ • แสดงภาพขณะโหลดข้อมูล
Ajax ทำงานร่วมกับ PHP อย่างไร? 2. Ajax ประมวลผล และส่งข้อมูล 3. เว็บเซิร์ฟเวอร์ประมวลผล PHP และเรียกใช้ Database Server 1. ผู้ใช้ร้องขอข้อมูล 6. Ajax รับค่าไป แสดงผล 4. Database Server ดึงข้อมูล 5. Web Server ส่งผลลัพธ์
การเขียนโปรแกรมเชิงวัตถุการเขียนโปรแกรมเชิงวัตถุ • OOP ย่อจาก Object Oriented Programming • เป็นรูปแบบการเขียนโปรแกรมคอมพิวเตอร์ ที่ให้ความสำคัญกับ “วัตถุ” ซึ่งสามารถนำมาประกอบกันและนำมาทำงานรวมกันได้ Object Object Object Object
การเปิดและปิดการใช้ JavaScript • รูปแบบ <script language=“javascript”> คำสั่ง JavaScript ตามต้องการ </script> • Example <script language=“javascript”> document.write(‘Hello world’); </script>
คำสั่งพื้นฐานของ Java • การประกาศตัวแปร • รูปแบบ varชื่อตัวแปร = “ค่าของตัวแปร”; • Example var a = “Hello World”; • การแสดงข้อความบนจอภาพ • รูปแบบ document.write(‘ข้อความ’); • Example document.write(‘ทดสอบ’+a);
คำสั่งพื้นฐานของ Java • คำสั่งหน้าต่างแจ้งเตือน • รุปแบบ alert(“ข้อความแจ้งเตือน”); • Example alert(“เกิดข้อผิดพลาด”); • การประกาศตัวแปรแบบ Object • รูปแบบ var ชื่อตัวแปร = new ชื่อออบเจ็กซ์(“ค่าตัวแปร 1,ค่าตัวแปร 2,…”); • Example vara = new date();
คำสั่งพื้นฐานของ Java • ประโยคเงื่อนไข • ตัวอย่าง if(document.getElementById(‘user’).value.length==0) { alert(“กรุณากรอก Username”); } • else if(document.getElementById(‘pass’).value.length==0) { • alert(“กรุณากรอก Password”); } else { • alert(“ระบบจะนำข้อมูลที่กรอกไปตรวจสอบ”); } • ประโยคเงื่อนไข • รูปแบบ if(เงื่อนไข) { ชุดคำสั่ง } else if(เงื่อนไข) { ชุดคำสั่ง } else { ชุดคำสั่ง }
คำสั่งพื้นฐานของ Java • วนซ้ำ • รูปแบบ for(ประกาศตัวแปร; จุดสิ้นสุกการวนซ้ำ; การเปลี่ยนแปลค่าตัวแปร) • Example for(y=1; y<=dimention; y++) { for(x=1;x<=dimention; x++) { varstrRow=document.write(‘(’+x+‘,’+y+‘)’); strOut=strRow; } strOut=document.write(‘<br>’); }
คำสั่งพื้นฐานของ Java • การสร้างฟังก์ชั่นไว้ใช้งาน • รูปแบบ function ชื่อฟังก์ชั่น (พารามิเตอร์1,พารามิเตอร์2,…) { คำสั่ง; การคืนค่าของฟังก์ชั่น (มีหรือไม่ก็ได้); } • Example function ShowCode() { document.write(user); } • การเรียกใช้ฟังก์ชั่น ชื่อฟังก์ชั่น (อาร์กิวเมนต์1,อาร์กิวเมนต์2,...); ShowCode();
ตัวอย่างการใช้ Javascriptซ่อนตาราง <form name="form1" method="post" action=""><table width="100%" border="1" cellpadding="1" cellspacing="1"><tr> <td width="20%" valign="top">ตัวอย่างโดยใช้ Radio<br><input name="cb" type="radio" id="cb" onClick="document.all.tb1.style.display='none';" checked>ซ่อน <input name="cb" type="radio" id="cb1" onClick="document.all.tb1.style.display='';">แสดง</td><td width="86%"><table width="100%" border="1" cellpadding="1" cellspacing="1" id="tb1" style="display='none';"><tr> <td width="19%">XXXX</td><td width="81%"><input type="text" name="textfield"></td></tr><tr><td>XXXX</td><td><input type="text" name="textfield2"></td></tr><tr><td>XXXX</td><td><input type="text" name="textfield3"></td></tr></table>
Ajax Framework • เนื่องจากคำสั่ง Ajax ยาวเกินไป • Ajax Framework ช่วยให้คำสั่งง่ายขึ้น • โดยมีไฟล์รวบรวมฟังก์ชั่นสำเร็จรูปไว้แล้ว • ตัวที่นำมาใช้มากที่สุดคือPrototype โดยรวบรวมคำสั่งเกี่ยวกับฟอร์มและไฟล์เว็บเซิร์ฟเวอร์ไว้ • สามารถdownload ได้จาก http://www.prototypejs.org/download • เมื่อดาวน์โหลดมาแล้ว จะได้ file ชื่อ prototype.js แล้วนำไปไว้ในเว็บของเรา • การเรียกใช้งาน <script src=“ชื่อไฟล์ Ajax framework.js” language=“javascript” type=“text/javascript”> </script>
ฟังก์ชั่น $() • เป็นฟังก์ชั่นย่อของ document.getElementByIdให้สั้นลง • รูปแบบ varตัวแปร = $(“ค่าของ ID”); • ตัวอย่าง var a = $(“name”);
ฟังก์ชั่น getInputs() • การรับค่าจากฟอร์มต่างๆ โดยสามารถรับแบบ Array ได้ • รูปแบบ varชื่อตัวแปรอาร์เรย์ = Form.getInputs(“ค่า id ฟอร์ม”); varชื่อตัวแปร = Form.getInputs(“ค่า id ฟอร์ม”,“ค่า id ของฟอร์มรับข้อมูล”); • ตัวอย่าง var arrays = Form.getInputs(“form1”); var a = Form.getInputs(“form1”,“name”);
ฟังก์ชั่น serialize() • การรับค่าจากฟอร์มต่างๆ โดยสามารถรับแบบตัวแปรเดียว โดยค่าที่ได้จะเป็น id1=ค่าที่1 & id2=ค่าที่2 & idn=ค่าที่n • รูปแบบ varชื่อตัวแปร = Form.serialize(“ค่า id ฟอร์ม”); • ตัวอย่าง var a = Form.serialize(“form1”);
การเรียกใช้งาน Ajax.Updater • เป็นการนำไฟล์อื่นมาแสดงในส่วนที่กำหนดให้ต้องการแสดง • มีรูปแบบคือ function ชื่อฟังก์ชั่น(ตัวแปรส่งค่าไปไฟล์อื่น, ตัวแปรส่งตำแหน่งที่ต้องการแสดงข้อมูล) { varตัวแปรที่ส่งไปไฟล์อื่น = “ชื่อตัวแปร=”+ค่าของตัวแปร; varตัวแปรชื่อไฟล์ = “ชื่อไฟล์”; varชื่อออบเจ็กต์ = new Ajax.Updater(ตัวแปรส่งตำแหน่งที่ต้องการแสดงข้อมูล,ตัวแปรชื่อไฟล์, {method:“วิธีส่งข้อมูล”,parameters:ตัวแปรที่ส่งไปไฟล์อื่น}); } • เช่น function Result(Div) { varparams = Form.serialize("form1"); varurl = "checkuser.php"; varAddnew = new Ajax.Updater(Div, url, {method:"post", parameters:params}); }
ตัวอย่างการใช้ Ajax.Updater • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • <html xmlns="http://www.w3.org/1999/xhtml"> • <head> • <meta http-equiv="Content-Type" content="text/html; charset=windows-874" /> • <script src="prototype.js" language="javascript" type="text/javascript"> • </script> • <script language="javascript"> • function Result(Div){ • varparams = Form.serialize("form1"); • varurl = "checkuser.php"; • varAddnew = new Ajax.Updater(Div,url, {method:"post", parameters:params}); • } • </script> • <title>Untitled Document</title> • </head> • <body> • <form id="form1" name="form1" method="post"> • <table width="340" border="0" align="center"> • <tr> • <td width="147">Username</td> • <td width="183"><label> • <input type="text" name="logname" id="logname" /> • </label></td> • </tr> • <tr> • <td>Password</td> • <td><label> • <input type="password" name="pw" id="pw" /> • </label></td> • </tr> • <tr> • <td colspan="2"><label> • <label></label> • <div align="center"> • <input type="checkbox" name="check" id="check" value="on"/> • Login ตลอดไป </div> • <div align="center"> • <input type="submit" name="login" id="login" value="Login" onClick="Result(msg)"/> • </label> • </div></td> • </tr> • </table> • </form> • <div align="center" id="msg"></div> • </body> • </html>
ตัวอย่างการใช้ Ajax.Updater (checkuser.php) • <? • mysql_connect('localhost','root','1234') or die("ติดต่อฐานข้อมูลไม่ได้"); • mysql_select_db('register'); • $sql="select * from member where user='$logname' and pass='$pw'"; • echo $sql; • $dbquery=mysql_query($sql); • $num_rows=mysql_num_rows($dbquery); • if($num_rows==1) • { • if($check=="on") • { • setcookie("logname",$username,time()+3600*24*365); • setcookie("password",$password,time()+3600*24*365); • print "สวัสดีครับ"; • } • else • { • print "สวัสดีครับ"; • } • } • else • { • print "ข้อมูลไม่ถูกต้อง กรุณา Login ใหม่"; • } • ?>
ตัวอย่าง JQuery List of AJAX Framework
ตัวอย่างการใช้ Jquery (ปฏิทิน) <link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css"> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script> <script type="text/javascript"> $(function(){ // แทรกโค้ต jquery $("#dateInput").datepicker(); }); <style type="text/css"> .ui-datepicker{ width:150px; font-family:tahoma; font-size:11px; text-align:center; } </style> </script> <body> <input type="text" name="dateInput" id="dateInput" /> </body> เรียกใช้งาน Datepicker เรียกใช้ JQuery เรียกใช้ CSS ของปฏิทิน ฟังก็ชั่นเรียกใช้ Datepicker กำหนดขนาดของปฏิทิน ไฟล์ตัวอย่าง : http://www.ninenik.com/download/jquery-ui-1.7.2.custom.zip
