PHP & 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 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 đề Ajax – Đặt vấn đề

HIENLTH - FIT of HCMUP

Ajax – Đặt vấn đề Ajax – Đặt vấn đề

Server

New page

Trang web

Reload

Làm thế nào để thay đổi nội dung mà không phải reload lại toàn trang web?

HIENLTH - FIT of HCMUP

Submit

Nếu sử dụng Ajax Nếu sử dụng Ajax

Server

Update

Response

javascript

HIENLTH - FIT of HCMUP

Trang web

AJAXAJAX

• 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

AJAXAJAX

• 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 AJAX – Đặc điểm

• Ưu điểm

• Nhược đ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.

– 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

HIENLTH - FIT of HCMUP

quan đến bảo mật.

Mô hình truyền thống Mô hình truyền thống

Browser client

• Mô hình Web truyền thống

User interface

làm việc theo cách thức – Hầu hết các hành động của

HTTP request HTTP request

HTML + CSS HTML + CSS

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:

Web Server

truy vấn DB, thực thi các xử lý... – Trả kết quả về cho client dạng

Datastore, backend processing…

HTML + CSS

Server-side system

HIENLTH - FIT of HCMUP

Mô hình truyền thống 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

Client

User activity

User activity

User activity

Time

System processing

System processing

Server

HIENLTH - FIT of HCMUP

AJAX – Mô hình hoạt động 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

HIENLTH - FIT of HCMUP

các mã JavaScript và HTML + CSS

Mô hình Ajax 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

User activity

Browser UI

Client -side processing

Ajax engine

Time

System processing

System processing

System processing Server

HIENLTH - FIT of HCMUP

AJAX – So sánh với ứng dụng AJAX – So sánh với ứng dụng web truyền thống web truyền thống

HIENLTH - FIT of HCMUP

Web sử dụng AJAX Web truyền thống

AJAX – Cài đặt và sử dụng 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 Tạo đối tượng XMLHttpRequest XMLHttpRequest • Với IE6: sử dụng Msxml2.XMLHTTP:

XMLHttp = new

ActiveXObject("Msxml2.XMLHTTP")

• Với IE5.6: sử dụng Microsoft.XMLHTTP

XMLHttp =

• Với trình duyệt khác: XMLHttpRequest XMLHttp=new XMLHttpRequest()

HIENLTH - FIT of HCMUP

new ActiveXObject("Microsoft.XMLHTTP")

Tạo đối tượng Tạo đối tượng XMLHttpRequest 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 Đố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 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) 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 Đố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

• Response trả về từ server dưới dạng XML.

– responseText: Chuỗi dữ liệu trả về. – responseXML

• 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, …).

– status

• Thông điệp của mã trạng thái HTTP (chẳng hạn OK hay Not

Found, …)

HIENLTH - FIT of HCMUP

– statusText

readyState readyState

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

xmlHttp.onreadystatechange=function() {

if(xmlHttp.readyState==4) {

//Xử lí dữ liệu nhận được

HIENLTH - FIT of HCMUP

}

}

XMLHttpRequest–– Gửi yêu cầu đến máy chủ (tt) 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

HIENLTH - FIT of HCMUP

Gửi yêu cầu đến Web server dùng phương thức GET 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 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 Gửi yêu cầu đến Web server

XMLHttpRequest– Nhận yêu phản hồi từ máy chủ 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

HIENLTH - FIT of HCMUP

“application/xml”

Đối tượng XMLHttpRequest Đố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”

HIENLTH - FIT of HCMUP

– 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 Nhận phản hồi từ web server và xử lý kết quả nhận được

VD1: Lấy giờ VD1: Lấy giờ

HIENLTH - FIT of HCMUP

VD1: Lấy giờ (tt) VD1: Lấy giờ (tt)

HIENLTH - FIT of HCMUP

Ví dụ 2 - AJAX Database Ví dụ 2 - AJAX Database

HIENLTH - FIT of HCMUP

Ví dụ 2 - AJAX Database (tt) Ví dụ 2 - AJAX Database (tt)

Loại sữa:

HIENLTH - FIT of HCMUP

Ví dụ 2 - AJAX Database (tt) 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

Ví dụ 2 - AJAX Database (tt) Ví dụ 2 - AJAX Database (tt)

Tên sữaĐơn giá

";

while($r = mysqli_fetch_array($kq)) {

echo "

{$r['TenSua']}{$r['DonGia']}

";

} echo ""; ?>

HIENLTH - FIT of HCMUP

VD3 – jQuery Ajax VD3 – jQuery Ajax

HIENLTH - FIT of HCMUP

Nhập tên:

VD3 – jQuery Ajax (tt) VD3 – jQuery Ajax (tt)

HIENLTH - FIT of HCMUP

VD3 – jQuery Ajax (tt) VD3 – jQuery Ajax (tt)

HIENLTH - FIT of HCMUP

VD3 – jQuery Ajax (tt) VD3 – jQuery Ajax (tt)

• Kết quả thực hiện

HIENLTH - FIT of HCMUP

Tài liệu tham khảo Tài liệu tham khảo

• http://www.w3schools.com/ajax • http://api.jquery.com/jquery.ajax • http://labs.jonsuh.com/jquery-ajax-php-

json/

HIENLTH - FIT of HCMUP

Q & AQ & A

HIENLTH - FIT of HCMUP

THE END

HIENLTH - FIT of HCMUP