ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
Chapter 11 Ajax
2
รูปแบบการส่งข้อมูลของเว็บ
แบบ Synchronous คือ การส่งข้อมูลจาก Browser ไปประมวลผลที่เว็บ Server โดยที่ ต้องรอให้ เว็บ Server ทำการประมวลผลจนเสร็จก่อน ค่อยส่งข้อมูลกลับไปให้ Browser แบบ Asynchronous คือ การส่งข้อมูลที่ตรงกันข้ามกับ synchronous กล่าวคือ Browser ส่งข้อมูลไปประมวลผลยัง เว็บ Server แล้วเว็บ Server ทำการประมวลผลแล้วส่งกับมาที่เว็บ Client โดยไม่ต้องรอให้ประมวลผลจนเสร็จ
3
ปัญหาการส่งข้อมูลแบบ Synchronous
เมื่อมีการเปลี่ยนแปลงข้อมูลเพียงบางส่วนบนเว็บเพ็จ จะต้องรีโหลดเว็บเพ็จใหม่ทั้งหน้า การรอหน้าเว็บเพ็จตอบกลับจาก Server ไม่สามารถทำงานอย่างอื่นขนานกันไปได้
4
รูปแบบการส่งข้อมูลของเว็บ
Synchronous Asynchronous User Action User Action Client Server Client Server HTTP Request HTTP Request wait Screen Reload HTTP Respond HTTP Respond Data Update Data Update
5
Ajax คืออะไร Ajax ย่อมาจาก Asynchronous JavaScript and XML
Ajax คือ ชุดคำสั่งเพื่อใช้ในการรับและส่งข้อมูลกับ Server แบบ Asynchronous Ajax ถูกคิดค้นโดย Jesse James Garrett ในปี 2548
6
สถาปัตยกรรมเว็บที่ไม่ใช้ และใช้ Ajax
Client-side Client-side User Interface User Interface JavaScript: send() text, HTML, JSON Ajax Engine HTTP Respond text, HTML, JSON HTTP Respond text, HTML HTTP request HTTP request Server-side Server-side Web Server Web Server Backend Processing: database, business process Backend Processing: database, business process เว็บที่ไม่ใช้ Ajax เว็บที่ใช้ Ajax
7
ขั้นตอนการสร้างเว็บที่มีการใช้ Ajax
สร้างส่วนที่เป็นโค้ด html กำหนด event ให้กับแท็กที่จะกระตุ้นให้เริ่มส่งข้อมูลแบบ asynchronous กำหนดจุดแสดงผลเมื่อได้รับการตอบกลับ สร้างส่วนที่เป็นโค้ด JavaScipt เขียนฟังก์ชั่นสำหรับใช้ในการส่งข้อมูล เขียนฟังก์ชั่นสำหรับใช้ในการรับข้อมูล สร้างส่วนที่เป็นโค้ด PHP ซึ่งทำหน้าที่คอยรับและส่งข้อมูลที่ฝั่ง server
8
Client-side Server-side ผลลัพธ์ คือ 15 Ajax Engine
<html><head><meta charset="utf-8"> <script> function send() { request = new XMLHttpRequest(); request.onreadystatechange = showResult; var a = document.getElementById("a").value; var b = document.getElementById("b").value; var url= "add.php?a=" + a + "&b=" + b; request.open("GET", url, true); request.send(null); } function showResult() { if (request.readyState == 4) { if (request.status == 200) document.getElementById("result").innerHTML = request.responseText; </script></head> <body> a = <input type="text" id="a"><br> b = <input type="text" id="b" onkeyup="send()"><br> <span id="result"></span> </body></html> Client-side 10 5 ผลลัพธ์ คือ 15 add.php?a=10&b=5 Ajax Engine showResult() เมื่อมีการกรอกตัวเลขที่ช่องนี้จะเรียกฟังก์ชัน send() <b>ผลลัพธ์</b> คือ 15 แสดงผลลัพธ์ที่จุดนี้ Server-side add.php <?php $a = $_GET["a"]; $b = $_GET["b"]; echo "<b>ผลลัพธ์</b> คือ "; echo $a + $b; ?> Web Server add.php
9
XMLHttpRequest XMLHttpRequest คือ Ajax Engine บน JavaScript ที่ใช้ในการติดต่อสื่อสารระหว่าง Browser กับ Server สามารถแลกเปลี่ยนข้อมูลได้หลากหลายรูปแบบ ได้แก่ text, html, json, xml ทำงานบนมาตรฐาน HTTP ที่มีอยู่แล้ว
10
Event และ Property ของ XMLHttpRequest
คำอธิบาย onreadystatechange กำหนดเหตุการณ์เมื่อมีการเปลี่ยนสถานะ โดยจะกำหนดเป็นชื่อฟังก์ชันที่จะให้ทำงานเมื่อมีการเปลี่ยนสถานะ readyState property ที่เก็บสถานะของคำร้องที่ส่งไปแล้วว่าตอนนี้ส่งไปแล้ว หรือกำลังส่ง หรือส่งกลับมาแล้ว มีค่าต่างๆ แสดงดังสไลด์หน้า 12 status property ที่เก็บสถานะของการร้องขอ มีค่าต่างๆ แสดงดังสไลด์หน้า 13 responseText property ที่เก็บข้อมูลที่ Server ส่งกลับมายัง Browser
11
ฟังก์ชันของ XMLHttpRequest
ชื่อฟังก์ชัน คำอธิบาย open(method, url, [isAsynchronous]) เปิดการติดต่อกับ Web Server - method คือ การติดต่อแบบ GET หรือ POST - url คือ ไฟล์ PHP ที่ใช้รับและส่งข้อมูล - isAsynchronous มีค่า default เป็น true send(body) ส่งการร้องขอไปยัง Server abort() ยกเลิกการร้องขอ getAllResponseHeader() รับค่าส่วนหัวที่ร้องขอทั้งหมดในรูปแบบ key/value getResponseHeader(header) รับค่าส่วนหัวที่ร้องขอตามที่ระบุ setRequestHeader(header, value) กำหนดประเภทของข้อมูลที่จะมีการส่งหรือรับ สามารถส่งค่าให้ server ผ่าน method send ได้ แต่ต้องระบุ header ด้วย xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); send("fname=Henry&lname=Ford");
12
ค่าของ Property: readyState
0 – การร้องขอยังไม่ถูกกำหนดขึ้น 1 – การร้องขอได้ถูกกำหนดขึ้นแล้ว 2 – การร้องขอได้ถูกส่งไป 3 – การร้องขอกำลังทำงานอยู่ 4 – การร้องขอได้เสร็จสิ้นการทำงานแล้ว
13
ค่าของ Property: status
Code ความหมาย คำอธิบาย 200 OK ไฟล์ที่ต้องการใช้รับและส่งข้อมูล (.php) ถูกพบบน Server 401 Unauthorized ไฟล์ที่ต้องการใช้รับและส่งข้อมูลต้องการสิทธิ์ในการเข้าถึง 403 Forbidden ไฟล์ที่ต้องการใช้รับและส่งข้อมูลไม่อนุญาตให้เข้าถึง 404 Not Found ไฟล์ที่ต้องการใช้รับและส่งข้อมูลไม่มีบน Server 500 Internal Server Error Server มีปัญหา 503 Service Unavailable Server ไม่สามารถจัดการกับคำร้องได้
14
กิจกรรม จงเขียนเว็บในการบันทึกการขายผลไม้ โดยแบ่งการทำงานออกเป็นสองฝั่ง ได้แก่ ฝั่งเซิร์ฟเวอร์ ทำหน้าที่คำนวณค่ายอดรวม ซึ่งเขียนด้วยภาษา PHP ส่วนฝั่งไคลเอนต์เขียนด้วยภาษา HTML และ JavaScript+Ajax ทำหน้าที่รับค่าจำนวนผลไม้แต่ละชนิดขายได้ส่งไปยังเซิร์ฟเวอร์ และนำผลลัพธ์มาแสดงผลโดยไม่มีการรีโหลดหน้าเว็บใหม่
15
การตรวจสอบชื่อผู้ใช้ด้วย Ajax
การลงทะเบียนที่มีการกรอกชื่อผู้ใช้ จะถูกตรวจสอบว่า username ซ้ำกันเมื่อมีการคลิกปุ่มส่งข้อมูลแล้ว แต่การใช้ Ajax จะช่วยตรวจสอบหลังจากที่กรอก username เสร็จได้เลย โดยไม่ต้องรอพิมพ์ให้ครบ
16
ฟอร์ม HTML <form> <h1>Please register:</h1> Username:<input id="username" type="text" onblur="checkUsername()"><br> First Name:<input type="text" name="firstname"><br> LastName:<input type="text" name="lastname"><br> <input type="text" name=" "><br> <input type="submit" value="Register"> </form> เมื่อมีการกรอกชื่อผู้ใช้เสร็จ แล้วไปยังช่องถัดไปจะเรียกฟังก์ชัน checkUsername
17
ฟังก์ชันส่งและรับข้อมูล
<script> function checkUsername() { document.getElementById("username").className = "thinking"; request = new XMLHttpRequest(); request.onreadystatechange = showUsernameStatus; var username = document.getElementById("username").value; var url = "checkName.php?username=" + username; request.open("GET", url, true); request.send(null); } function showUsernameStatus() { if (request.readyState == 4) { if (request.status == 200) { if (request.responseText == "okay") { document.getElementById("username").className = "approved"; } else { document.getElementById("username").className = "denied"; document.getElementById("username").focus(); document.getElementById("username").select(); </script> แสดงภาพตรงช่อง username ว่ากำลังตรวจสอบ กำหนดฟังก์ชั่นที่ต้องการให้ทำงาน เมื่อมีการเปลี่ยนแปลงสถานะ ดึงค่า username ส่งไปยัง Server กำหนดตำแหน่งสคริป php ที่จะให้รับข้อมูล พร้อมกับส่งข้อมูลชื่อผู้ใช้ไปด้วย ถ้าค่าที่ตอบกลับเป็นคำว่า okay จะกำหนดคลาสให้ textfield ชื่อ approved
18
CSS สำหรับแสดงสถานะ #username { padding: 0 20px 0 2px; } .thinking {
background: white url('img/checking.gif') no-repeat; background-position: 150px 1px; .approved { background: white url('img/true.gif') no-repeat; .denied { background: #FF8282 url('img/false.gif') no-repeat;
19
PHP ที่คอยรับและส่งข้อมูล
checkName.php <?php $takenUsernames = array ('bill', 'ted'); sleep(2); if (!in_array( $_GET['username'], $takenUsernames )) { echo 'okay'; } else { echo 'denied'; } ?> username ที่มีอยู่แล้ว ให้หยุดรอ 2 วินาที เพื่อจำลองว่ามีการตรวจสอบอยู่ ถ้ามี username แล้ว ส่งคำว่า okay กลับไป
20
การค้นหาข้อมูลจากฐานข้อมูลด้วย Ajax
<html> <head> <meta charset="utf-8"> <script> function send() { request = new XMLHttpRequest(); request.onreadystatechange = showResult; var keyword = document.getElementById("keyword").value; var url= "productTable.php?keyword=" + keyword; request.open("GET", url, true); request.send(null); } function showResult() { if (request.readyState == 4) { if (request.status == 200) document.getElementById("result").innerHTML = request.responseText; </script> </head> <body> <input type="text" id="keyword" onkeyup="send()"> <div id="result"></div> </body> </html>
21
การค้นหาข้อมูลจากฐานข้อมูลด้วย Ajax
<?php $keyword = $_GET["keyword"]; $conn = mysql_connect("localhost", "root", "1234"); if ($conn) { mysql_select_db("blueshop"); mysql_query("SET NAMES utf8"); } else { echo mysql_errno(); } $sql = "SELECT * FROM product WHERE product_name LIKE '%$keyword%'"; $objQuery = mysql_query($sql); ?> <table border="1"> <?php while($row = mysql_fetch_array($objQuery)): ?> <tr> <td><a href="productDetail.php?pid=<?php echo $row["product_id"]?>"><?php echo $row["product_name"]?></a></td> <td><?php echo $row["product_detail"]?></td> <td><img src="img/<?php echo $row["product_id"] ?>.png" width="100"></td> <td><?php echo $row["product_price"]?> บาท</td> <td><a href="cart.php?productId=<?php echo $row["product_id"]?>&action=add">สั่งซื้อ</a> </tr> <?php endwhile;?> </table>
22
กิจกรรม จงเขียนเว็บสำหรับค้นหาข้อมูลสมาชิกจากตาราง member โดยใช้ Ajax
งานนำเสนอที่คล้ายกัน
