ajax - ttime.in.th 9.pdf · 2020. 4. 7. · user action data update....
TRANSCRIPT
-
Theerayut Thongkrau
Ajax
Asynchronous JavaScript and XML
Chapter 9
-
รูปแบบการส่งข้อมูลบนอนิเทอร์เน็ต• แบบ Synchronous คือ การส่ง request จาก Browser ไป
ประมวลผลท่ี Server โดยตอ้งรอให ้Server ประมวลผลเสร็จก่อนและส่ง response กลบัมายงั Browser จึงจะแสดงผลได้
• แบบ Asynchronous คือ การส่ง request จาก Browser ไปประมวลผลท่ี Server โดยไม่ตอ้งรอให ้Server ประมวลผลเสร็จ Browser จะรับขอ้มูลเม่ือ Server ท าเสร็จแลว้
2
-
รูปแบบการส่งข้อมูลบนอนิเทอร์เน็ต
3
Synchronous
Client Server
wait
Asynchronous
Client Server
User Action
Screen Reload
Data Update
User Action
Data Update
-
ปัญหาการส่งข้อมูลแบบ Synchronous • เม่ือมีการเปล่ียนแปลงขอ้มูลเพียงบางส่วนบนเวบ็เพจ็ จะตอ้งรีโหลดเวบ็เพจ็ใหม่ทั้งหนา้
• การรอหนา้เวบ็เพจ็ตอบกลบัจาก Server ไม่สามารถท างานอยา่งอ่ืนขนานกนัไปได้
4
-
Ajax คืออะไร• Ajax คือ object มาตรฐานในภาษา JavaScript ท่ีใชใ้นการรับและส่งขอ้มูลกบั Server แบบ Asynchronous
• Ajax รองรับขอ้มูลหลากหลายรูปแบบ– JSON– XML– HTML– Plain Text
5
-
สถาปัตยกรรมเวบ็ที่ไม่ใช้ และใช้ Ajax
6
Server-side
Client-side
User Interface
Ajax Engine
(JavaScript)
Web Server
Backend Processing:
database, business process
JavaScript: send()
HTTP respond
text, HTML, JSONHTTP request
text, HTML, JSON
Server-side
Client-side
User Interface
Web Server
Backend Processing:
database, business process
HTTP respond
text, HTML, JSONHTTP request
เวบ็ที่ไม่ใช้ Ajax เวบ็ที่ใช้ Ajax
-
XMLHttpRequest• XMLHttpRequest คือ object ส าหรับใชส่้งค าร้อง (request) และรับ
ผลตอบกลบั (response) ระหวา่ง Browser กบั Server
7
ช่ือ property ค าอธิบาย
onreadystatechange ใชก้ าหนดช่ือฟังกช์นัท่ีจะใหท้ างาน เม่ือมีการเปล่ียนแปลงสถานะ (ค่าใน readyState เปล่ียนแปลง)
readyState ค่าบอกล าดบัการท างานของการส่ง request และรับ response
status รหสัการตอบกลบัจาก Server (HTTP response)
responseText ขอ้มูลท่ี Server ส่งกลบัมายงั Browser (ขอ้ความท่ีถูก echo ใน PHP)
-
Server-side
Client-side
var httpRequest;function send() {
httpRequest = new XMLHttpRequest();httpRequest.onreadystatechange = showResult;
var a = document.getElementById("a").value;var b = document.getElementById("b").value;var url= "add.php?a=" + a + "&b=" + b;
httpRequest.open("GET", url);httpRequest.send();
}
function showResult() {if (httpRequest.readyState == 4 && httpRequest.status == 200) {
document.getElementById("result").innerHTML = httpRequest.responseText;}
}
a =
b =add.php
Ajax Engine
Web Server
add.php
ผลลพัธ์ คอื 15
10
5
เม่ือมีการกรอกตวัเลขท่ีช่องน้ีจะเรียกฟังกช์นั send()
ก าหนดจุดท่ีจะให้แสดงผลลพัธ์
ผลลพัธ คอื 15
add.php?a=10&b=5
ดึงผลลพัธ์จาก Server
readyState
01234
-
การตรวจสอบสถานะของ requestค่าบอกล าดบัการท างานของการส่ง request และรับ response จะถูกเกบ็ใน property ช่ือ readyState มี 4 ค่า ไดแ้ก่
0 – การร้องขอยงัไม่ถูกก าหนดข้ึน1 – การร้องขอไดถู้กก าหนดข้ึนแลว้2 – การร้องขอไดถู้กส่งไป3 – การร้องขอก าลงัท างานอยู่4 – การร้องขอไดเ้สร็จส้ินการท างานแลว้
9
-
รหัสการตอบกลบัจาก Server
Code ความหมาย ค าอธิบาย
200 OK ค าร้องท่ีตอ้งการถูกพบบน Server
401 Unauthorized ค าร้องท่ีตอ้งการไม่มีสิทธ์ิในการเขา้ถึง
403 Forbidden ค าร้องท่ีตอ้งการเป็นส่วนท่ีหวงหา้มในการเขา้ถึง
404 Not Found ค าร้องท่ีตอ้งการไม่พบบน Server
500 Internal Server Error Server มีขอ้ผดิพลาด
503 Service Unavailable Server ไม่สามารถจดัการกบัค าร้องได้
10
รหสัการตอบกลบัจาก Server (HTTP response) จะถูกเกบ็ใน property ช่ือ status ซ่ึงเป็นรหสัมาตรฐานของ HTTP
-
ฟังก์ชันของ XMLHttpRequest
11
ช่ือฟังก์ชัน ค าอธิบาย
open(method, url, [isAsynchronous]) เปิดการติดต่อกบั Web Server- method คือ การติดต่อแบบ GET หรือ POST - url คือ ไฟล์ PHP ท่ีใชรั้บและส่งขอ้มูล- isAsynchronous มีค่า default เป็น true
send(content) ส่งการร้องขอไปยงั Server
abort() ยกเลิกการร้องขอ
getAllResponseHeader() รับค่าส่วนหวัท่ีร้องขอทั้งหมดในรูปแบบ key/value
getResponseHeader(header) รับค่าส่วนหวัท่ีร้องขอตามท่ีระบุ
setRequestHeader(header, value) ก าหนดประเภทของขอ้มูลท่ีจะมีการส่งหรือรับ
-
ขั้นตอนการสร้างเวบ็ที่มีการใช้ Ajax1. สร้างส่วนท่ีเป็นโคด้ html
- ก าหนด event ใหก้บัแทก็ท่ีจะกระตุน้ใหเ้ร่ิมส่งขอ้มูลแบบ asynchronous
- ก าหนดจุดแสดงผลเม่ือไดรั้บการตอบกลบั
2. สร้างส่วนท่ีเป็นโคด้ JavaScript- เขียนฟังกช์นัส าหรับใชใ้นการส่งขอ้มูล- เขียนฟังกช์นัส าหรับใชใ้นการรับขอ้มูล
3. สร้างส่วนท่ีเป็นโคด้ PHP บน Server ซ่ึงท าหนา้ท่ีคอยรับและส่งขอ้มูล
12
-
กจิกรรม• จงเขียนเวบ็ในการค านวณยอดขายผลไม ้โดยแบ่งการท างานออกเป็นสองฝ่ัง ไดแ้ก่ ฝ่ัง
เซิร์ฟเวอร์ ท าหนา้ท่ีค านวณยอดรวม ซ่ึงเขียนดว้ยภาษา PHP ส่วนฝ่ังไคลเอนตเ์ขียนดว้ยภาษา HTML และ JavaScript+Ajax ท าหนา้ท่ีรับค่าจ านวนผลไมแ้ต่ละชนิดขายได้ส่งไปยงัเซิร์ฟเวอร์ และน าผลลพัธ์มาแสดงผลโดยไม่มีการรีโหลดหนา้เวบ็ใหม่
13
-
การตรวจสอบช่ือผู้ใช้ด้วย Ajax• การลงทะเบียนท่ีมีการกรอกช่ือผูใ้ช ้จะถูกตรวจสอบวา่
username ซ ้ ากนัเม่ือมีการคลิกปุ่มส่งขอ้มูลแลว้ แต่การใช ้Ajax จะช่วยตรวจสอบหลงัจากท่ีกรอก username เสร็จได้เลย โดยไม่ตอ้งรอพิมพใ์หค้รบ
14
-
ฟอร์ม HTML
15
Please register:Username:
First Name:
LastName:
Email:เม่ือผูใ้ชก้รอก username เสร็จ และไปยงัช่องถดัไป ฟังกช์นัcheckUsername จะถูกท างาน
-
ฟังก์ชันส่งและรับข้อมูล
16
var xmlHttp;function checkUsername() {
document.getElementById("username").className = "thinking";
xmlHttp = new XMLHttpRequest();xmlHttp.onreadystatechange = showUsernameStatus;
var username = document.getElementById("username").value;var url = "checkName.php?username=" + username;xmlHttp.open("GET", url);xmlHttp.send();
}
function showUsernameStatus() {if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
if (xmlHttp.responseText == "okay") {document.getElementById("username").className = "approved";
} else {document.getElementById("username").className = "denied";document.getElementById("username").focus();document.getElementById("username").select();
}}
}
ก าหนดต าแหน่งสคริป php ท่ีจะใหรั้บขอ้มูล พร้อมกบัแนบช่ือผูใ้ชไ้ปดว้ย
ก าหนดฟังกช์ัน่ท่ีตอ้งการใหท้ างาน เม่ือมีการเปล่ียนแปลงสถานะ
แสดงภาพตรงช่อง username วา่ก าลงัตรวจสอบ
ดึงค่า username จากฟอร์ม
ถา้ค่าท่ีตอบกลบัเป็นค าวา่ okay จะก าหนดคลาสให ้textfield ช่ือ approved
-
CSS ส าหรับแสดงสถานะ
17
.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;
}
-
PHP ทีค่อยรับและส่งข้อมูล
18
จ าลอง username ท่ีมีอยูแ่ลว้
ใหห้ยดุรอ 1 วนิาที เพื่อจ าลองวา่มีการตรวจสอบอยู่
ถา้มี usernameในอาร์เรย์ส่งค าวา่ okay
กลบัไป
checkName.php