Bài giảng PHP và Ajax

PHP & Ajax
GV: Lương Trần Hy Hiến, khoa CNTT, ĐH Sư phạm TpHCM
HIENLTH - FIT of HCMUP
Nội dung
• Giới thiệu
• Hoạt động của AJAX
• Đối tượng XMLHttpRequest
• PHP & jQuery Ajax
• Các ví dụ minh họa
HIENLTH - FIT of HCMUP
Ajax – Đặt vấn đề
HIENLTH - FIT of HCMUP
Ajax – Đặt vấn đề
Làm thế nào để thay đổi nội dung mà 
không phải reload lại toàn trang web?
Trang web
Submit
Server
Reload
New 
page
HIENLTH - FIT of HCMUP
Nếu sử dụng Ajax
Trang web
Server
Update
javascript
Response
HIENLTH - FIT of HCMUP
AJAX
• AJAX: Asynchronous JavaScript And XML
• AJAX không phải là ngôn ngữ mới mà là một 
cách mới sử dụng các ngôn ngữ đã có.
• AJAX giúp ta tạo các trang web nhanh hơn, tiện 
lợi hơn, thân thiện hơn khi sử dụng.
• Ajax tập hợp nhiều công nghệ với thế mạnh 
riêng để tạo thành một sức mạnh mới.
HIENLTH - FIT of HCMUP
AJAX
• Là công nghệ của web browser. Độc lập với web 
server.
• Sử dụng JavaScript để gửi và nhận dữ liệu giữa client 
và server.
• AJAX dựa trên các thành phần:
– XHTML + CSS cho phần trình bày
– DOM cho việc hiển thị động và tương tác
– XML + XSLT cho việc chuyển đổi dữ liệu và thao tác
– XMLHttpRequest cho việc truy cập và nhận dữ liệu
– JavaScript được xem như chất kết dính cho các thành phần 
trên
• AJAX sử dụng XML và HttpRequest
HIENLTH - FIT of HCMUP
AJAX – Đặc điểm
• Ưu điểm
– Cập nhật nội dung không cần nạp lại toàn bộ trang.
– Giảm công việc xử lý ở máy chủ.
– Dễ học và sử dụng.
• Nhược điểm
– Các chức năng Back và Bookmark (Favourites) của 
trình duyệt bị vô hiệu hóa.
– Buộc phải sử dụng JavaScript → Có những vấn đề liên 
quan đến bảo mật.
HIENLTH - FIT of HCMUP
Web Server
Datastore, backend 
processing
Server-side system
Mô hình truyền thống
• Mô hình Web truyền thống 
làm việc theo cách thức
– Hầu hết các hành động của 
user trên UI sẽ được ràng buộc 
bởi HTTP request và gởi về cho 
server
– Server thực thi các thao tác: 
truy vấn DB, thực thi các xử lý...
– Trả kết quả về cho client dạng 
HTML + CSS
HIENLTH - FIT of HCMUP
Browser client
User interface
HTTP request
HTML + CSS 
Mô hình truyền thống
• Cách tiếp cận này có nhiều điểm hạn chế nhất là 
việc tương tác giữa user và ứng dụng web
– Mỗi bước thực hiện thì user phải chờ
– User thấy được ứng dụng “trip back” server
HIENLTH - FIT of HCMUP
User 
activity
User 
activity
System processingSystem processing
User 
activity
Time
Client
Server
AJAX – Mô hình hoạt động
• AJAX thực hiện tương tác với máy 
chủ bằng cách sử dụng đối tượng 
XMLHttpRequest, nhận kết quả về 
dưới dạng XML (hoặc text, JSON,) 
và phân tích kết quả bằng mô hình 
DOM.
• Tương tác giữa AJAX và giao diện 
người dùng được thực hiện thông qua 
các mã JavaScript và HTML + CSS
HIENLTH - FIT of HCMUP
Mô hình Ajax
• Mỗi hành động của user thường tạo HTTP request 
là hình thức của lời gọi JavaScript đến Ajax engine
Client -side 
processing
System processingSystem processing
Time
Server
Browser UI
Ajax 
engine
System processing
User activity
Client
HIENLTH - FIT of HCMUP
AJAX – So sánh với ứng dụng 
web truyền thống
Web sử dụng AJAXWeb truyền thống
HIENLTH - FIT of HCMUP
AJAX – Cài đặt và sử dụng
1. Khởi tạo đối tượng XMLHttpRequest
2. Gán giá trị cho đối tượng XMLHttpRequest và 
gửi về web server
3. Nhận phản hồi từ web server và xử lý kết quả 
nhận được
4. Viết xử lý ở web server
HIENLTH - FIT of HCMUP
Tạo đối tượng 
XMLHttpRequest
• Với IE6: sử dụng Msxml2.XMLHTTP:
XMLHttp = 
new 
ActiveXObject("Msxml2.XMLHTTP")
• Với IE5.6: sử dụng Microsoft.XMLHTTP
XMLHttp =
new ActiveXObject("Microsoft.XMLHTTP")
• Với trình duyệt khác: XMLHttpRequest
XMLHttp=new XMLHttpRequest()
HIENLTH - FIT of HCMUP
Tạo đối tượng 
XMLHttpRequest
function GetXMLHttpObj(){
var xmlhttp=null
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHttp")
}
catch(e){
try{
xmlhttp=new ActiveXObject("Microsoft.XMLHttp")
}
catch (e){}
}
if (xmlhttp==null)
xmlhttp=new XMLHttpRequest()
return xmlhttp;
} HIENLTH - FIT of HCMUP
Đối tượng XMLHttpRequest
• Các phương thức cơ bản
– open(“method,”url”): Thiết lập yêu cầu 
đến server (địa chỉ trang cần kết nối đến)
– send(): Gửi yêu cầu đến server.
– abort(): Hủy yêu cầu hiện tại
HIENLTH - FIT of HCMUP
Phương thức open
• void open(
in DOMString method, 
in DOMString url);
• void open(
in DOMString method, 
in DOMString url, 
in boolean async);
• void open(
in DOMString method, 
in DOMString url, 
in boolean async, 
in DOMString user);
HIENLTH - FIT of HCMUP
Phương thức open (tt)
• void open(in DOMString method, 
in DOMString url, 
in boolean async, 
in DOMString user, 
in DOMString password);
HIENLTH - FIT of HCMUP
Đối tượng XMLHttpRequest
• Các thuộc tính
– readyState: Trạng thái hiện tại của đối tượng.
– onreadystatechange: hàm xử lý sự kiện cho một 
sự kiện phát sinh khi có thay đổi trạng thái
– responseText: Chuỗi dữ liệu trả về.
– responseXML
• Response trả về từ server dưới dạng XML. 
– status
• Mã trạng thái HTTP từ server (chẳng hạn 200 nếu không có 
lỗi, 404 cho lỗi Not Found, ).
– statusText
• Thông điệp của mã trạng thái HTTP (chẳng hạn OK hay Not 
Found, )
HIENLTH - FIT of HCMUP
readyState
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
//Xử lí dữ liệu nhận được
}
}
State Description
0 Request chưa được khởi tạo
1 Request đã được thiết lập
2 Request đã được gửi
3 Request đang được xử lí
4 Request được xử lí xong
HIENLTH - FIT of HCMUP
XMLHttpRequest–– Gửi yêu cầu đến máy chủ (tt)
• Có 2 phương thức để gửi yêu cầu: GET và POST
HIENLTH - FIT of HCMUP
Gửi yêu cầu đến Web server dùng phương thức GET
HIENLTH - FIT of HCMUP
Gửi yêu cầu đến Web server dùng phương thức POST
HIENLTH - FIT of HCMUP
Gửi yêu cầu đến Web server
HIENLTH - FIT of HCMUP
XMLHttpRequest– Nhận yêu phản hồi từ máy chủ
• Để nhận thông điệp trả lời từ server, sử dụng 2 thuộc tính sau của 
đối tượng XMLHttpRequest
– responseText: nội dung (phần thân) của thông điệp trả lời.
– responseXML: chứa một XML DOM document nếu thông điệp 
trả về có kiểu nội dung (content type) là “text/xml” hay 
“application/xml”
HIENLTH - FIT of HCMUP
Đối tượng XMLHttpRequest
• Thuộc tính onreadystatechange: Lưu giữ hàm sẽ được gọi mỗi khi 
thuộc tính readyState thay đổi giá trị
• Thuộc tính readyState: Lưu giữ trạng thái phản hồi của máy chủ.
• Thuộc tính status: mã trạng thái của thông điệp trả lời
– 200: “OK”
– 404: Page not found
HIENLTH - FIT of HCMUP
Nhận phản hồi từ web server và xử lý kết quả nhận được
HIENLTH - FIT of HCMUP
VD1: Lấy giờ
HIENLTH - FIT of HCMUP
VD1: Lấy giờ (tt)
HIENLTH - FIT of HCMUP
Ví dụ 2 - AJAX Database
HIENLTH - FIT of HCMUP
Ví dụ 2 - AJAX Database (tt)
Loại sữa: 
<?php
include ("DataProvider.php");
$kq = DataProvider::ExecuteQuery("SELECT * FROM loaisua");
while($r = mysqli_fetch_array($kq))
{
echo "
{$r['TenLoai']}
";
}
?>
HIENLTH - FIT of HCMUP
Ví dụ 2 - AJAX Database (tt)
var obj = new XMLHttpRequest();
function hienthisua(maloai)
{
obj.onreadystatechange = function(){
if(obj.readyState == 4 && obj.status == 200)
{
document.getElementById("txtDSSua").innerHTML 
= obj.responseText;
}
}
obj.open("GET", "LaySua.php?MaLoai=" + maloai, true);
obj.send(null);
} 
HIENLTH - FIT of HCMUP
<?php
include("DataProvider.php");
$ma = $_REQUEST['MaLoai'];
$kq = DataProvider::ExecuteQuery("SELECT * FROM sua WHERE 
MaLoaiSua = '{$ma}'");
echo "
Tên sữaĐơn giá
";
while($r = mysqli_fetch_array($kq))
{
echo "
{$r['TenSua']}{$r['DonGia']}
";
}
echo "";
?>
Ví dụ 2 - AJAX Database (tt)
HIENLTH - FIT of HCMUP
VD3 – jQuery Ajax
Nhập tên: <input name="txtSearch" id="txtSearch" 
type="text" placeholder="Input keyword here..." />
<input name="btnTim" id="btnTim" type="button" 
value="Search" />
HIENLTH - FIT of HCMUP
VD3 – jQuery Ajax (tt)
HIENLTH - FIT of HCMUP
VD3 – jQuery Ajax (tt)
HIENLTH - FIT of HCMUP
VD3 – jQuery Ajax (tt)
• Kết quả thực hiện
HIENLTH - FIT of HCMUP
Tài liệu tham khảo
• 
• 
• 
json/
HIENLTH - FIT of HCMUP
Q & A
HIENLTH - FIT of HCMUP
THE END
HIENLTH - FIT of HCMUP