Ajax อ.วชิระ หล่อประดิษฐ์ ระบบสารสนเทศทางคอมพิวเตอร์

งานนำเสนอเรื่อง: "Ajax อ.วชิระ หล่อประดิษฐ์ ระบบสารสนเทศทางคอมพิวเตอร์"— ใบสำเนางานนำเสนอ:

1 Ajax อ.วชิระ หล่อประดิษฐ์ ระบบสารสนเทศทางคอมพิวเตอร์
อ.วชิระ หล่อประดิษฐ์ ระบบสารสนเทศทางคอมพิวเตอร์ มหาวิทยาลัยเทคโนโลยีราชมงคลล้านนา ลำปาง

2 Ajax คืออะไร? ย่อมาจาก Asynchronous JavaScript and XML
คือ การพัฒนาโปรแกรมโดยใช้ JavaScript, XML และ PHP มา ประยุกต์เข้าด้วยกัน 1 หน้าเว็บที่ใช้ Ajax จะมี HTML, PHP และ JavaScript (ใช้นามสกุล เป็น .html เป็นส่วนใหญ่) ทำให้หน้าเว็บเพ็จสามารถทำงานได้รวดเร็วขึ้น

3 Ajax สามารถทำอะไรได้บ้าง?
เติมข้อความต่อท้ายคำอัตโนมัติ ระบบแชทบนหน้าเว็บไซต์ ตอบรับการกรอกข้อมูลโดยไม่ต้องเปิดหน้าเว็บใหม่ ป็อปอัพขยายรายละเอียดให้เห็นชัดเจนขึ้น แผนที่ออนไลน์ แสดงภาพขณะโหลดข้อมูล

4 Ajax ทำงานร่วมกับ PHP อย่างไร?
และส่งข้อมูล 3. เว็บเซิร์ฟเวอร์ประมวลผล PHP และเรียกใช้ Database Server 1. ผู้ใช้ร้องขอข้อมูล 6. Ajax รับค่าไป แสดงผล 4. Database Server ดึงข้อมูล 5. Web Server ส่งผลลัพธ์

5 การเขียนโปรแกรมเชิงวัตถุ
OOP ย่อจาก Object Oriented Programming เป็นรูปแบบการเขียนโปรแกรมคอมพิวเตอร์ ที่ให้ความสำคัญกับ “วัตถุ” ซึ่งสามารถ นำมาประกอบกันและนำมาทำงานรวมกันได้ Object Object Object Object

6 การเปิดและปิดการใช้ JavaScript
รูปแบบ <script language=“javascript”> คำสั่ง JavaScript ตามต้องการ </script> Example document.write(‘Hello world’);

7 คำสั่งพื้นฐานของ Java
การประกาศตัวแปร รูปแบบ var ชื่อตัวแปร = “ค่าของตัวแปร”; Example var a = “Hello World”; การแสดงข้อความบนจอภาพ document.write(‘ข้อความ’); document.write(‘ทดสอบ’+a);

8 คำสั่งพื้นฐานของ Java
คำสั่งหน้าต่างแจ้งเตือน รุปแบบ alert(“ข้อความแจ้งเตือน”); Example alert(“เกิดข้อผิดพลาด”); การประกาศตัวแปรแบบ Object รูปแบบ var ชื่อตัวแปร = new ชื่อออบเจ็กซ์(“ค่าตัวแปร 1,ค่าตัวแปร 2,…”); var a = new date();

9 คำสั่งพื้นฐานของ 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

10 คำสั่งพื้นฐานของ Java
วนซ้ำ รูปแบบ for(ประกาศตัวแปร; จุดสิ้นสุกการวนซ้ำ; การเปลี่ยนแปลค่าตัวแปร) Example for(y=1; y<=dimention; y++) { for(x=1;x<=dimention; x++) var strRow=document.write(‘(’+x+‘,’+y+‘)’); strOut=strRow; } strOut=document.write(‘<br>’);

11 คำสั่งพื้นฐานของ Java
การสร้างฟังก์ชั่นไว้ใช้งาน รูปแบบ function ชื่อฟังก์ชั่น (พารามิเตอร์1,พารามิเตอร์2,…) { คำสั่ง; การคืนค่าของฟังก์ชั่น (มีหรือไม่ก็ได้); } Example function ShowCode() document.write(user); การเรียกใช้ฟังก์ชั่น ชื่อฟังก์ชั่น (อาร์กิวเมนต์1,อาร์กิวเมนต์2,...); ShowCode();

12 Ajax Framework เนื่องจากคำสั่ง Ajax ยาวเกินไป
โดยมีไฟล์รวบรวมฟังก์ชั่นสำเร็จรูปไว้แล้ว ตัวที่นำมาใช้มากที่สุดคือPrototype โดยรวบรวมคำสั่งเกี่ยวกับฟอร์มและไฟล์เว็บ เซิร์ฟเวอร์ไว้ สามารถ download ได้จาก เมื่อดาวน์โหลดมาแล้ว จะได้ file ชื่อ prototype.js แล้วนำไปไว้ในเว็บของเรา การเรียกใช้งาน <script src=“ชื่อไฟล์ Ajax framework.js” language=“javascript” type=“text/javascript”> </script>

13 ฟังก์ชั่น $() เป็นฟังก์ชั่นย่อของ document.getElementById ให้สั้นลง
รูปแบบ var ตัวแปร = $(“ค่าของ ID”); ตัวอย่าง var a = $(“name”);

14 ฟังก์ชั่น getInputs()
การรับค่าจากฟอร์มต่างๆ โดยสามารถรับแบบ Array ได้ รูปแบบ var ชื่อตัวแปรอาร์เรย์ = Form.getInputs(“ค่า id ฟอร์ม”); var ชื่อตัวแปร = Form.getInputs(“ค่า id ฟอร์ม”,“ค่า id ของฟอร์มรับข้อมูล”); ตัวอย่าง var arrays = Form.getInputs(“form1”); var a = Form.getInputs(“form1”,“name”);

15 ฟังก์ชั่น serialize()
การรับค่าจากฟอร์มต่างๆ โดยสามารถรับแบบตัวแปรเดียว โดย ค่าที่ได้จะเป็น id1=ค่าที่1 & id2=ค่าที่2 & idn=ค่าที่n รูปแบบ var ชื่อตัวแปร = Form.serialize(“ค่า id ฟอร์ม”); ตัวอย่าง var a = Form.serialize(“form1”);

16 การเรียกใช้งาน Ajax.Updater
เป็นการนำไฟล์อื่นมาแสดงในส่วนที่กำหนดให้ต้องการแสดง มีรูปแบบคือ function ชื่อฟังก์ชั่น(ตัวแปรส่งค่าไปไฟล์อื่น, ตัวแปรส่งตำแหน่งที่ต้องการแสดงข้อมูล) { var ตัวแปรที่ส่งไปไฟล์อื่น = “ชื่อตัวแปร=”+ค่าของตัวแปร; var ตัวแปรชื่อไฟล์ = “ชื่อไฟล์”; var ชื่อออบเจ็กต์ = new Ajax.Updater(ตัวแปรส่งตำแหน่งที่ต้องการแสดงข้อมูล, ตัวแปรชื่อไฟล์, {method:“วิธีส่งข้อมูล”,parameters:ตัวแปรที่ส่งไปไฟล์อื่น}); } เช่น function Result(Div) var params = Form.serialize("form1"); var url = "checkuser.php"; var Addnew = new Ajax.Updater(Div, url, {method:"post", parameters:params});

17 ตัวอย่างการใช้ Ajax.Updater
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " </label></td> </tr> <html xmlns=" <head> <td>Password</td> <meta http-equiv="Content-Type" content="text/html; charset=windows-874" /> <td><label> <input type="password" name="pw" id="pw" /> <script src="prototype.js" language="javascript" type="text/javascript"> </script> <script language="javascript"> function Result(Div){ <td colspan="2"><label> var params = Form.serialize("form1"); <label></label> var url = "checkuser.php"; <div align="center"> var Addnew = new Ajax.Updater(Div,url, {method:"post", parameters:params}); <input type="checkbox" name="check" id="check" value="on"/> Login ตลอดไป </div> } <input type="submit" name="login" id="login" value="Login" onClick="Result(msg)"/> <title>Untitled Document</title> </head> </label> <body> </div></td> <form id="form1" name="form1" method="post"> <table width="340" border="0" align="center"> </table> <tr> </form> <td width="147">Username</td> <div align="center" id="msg"></div> <td width="183"><label> </body> <input type="text" name="logname" id="logname" /> </html>

18 ตัวอย่างการใช้ Ajax.Updater (checkuser.php)
<? setcookie("password",$password,time()+3 600*24*365); mysql_connect('localhost','root','1234') or die(" ติดต่อฐานข้อมูลไม่ได้"); print "สวัสดีครับ"; mysql_select_db('register'); } $sql="select * from member where user='$logname' and pass='$pw'"; else echo $sql; $dbquery=mysql_query($sql); $num_rows=mysql_num_rows($dbquery); if($num_rows==1) { if($check=="on") print "ข้อมูลไม่ถูกต้อง กรุณา Login ใหม่"; setcookie("logname",$username,time()+3 600*24*365); ?>

19 ผลการ Run Program

20 List of AJAX Framework ตัวอย่าง JQuery Framework License
YUI Library, a set of utilities and controls, for building richly interactive web applications using techniques such as DOM scripting, DHTML and Ajax BSD Spry framework, an open source Ajax framework developed by Adobe which is used in the construction of Rich Internet applications. Prototype, a JavaScript framework that provides Ajax and other utilities, and Script.aculo.us, a plug-in for animations and interface development MIT Prevel Framework, a lightweight (approximately 4.8 Kb) JavaScript library with strong functionality. All the methods which can be useful in all kinds of development are attending in Prevel (such as interaction with DOM, Ajax, some of common methods). MIT and LGPL MooTools, a compact and modular JavaScript framework best known for its visual effects and transitions. jQuery, a JavaScript framework that provides an Ajax framework and other utilities, and jQuery UI, a plug-in that provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets GPL and MIT Ext JS, a library that extends Prototype, Jquery and YUI until version 1.0. Since version 1.1 a standalone Ajax framework. GPLv3 or proprietary Dojo Toolkit, an Open Source DHTML toolkit written in JavaScript. modified BSD license ASP.NET AJAX, a set of extensions to ASP.NET for implementing Ajax functionality. Microsoft Public License

21 Question & Answer