517322-Lab: 5. Ajax

22/02/2013 2:54 PM Study 987 views

Ajax

หลังจากที่ได้เรียนการสร้างฐานข้อมูล การ insert, update, delete แล้ว คราวนี้อาจารย์ก็สอนเรื่อง Ajax และให้ใช้ Ajax มาช่วยในการทำงาน โดยให้ดึงข้อมูลจาก Database มาแสดง

ajaxconndb.html

$ cd /var/www
$ sudo mkdir Ajax
$ cd Ajax
$ sudo nano ajaxconndb.html
# สร้างไฟล์เหน้าเว็บเพจเพื่อเรียกข้อมูล ตั้งชื่อว่าอะไรก็ได้ครับ 

1: <script>
2: function showUser(str)
3: {
4: if (str==””)
5:   {
6:     document.getElementById(“txtHint”).innerHTML=””;
7:     return;
8 :   }
9: if (window.XMLHttpRequest)
10:  { // code for IE7+, Firefox, Chrome, Opera, Safari
11:    xmlhttp=new XMLHttpRequest();
12:  }
13: else
14:   {// code for IE6, IE5
15:     xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
16:   }
17: xmlhttp.onreadystatechange=function()
18: {
19: if (xmlhttp.readyState==4 && xmlhttp.status==200)
20:   {
21:     document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
22:   }
23: }
24: xmlhttp.open(“GET”,”getuser.php?q=”+str,true);
25: xmlhttp.send();
26: }
27: </script>

# บรรทัด 1 : สร้าง <Script> อย่าลืม ปิดท้ายด้วย </Script>
# บรรทัด 2 : สร้าง function ชื่อว่า showUser(str)

# บรรทัด 9-16 : เป็นการสร้าง XMLHttpRequest Object โดยตรวจสอบเวอร์ชั่น browser ของเรา
# บรรทัด 9-12 : เป็นการสร้าง XMLHttpRequest Object สำหรับ browser รุ่นใหม่จะรองรับการทำงานนี้
# บรรทัด 13-16 : browser รุ่นเก่าจะไม่รองรับการทำงาน XMLHttpRequest Object เลยสร้าง ActiveXObject แทน

# บรรทัด 17-23 : เป็นการตรวจสอบการทำงานของฟังก์ชั่น onreadystatechange
# บรรทัด 19 : readyState==4 คือตรวจสอบว่า XMLHttpRequest มีการทำงานครบ 4 สถานะได้แก่
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
status==200 คือ สถานะของฟังก์ OK
# บรรทัด 21 : หากคำสั่งบรรทัดที่ 19 ตรงเงื่อนไขก็จะสั่งให้ Id ชื่อ txtHint ตอบกลับเป็นข้อความจากคำสั่ง
responseText

# บรรทัด 24-25 : เป็นการร้องขอไปยัง server ซึ่งประกอบด้วย Method 2 ตัวคือ open(); และ send();
# บรรทัด 24: เป็น Method open(method,url,async) โดย method คือการส่งแบบ GET หรือ POST,
url คือ หน้าประมวลผลและค่าที่จะส่งไป, true คือการ asynchronous สำเร็จ
# บรรทัด 25: เป็น Method send()

1: <html>
2: <head>// เอาคำสั่ง script ข้างบนมาแทรกตรงนี้
3: </head>
4: <body>
5: <form>
6: <select name=”users” onChange=”showUser(this.value)“>
7: <option value=””>Select a person:</option>
8: <option value=”07990531″>07990531</option>
9: <option value=”07991234″>07991234</option>
10: <option value=”07991450″>07991450</option>
11: </select>
12: </form>
13: <div id=”txtHint”><b>Person info will be listed here.</b></div>
14: </body>
15: </html>

# บรรทัด 1-15 : คำสั่ง html สำหรับแสดงข้อมูล
# บรรทัด 2-3 : เอา script ข้างบนทั้งหมดมาแทรกตรงนี้
# บรรทัด 5-12 : สร้างฟอร์มสำหรับส่งค่าโดยค่า value ของแต่ละ list นั้นให้ตรงกับ id ใน table ในฐานข้อมูลที่ต้องการ (ดูข้อมูลและ id จากเรื่องก่อนหน้า)
# บรรทัด 13: หน้าเว็บจะแสดงข้อความ Person info will be listed here. หากยังไม่ได้ทำอะไร
แต่หลังจากที่เราเลือกรายการใดรายการหนึ่ง ข้อความตรงนึ่จะแสดงข้อมูลของ นศ.รหัสนั้นๆ
สังเกตว่า <div id=”txtHint”> จะตรงกับ getElementById(“txtHint”) ของ Script ด้านบน

 

getuser.php

หลังจากสร้างไฟล์ HTML แล้วจะสร้าาง ไฟล์ PHP ในการประมวลผลคำสั่งที่ได้ขอมาจากไฟล์ HTML ครับ
$ sudo nano getuser.php
# แล้วพิมคำสั่งด้านล่างได้เลย

1: <?php
2: $q=$_GET[“q”];
3: $con = mysql_connect(‘localhost’, ‘root’, ‘password’);
4: if (!$con)
5: {
6:    die(‘Could not connect: ‘ . mysql_error());
7: }
8: mysql_select_db(“temp”, $con);
9: $sql=”SELECT * FROM student WHERE id = ‘”.$q.”‘”;
10: $result = mysql_query($sql);
11: echo “<table border=’1’>”;
12: while($row = mysql_fetch_array($result))
13: {
14:    echo “<tr><th>ID</th><td>” . $row[‘id’] . “</td></tr>”;
15:    echo “<tr><th>Name</th><td>” . $row[‘name’] . “</td></tr>”;
16:    echo “<tr><th>Major</th><td>” . $row[‘major’] . “</td></tr>”;
17:    echo “<tr><th>Score</th><td>” . $row[‘mid_score’] . “</td></tr>”;
18: }
19:    echo “</table>”;
20: mysql_close($con);
21: ?>

# บรรทัด 2 : สร้างตัวแปรมารับค่าที่ส่งมาจากไฟล์ HTML โดยมีการส่งมาแบบ GET
# บรรทัด 3 : คำสั่ง SQL เชื่อมต่อ ฐานข้อมูล ประกิอบด้วย (‘localhost’, ‘ชื่อ user’, ‘รหัสผ่าน’);
# บรรทัด 4-7 : จะตรวจสอบว่าสำงานสำเร็จหรือไม่ ถ้าไม่ให้พิมพ์ข้อความผิดพลาด
# บรรทัด 8 : เลือก database ที่ต้องการ  (“ชื่อ database”, $con);
# บรรทัด 9 : ให้เลือกข้อมูลจากตาราง student ที่มีค่า id ตรงกับค่าที่รับมา (ค่า q)

ผลลัพธ์ของโปรแกรม

ajaxconndb
getuser

 

, , , , ,