-
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
