Chapter 11 Ajax.

Slides:



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

ประเภท โครงการต่อยอด/ขยายผลโครงการเดิม(A)
The Management of Distributed Transaction
Accessing Web Application Data at Any Time 1. 2 อาจารย์ที่ปรึกษาโครงการ ผศ. กานดา สายแก้ว อาจารย์ผู้ร่วมประเมินโครงการ ผศ. อนัตต์ เจ่าสกุล รศ. วนิดา แก่นอากาศ.
TOP TWEET NEWS ข่าวเด่นจากการทวีต COE นายประโยชน์ บุญชัยสุข นายกฤษกร ขำคมเขตร์ อาจารย์ที่ปรึกษาโครงการ ผศ. ดร. กานดา สายแก้ว.
Chapter IV : สร้างการติดต่อ
Chapter VII : การแก้ไขข้อมูล
Functional programming part II
Accessing Web Application Data at Any Time 1. 2 อาจารย์ที่ปรึกษาโครงการ ผศ. กานดา สายแก้ว อาจารย์ผู้ร่วมประเมินโครงการ ผศ. อนัตต์ เจ่าสกุล รศ. วนิดา แก่นอากาศ.
FORM อ.กันทิมา อ่อนละออ
Java Script 2 Structure Flow Control Function and Method Event Handler
Location object Form object
JavaScript.
การพัฒนาการใช้งานในระบบเว็บ
วิชา การเขียนโปรแกรมบนเว็บ (Web-based Programming)
วิชา การเขียนโปรแกรมบนเว็บ (Web-based Programming)
HTTP Client-Server.
เอกสารประกอบการบรรยาย เรื่อง ASP and Database
Request Object.
Seree Chinodom Recordset Object Seree Chinodom Computer Science, BUU.
– Web Programming and Web Database
Network programming Asst. Prof. Dr. Choopan Rattanapoka
Php with Database Professional Home Page :PHP
บทที่ 9 การใส่รูปภาพ (Image).
โปรแกรม Microsoft Access
PHP with Form ฟอร์ม คือหน้าจอที่ใช้เป็นสื่อกลางในการติดต่อระหว่างผู้ใช้เว็บไซต์ กับ เจ้าของเว็บไซต์ โดยผู้ใช้สามารถกรอกข้อมูลผ่านฟอร์มส่งไปยังเซอร์เวอร์
Electronic Commerce เว็บฟอร์ม (Web Form).
Javascripts.
PHP.
คู่มือการใช้งานระบบ DOC รายงานผลการปฏิบัติราชการ
Introduction to ASP.NET
การใช้งาน Ajax.
การเข้าถึงฐานข้อมูล ด้วยกลุ่ม object ADO.NET
การออกแบบและ พัฒนาเว็บไซต์ WEBPAGE DESIGN AND DEVELOPMENT FOR INFORMATION SERVICES สำหรับการบริการสารสนเทศ.
การสร้างช่องรับข้อมูล
1. 2 บรรยายโดยผู้สอนและใช้เอกสาร ประกอบการสอนของผู้สอน สอนโดยใช้สื่อคอมพิวเตอร์ผ่านเครื่อง ฉาย อภิปรายในชั้นเรียนร่วมกัน ให้นิสิตค้นคว้าเพิ่มเติมจากตำราและ.
การจัดการกับเหตุการณ์ Event Handling
ภาษาจาวาสคริปต์ ง การเขียนไดนามิกเว็บเพจ ศูนย์คอมพิวเตอร์โรงเรียนปลวกแดงพิทยาคม.
การรับข้อมูลในภาษา php
1. 2  ในการใช้งานเว็บไซต์ โดยปกติเราจะไม่สามารถ ใช้งานตัวแปรที่มีลักษณะ Global ที่สามารถ นำไปใช้ได้กับเว็บเพจหน้าอื่นๆ ปกติในการใช้ งานค่าต่างๆ ของเว็บเพจ.
HTML, PHP.
คำสั่งควบคุมการทำงานของ ActionScripts
การสร้างและใช้งานฟังก์ชั่น
เสรี ชิโนดม ฟังก์ชัน เสรี ชิโนดม
การเขียนโปรแกรม PHP เชื่อมต่อกับ MySQL
วิทยา กรระสี (วท.บ. วิทยาการคอมพิวเตอร์)
PHP for Web Programming
ฟังก์ชัน.
การใช้ PHP ติดต่อฐานข้อมูลMySQL
CHAPTER 12 FORM.
เกียรติพงษ์ ยอดเยี่ยมแกร
Chapter 10 Session & Cookie.
ระบบรายงานสภาพจราจรโดย เครือข่ายผู้ใช้งาน. สร้างเครือข่ายสำหรับการรายงานสภาพจราจร โดยมุ่งเน้นที่ กลุ่มผู้ใช้โทรศัพท์เคลื่อนที่ประเภท PDA และมีอายุประมาณ.
PHP: [8] การสร้างฟังก์ชั่นขึ้นใช้เอง (User-defined functions)
CHAPTER 12 SQL.
ระบบสำนักงานไร้กระดาษ (e-Office)
การเขียนโปรแกรมคอมพิวเตอร์ 1
การออกแบบส่วนติดต่อกับผู้ใช้ User Interface Design
PHP with MySQL.
การสร้างฟอร์ม(Form) ด้วยภาษา HTML
เอกสารประกอบการบรรยาย เรื่อง การเขียน Home page ด้วย HTML (2) ตอน... การใช้ FORM โดย ผู้ช่วยศาสตราจารย์วิชัย บุญเจือ
PHP : [1] PHP เบื้องต้น. PHP คืออะไร ? PHP ได้รับการเผยแพร่เป็นครั้ง แรกในปี ค. ศ โดย Rasmus Lerdorf ต่อมาได้มีนัก โปรแกรมเมอร์เข้ามาช่วยในการ พัฒนาต่อมาตามลำดับ.
การรับข้อมูลใน ภาษา php ศูนย์คอมพิวเตอร์โรงเรียนปลวกแดงพิทยาคม.
คำศัพท์ระบบอินเตอร์เน็ต
PHP. P ersonal H ome P age P rofessional H ome P age PHP : H ypertext P reprocessor.
1 Functions กนกวรรธน์ เซี่ยงเจ็น สำนักวิชาเทคโนโลยีสารสนเทศ และการสื่อสาร มหาวิทยาลัยนเรศวร พะเยา.
Application Layer.
สำนักวิชาเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยนเรศวร พะเยา
รายการ (Lis t) [3] ผู้สอน อาจารย์ ยืนยง กันทะเนตร สาขาวิชาเทคโนโลยีคอมพิวเตอร์เคลื่อนที่ คณะเทคโนโลยีสารสนเทศและการสื่อสาร Website : ict.up.ac.th/yeunyong.
Ajax Asynchronous JavaScript and XML
ใบสำเนางานนำเสนอ:

Chapter 11 Ajax

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

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

รูปแบบการส่งข้อมูลของเว็บ 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

Ajax คืออะไร Ajax ย่อมาจาก Asynchronous JavaScript and XML Ajax คือ ชุดคำสั่งเพื่อใช้ในการรับและส่งข้อมูลกับ Server แบบ Asynchronous Ajax ถูกคิดค้นโดย Jesse James Garrett ในปี 2548

สถาปัตยกรรมเว็บที่ไม่ใช้ และใช้ 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

ขั้นตอนการสร้างเว็บที่มีการใช้ Ajax สร้างส่วนที่เป็นโค้ด html กำหนด event ให้กับแท็กที่จะกระตุ้นให้เริ่มส่งข้อมูลแบบ asynchronous กำหนดจุดแสดงผลเมื่อได้รับการตอบกลับ สร้างส่วนที่เป็นโค้ด JavaScipt เขียนฟังก์ชั่นสำหรับใช้ในการส่งข้อมูล เขียนฟังก์ชั่นสำหรับใช้ในการรับข้อมูล สร้างส่วนที่เป็นโค้ด PHP ซึ่งทำหน้าที่คอยรับและส่งข้อมูลที่ฝั่ง server

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

XMLHttpRequest XMLHttpRequest คือ Ajax Engine บน JavaScript ที่ใช้ในการติดต่อสื่อสารระหว่าง Browser กับ Server สามารถแลกเปลี่ยนข้อมูลได้หลากหลายรูปแบบ ได้แก่ text, html, json, xml ทำงานบนมาตรฐาน HTTP ที่มีอยู่แล้ว

Event และ Property ของ XMLHttpRequest คำอธิบาย onreadystatechange กำหนดเหตุการณ์เมื่อมีการเปลี่ยนสถานะ โดยจะกำหนดเป็นชื่อฟังก์ชันที่จะให้ทำงานเมื่อมีการเปลี่ยนสถานะ readyState property ที่เก็บสถานะของคำร้องที่ส่งไปแล้วว่าตอนนี้ส่งไปแล้ว หรือกำลังส่ง หรือส่งกลับมาแล้ว มีค่าต่างๆ แสดงดังสไลด์หน้า 12 status property ที่เก็บสถานะของการร้องขอ มีค่าต่างๆ แสดงดังสไลด์หน้า 13 responseText property ที่เก็บข้อมูลที่ Server ส่งกลับมายัง Browser

ฟังก์ชันของ 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");

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

ค่าของ Property: status Code ความหมาย คำอธิบาย 200 OK ไฟล์ที่ต้องการใช้รับและส่งข้อมูล (.php) ถูกพบบน Server 401 Unauthorized ไฟล์ที่ต้องการใช้รับและส่งข้อมูลต้องการสิทธิ์ในการเข้าถึง 403 Forbidden ไฟล์ที่ต้องการใช้รับและส่งข้อมูลไม่อนุญาตให้เข้าถึง 404 Not Found ไฟล์ที่ต้องการใช้รับและส่งข้อมูลไม่มีบน Server 500 Internal Server Error Server มีปัญหา 503 Service Unavailable Server ไม่สามารถจัดการกับคำร้องได้

กิจกรรม จงเขียนเว็บในการบันทึกการขายผลไม้ โดยแบ่งการทำงานออกเป็นสองฝั่ง ได้แก่ ฝั่งเซิร์ฟเวอร์ ทำหน้าที่คำนวณค่ายอดรวม ซึ่งเขียนด้วยภาษา PHP ส่วนฝั่งไคลเอนต์เขียนด้วยภาษา HTML และ JavaScript+Ajax ทำหน้าที่รับค่าจำนวนผลไม้แต่ละชนิดขายได้ส่งไปยังเซิร์ฟเวอร์ และนำผลลัพธ์มาแสดงผลโดยไม่มีการรีโหลดหน้าเว็บใหม่

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

ฟอร์ม 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

ฟังก์ชันส่งและรับข้อมูล <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

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;

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 กลับไป

การค้นหาข้อมูลจากฐานข้อมูลด้วย 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>

การค้นหาข้อมูลจากฐานข้อมูลด้วย 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>

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