Lập trình PHP và Ajax

– 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 c

Trang 1

PHP & Ajax

GV: Lương Trần Hy Hiến, khoa CNTT, ĐH Sư phạm TpHCM

HIENLTH - FIT of HCMUP

Trang 2

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

Trang 3

Ajax – Đặt vấn đề

Trang 4

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 6

• AJAX: A synchronous J avaScript A nd X ML

• 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.

Trang 7

– 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

Trang 8

– 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

Trang 9

Web Server

Datastore, backend processing…

– Server thực thi các thao tác:

HTML + CSS

Trang 10

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

User activity

System processing System processing

Trang 11

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

Trang 12

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 processing System processing

Time

Server

Browser UI

Ajax engine

Trang 13

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

Web sử dụng AJAXWeb truyền thốngHIENLTH - FIT of HCMUP

Trang 14

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

Trang 15

Tạo đối tượng

• 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 ()

Trang 16

Tạo đối tượng

Trang 17

Đố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

Trang 20

• 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ề

Trang 21

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

Trang 22

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

Trang 23

Gửi yêu cầu đến Web server dùng phương thức GET

Trang 24

Gửi yêu cầu đến Web server dùng phương thức POST

Trang 25

Gửi yêu cầu đến Web server

Trang 26

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”

Trang 27

• 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

Trang 28

Nhận phản hồi từ web server và xử lý kết quả nhận được

Trang 29

VD1: Lấy giờ

Trang 30

VD1: Lấy giờ (tt)

Trang 31

Ví dụ 2 - AJAX Database

Trang 33

obj open ("GET", " LaySua.php?MaLoai= " + maloai, true);

obj.send( null );

}

Trang 34

include(" DataProvider.php ");

$ma = $_REQUEST ['MaLoai'];

$kq = DataProvider::ExecuteQuery(" SELECT * FROM sua WHERE MaLoaiSua = '{$ma}' ");

echo "<table border='1'>

Trang 36

VD3 – jQuery Ajax (tt)

Trang 37

Trang 38

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

Trang 39

Tài liệu tham khảo

• http://www.w3schools.com/ajax

• http://api.jquery.com/jquery.ajax

• json/

http://labs.jonsuh.com/jquery-ajax-php-HIENLTH - FIT of HCMUP

Trang 40

Q & A

Trang 41

THE END

Định dạng
Số trang	41
Dung lượng	7,58 MB