1 / 22

Ajax

Chapter 11. Ajax. รูปแบบการส่งข้อมูลของเว็บ. แบบ Synchronous คือ การ ส่งข้อมูล จาก Browser ไป ประมวลผลที่เว็บ Server โดยที่ ต้องรอให้ เว็บ Server ทำการประมวลผลจน เสร็จก่อน ค่อยส่ง ข้อมูล กลับไปให้ Browser

jonny
Download Presentation

Ajax

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 11 Ajax

  2. รูปแบบการส่งข้อมูลของเว็บรูปแบบการส่งข้อมูลของเว็บ • แบบ Synchronousคือ การส่งข้อมูลจาก Browser ไปประมวลผลที่เว็บ Server โดยที่ ต้องรอให้ เว็บ Server ทำการประมวลผลจนเสร็จก่อน ค่อยส่งข้อมูลกลับไปให้ Browser • แบบ Asynchronousคือ การส่งข้อมูลที่ตรงกันข้ามกับ synchronous กล่าวคือ Browser ส่งข้อมูลไปประมวลผลยัง เว็บ Server แล้วเว็บ Server ทำการประมวลผลแล้วส่งกับมาที่เว็บ Client โดยไม่ต้องรอให้ประมวลผลจนเสร็จ

  3. ปัญหาการส่งข้อมูลแบบ Synchronous • เมื่อมีการเปลี่ยนแปลงข้อมูลเพียงบางส่วนบนเว็บเพ็จ จะต้องรีโหลดเว็บเพ็จใหม่ทั้งหน้า • การรอหน้าเว็บเพ็จตอบกลับจาก Server ไม่สามารถทำงานอย่างอื่นขนานกันไปได้

  4. รูปแบบการส่งข้อมูลของเว็บรูปแบบการส่งข้อมูลของเว็บ Asynchronous Synchronous Client Server Client Server User Action User Action 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. <html><head><meta charset="utf-8"> <script> functionsend() { request = newXMLHttpRequest(); request.onreadystatechange = showResult; vara = document.getElementById("a").value; varb = document.getElementById("b").value; varurl= "add.php?a=" + a + "&b=" + b; request.open("GET", url, true); request.send(null); } functionshowResult() { 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

  11. ฟังก์ชันของ XMLHttpRequest

  12. ค่าของ Property: readyState 0 – การร้องขอยังไม่ถูกกำหนดขึ้น 1 – การร้องขอได้ถูกกำหนดขึ้นแล้ว 2 – การร้องขอได้ถูกส่งไป 3 – การร้องขอกำลังทำงานอยู่ 4 – การร้องขอได้เสร็จสิ้นการทำงานแล้ว

  13. ค่าของ Property: status

  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> • Email:<input type="text" name="email"><br> • <input type="submit" value="Register"> • </form> เมื่อมีการกรอกชื่อผู้ใช้เสร็จแล้วไปยังช่องถัดไปจะเรียกฟังก์ชัน checkUsername

  17. ฟังก์ชันส่งและรับข้อมูลฟังก์ชันส่งและรับข้อมูล <script> functioncheckUsername() { document.getElementById("username").className = "thinking"; request = newXMLHttpRequest(); request.onreadystatechange= showUsernameStatus; varusername = document.getElementById("username").value; varurl = "checkName.php?username=" + username; request.open("GET", url, true); request.send(null); } functionshowUsernameStatus() { 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; background-position: 150px 1px; } .denied { background: #FF8282 url('img/false.gif') no-repeat; background-position: 150px 1px; }

  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 = newXMLHttpRequest(); request.onreadystatechange = showResult; var keyword = document.getElementById("keyword").value; varurl= "productTable.php?keyword=" + keyword; request.open("GET", url, true); request.send(null); } functionshowResult() { 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"> • <?phpwhile($row = mysql_fetch_array($objQuery)): ?> • <tr> • <td><a href="productDetail.php?pid=<?phpecho $row["product_id"]?>"><?phpecho $row["product_name"]?></a></td> • <td><?phpecho $row["product_detail"]?></td> • <td><imgsrc="img/<?phpecho $row["product_id"] ?>.png" width="100"></td> • <td><?phpecho $row["product_price"]?>บาท</td> • <td><a href="cart.php?productId=<?phpecho $row["product_id"]?>&action=add">สั่งซื้อ</a> • </tr> • <?phpendwhile;?> • </table>

  22. กิจกรรม • จงเขียนเว็บสำหรับค้นหาข้อมูลสมาชิกจากตาราง member โดยใช้ Ajax

More Related