งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

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

งานนำเสนอที่คล้ายกัน


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

1 Dr. Theerayut Thongkrau Ajax Chapter 11

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

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

4 รูปแบบการส่งข้อมูลของ เว็บ 4 Synchronous ClientServer HTTP Request HTTP Respond wait Asynchronous ClientServer HTTP Request HTTP Respond User Action Screen Reload Data Update User Action Data Update

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

6 สถาปัตยกรรมเว็บที่ไม่ใช้ และใช้ Ajax 6 Server-side Client-side User Interface Ajax Engine Web Server Backend Processing: database, business process JavaScript: send() HTTP Respond text, HTML, JSON HTTP request text, HTML, JSON Server-side Client-side User Interface Web Server Backend Processing: database, business process HTTP Respond text, HTML HTTP request เว็บที่ไม่ใช้ Ajax เว็บที่ใช้ Ajax

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

8 Server-side Client-side 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; } a = b = add.php Ajax Engine Web Server showResult() add.php ผลลัพธ์ คือ 15 add.php?a=10&b= เมื่อมีการกรอก ตัวเลขที่ช่องนี้จะ เรียกฟังก์ชัน send() แสดงผลลัพธ์ ที่จุดนี้

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

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

11 ฟังก์ชันของ XMLHttpRequest 11 ชื่อฟังก์ชันคำอธิบาย open(method, url, [isAsynchronous]) เปิดการติดต่อกับ Web Server - method คือ การติดต่อแบบ GET หรือ POST - url คือ ไฟล์ PHP ที่ใช้รับและส่ง ข้อมูล - isAsynchronous มีค่า default เป็น true send(body) ส่งการร้องขอไปยัง Server abort() ยกเลิกการร้องขอ getAllResponseHeader( ) รับค่าส่วนหัวที่ร้องขอทั้งหมดใน รูปแบบ key/value getResponseHeader(he ader) รับค่าส่วนหัวที่ร้องขอตามที่ระบุ setRequestHeader(hea der, value) กำหนดประเภทของข้อมูลที่จะมีการ ส่งหรือรับ

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

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

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

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

16 ฟอร์ม HTML 16 Please register: Username: First Name: LastName: เมื่อมีการกรอกชื่อ ผู้ใช้เสร็จ แล้วไปยัง ช่องถัดไปจะเรียก ฟังก์ชัน checkUsername

17 ฟังก์ชันส่งและรับข้อมูล 17 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(); } กำหนดตำแหน่งสคริป php ที่จะให้ รับข้อมูล พร้อมกับส่งข้อมูลชื่อผู้ใช้ ไปด้วย กำหนดฟังก์ชั่นที่ต้องการให้ ทำงาน เมื่อมีการเปลี่ยนแปลง สถานะ แสดงภาพตรงช่อง username ว่ากำลังตรวจสอบ ดึงค่า username ส่งไปยัง Server ถ้าค่าที่ตอบกลับ เป็นคำว่า okay จะ กำหนดคลาสให้ textfield ชื่อ approved

18 CSS สำหรับแสดงสถานะ 18 #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 ที่คอยรับและส่ง ข้อมูล 19 username ที่ มีอยู่แล้ว ให้หยุดรอ 2 วินาที เพื่อจำลองว่ามี การตรวจสอบอยู่ ถ้ามี username แล้ว ส่งคำว่า okay กลับไป checkName.php

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

21 การค้นหาข้อมูลจาก ฐานข้อมูลด้วย Ajax 21 ">.png" width="100"> บาท &action=add">สั่งซื้อ

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


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

งานนำเสนอที่คล้ายกัน


Ads by Google