Giáo trình Lập trình viên mã nguồn mở PHP - Module 4, Bài 5: Ajax 1

LTV MÃ NGUỒN MỜ PHP
Module 4 - Bài 5: Ajax 1
Ngành LT & CSDL
www.t3h.vn
2014
P'g
Eằiũ
Trường ĐH Khoa Học Tự Nhiên Tp. Hồ Chi Minh TRUNG TÂM TIN HỌC
Giới thiệu Ajax
□ Ajax (Asynchronous JavaScript and XML) - JavaScript và XML không đồng bộ
Bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách cắt nhỏ dữ liệu và chì hiển thị những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web.
AJAX không phải một công nghệ đơn lẻ mà là sự kết hợp một nhóm công nghệ với nhau.
HTML và css đóng vai hiền thị dữ liệu
Mô hình DOM trình bày thông tin động, đối tượng
XMLHttpRequest trao đổi dữ liệu không đồng bộ với máy chủ web
■ XML là định dạng chủ yếu cho dữ liệu truyền
LTV Mã nguồn mờ PHP - Module 4
Giới thiệu Ajax
□ Nguồn gốc
• Bắt đầu từ khi Microsoft phát triển công
nghệ Remote Scripting vào năm 1998
•Tháng 2/2005: Ajax trở nên phổ biến, liên quan đến thế hệ Web 2.0
LTV Mã nguồn mờ PHP - Module 4
Giới thiệu
□ Đặc điểm Ajax
Dựa trên các chuẩn về web: JavaScript, XML, HTML, CSS
Sử dụng kỹ thuật bất đối xứng giữa trình duyệt và máy chu (server), cho phép cac trang web yeu cầu thông tin từ máy chủ thay vì cà trang
Sử dụng đối tượng XMLHttpRequest, giúp trao đổi dữ liệu với máy chủ mà khổng can nạp lại trang
Phân tách và làm việc với XML
Là công nghệ phía trình duyệt, độc lập với phần mềm máy chủ web
Tạo ra ứng dụng nhanh, giao tiếp thân thiện hơn vởi người dùng
LTV Mã nguồn mờ PHP - Module 4
Cách thức làm việc của Ajax
□Ajax cho phép tạo ra một Ajax Engine nằm giữa trình duyệt và server (cơ chế xử lý Ajax giữa Client và server)
MC
□Web Server gửi trả dỡ liệu dưới dạng XML, Ajax Engine sẽ tiếp nhận, phân tích và chuyển hóa thành XHTML + CSS cho trinh duyệt hiển thị
pạ
nđ	LTV Mã nguồn mờ PHP - Module 4	7
Javascript
Máy chủ web
Cách thức làm việc của Ajax
Máy chủ CSDL
Máy chủ CSDL
Trang web
Trang web
HTML +
css
Ajax Engine
HTTP request XYILData
Phía máy chủ
Phía máy chủ
LTV Mã nguồn mờ PHP - Module 4
MC
MC
HTTP request và response code
LTV Mã nguồn mờ PHP - Module 4	12
MC
Code
Mô tà
1 200
Tim thấy' trang
304
Not modified: chưa đnh nghía
401
Unauthorized: không được phép
403
Forbidden: bi cấm
1 404
rMot found: không òm thay
1 500
Internal Server error: lỗi server
1 503
Service Unavailable: dich vụ không khả dụng
Đối tượng XMLHttpRequset trong Ajax
□Đặc điểm
Là đối tượng chính trong Ajax
Ajax giao tiếp với máy chủ bằng đối tượng XMLHttpRequset. Đối tượng này được hầu hết các trình duyệt hỗ trợ.
XMLHttpRequest: giúp cập nhật trang với dữ liệu từ máy chủ sau khi trang đã được nạp
Dữ liệu phản hồi từ Web Server là xml hoặc text
15
LTV Mã nguồn mờ PHP - Module 4
Đối tượng XMLHttpRequset trong Ajax
□Đặc điểm
Thông thường, khi muốn gửi một yêu cầu đến server, cần thiết lập một hành động (action) và phương thức (method) cho form.
Với Ajax, gọi hàm JavaScript để kiểm tra và thu thập các giá trị từ form và gửi dữ liệu đến cho một hàm ở server bằng cách sử dụng XMLHttpRequest. Kêt quả được gửi trả lại tại một điểm cho Client, client xử lý kêt quả và cập nhật lại các phần của trang cần cập nhật, do đó trang này không cần phải refresh toàn bộ.
pg P ú
LTV Mã nguồn mờ PHP - Module 4
16
Đối tượng XMLHttpRequset trong Ajax
pg
□Thuộc tính
llniộc tính
Mô tã
cnreadystatechange
Điêu khiễh môt sự bên thực hiên mả khi trang thái thay đổ.
bhân kẽt quả trả vê cúa hàm oẽp nhân dữ liêu tử server trả vè
readyState
Luu gữ trang thái phán hôi tử server Có các trang thái sau
0 ■ chua băt đâu
■ dang load
= đâ load xong
= tưcng tàc
= hoán thánh
respcnseTeat
Phên bản cùa dữ kêu được trả vỉ từ trẽn trinh của server hhán dữ léu được gút trả vê từ server
response XM
ĐÕI tượng tải lêu DOM-compaoble cũa dữ lêu dược trá vê tử t>êh trình của server
status
M3 sỗ trẻ vê tứ server, ví du như 404 là “không tim thây" và 200I3 0K
statusText
Chuỗi thông đèp phu di kèm VỚI m3 trang thà
LTV Mã nguồn mớ PHP - Module 4
17
Đối tượng XMLHttpRequset trong Ajax
□ Phương thức
MC
Tênphươhg thức
Mô tả
aborự)
Ngùng yêu cău hèn ta
ọetAIResponseHeadersO
Trà vẽ môt bô hoán chinh cùa các Header (gôm có nhãn và gá trĩ)
getPesponsehteader 0
Trả vẽ môt gá tn của Header trong phưohg ttiíc
open("method", ‘URL” L asyncHagf, "userName" [, "password"]]])
GŨI môt yêu câu đèn server
Kha báo phưcng thk, URL đích, và các thuôc õnh túy chon khác cùa môt yêu câu sắp ứvc hên
setP.eguestHeader (Taber, "value")
Kha báo cáp nhãn/ gã ƠI cho header sẻ đươc gũi với môtyêucâu
senựcontent)
GŨI một yêu câu đẽn server
Chuyên yêu cău, túy chcn và một chug hoăc dữ lieu la đôi tưcng DOM
hđ	LTV Mã nguồn mờ PHP - Module 4	18
Lý do kết hợp PHP và Ajax
PHP là ngôn ngữ lập trình web mã nguồn mở được rất nhiều lập trình web sử dụng để xây dựng website với rất nhiều tính năng khác nhau.
Ajax là sự kết hợp cùa JavaScript và XML hoạt động chủ yếu trên Client. Sử dụng Ajax giúp tạo ra các trang web hoạt động nhanh hơn, linh động hơn.
=> Khi kết hợp với nhau, PHP và Ajax cung cấp một nền tảng mạnh để tạo ra các trang web và các ứng dụng trên web thân thiện hơn với người dùng.
K
ÍQlđ	LTV Mã nguồn mờ PHP - Module 4	20
Cấu trúc của ứng dụng PHP và Ajax
□ Phương thức Ajax
• Nhắc lại các phương thức của đối tượng Document trong JavaScript
document.getElementByld("id"): truy xuất element đầu tiên với ID.
document.getElementsByName(name): truy xuất tất cả các element với tên
document. getElementsByTagName(tagname): truy xuất tất cả các element với tagname
LTV Mã nguồn mờ PHP - Module 4
Cấu trúc của ứng dụng PHP và Ajax
□Thông thường, ứng dụng kết hợp
PHP & Ajax sẽ gồm có 2 tập tin:
•Tập tin .html hoặc .php có chứa phương thức viết bằng Ajax và form
•Tập tin .php xử lý phương thức được gửi đi từ trang.html hoặc .php có chứa phương thức viết bằng Ajax và form
22
23
LTV Mã nguồn mờ PHP - Module 4
MC
MC
MC
Nội dung
Giới thiệu Ajax
Cách thức làm việc của Ajax
HTTP request và response code
Đối tượng XMLHttpRequset trong Ajax
Lý do kết hợp PHP và Ajax
Cấu trúc của ứng dụng PHP và Ajax
Form
Các ứng dụng thường gặp với PHP và Ajax
LTV Mã nguồn mờ PHP - Module 4
30
Form
Các điều khiển trên form: lisưmenu, text field, textarea, file field, button, checkbox, radio,...
Có thể gọi phương thức Ajax đã được xây dựng trong hoạt động của những điều khiển này.
Form có 2 phương thức: POST và GET
Thông thường thì chỉ có GET được sử dụng khi tạo ứng dụng với Ajax.
Nhưng đôi khi POST cũng rất cần thiết khi tạo một yêu cầu cho Ajax, bởi vì sử dụng POST an toàn hơn sử dụng GET
LTV Mã nguồn mờ PHP - Module 4
31
MC
Nội dung
Giới thiệu Ajax
Cách thức làm việc của Ajax
HTTP request và response code
Đối tượng XMLHttpRequset trong Ajax
Lý do kết hợp PHP và Ajax
Cấu trúc của ứng dụng PHP và Ajax
Form
Các ứng dụng thường gặp với PHP và Ajax
LTV Mã nguồn mờ PHP - Module 4
3E
Các ứng dụng thường gặp với PHP và Ajax
□ ứng dụng với tập tin
Dữ liệu được lưu trữ trong tập tin, dùng ngôn ngữ PHP để đọc, hiển thị, xử lý dữ liệu này theo yêu cầu được gửi từ phương thức Ajax
Dữ liệu trong tập tin phải có cấu trúc
ứng dụng này thường được sử dụng khi lượng dữ liệu không quá lớn và cấu trúc
không quá phức tạp.
LTV Mã nguồn mờ PHP - Module 4
39
MC
MC