báo cáo đồ án tìm hiểu và xây dựng ứng dụng dựa trên công nghệ ajax

1
BÁO CÁO
ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC

Sinh viên thực hiện : Phạm Thị Thu Duyên
Lớp : CT702
Giáo viên hướng dẫn: TS. Nguyễn Ngọc Hóa

ĐỀ TÀI:
TÌM HIỂU VÀ XÂY DỰNG ỨNG DỤNG
DỰA TRÊN CÔNG NGHỆ AJAX
2
Nội dung
• Giới thiệu công nghệ AJAX
• Các công nghệ cấu thành AJAX
• XMLHttpRequest và trao đổi dữ liệu bất
đồng bộ
• Ứng dụng AddressBook
• Kết luận và hướng phát triển
3
Nội dung
• Các công nghệ cấu thành AJAX
• XMLHttpRequest và trao đổi dữ liệu bất
đồng bộ
• Ứng dụng AddressBook
• Kết luận và hướng phát triển
• Giới thiệu công nghệ AJAX
4
Sự phát triển của Web
• 1990, Tim Berners-Lee sáng chế ra
HTML=>mở ra kỷ nguyên WWW

 Không có sự tương tác qua Web
• Web 1.0 và các trang web động
 Các ứng dụng tương tác như eCommerce,
forum…
 Các công nghệ sử dụng JavaScript,
ASP/ASP.NET, JSP/Servlet, PHP…
5
Mô hình ứng dụng Web truyền thống
6
Mô hình tương tác đồng bộ client/server
7
Nhược điểm
• Cách thức tương tác với người dùng: đồng
bộ client/server.
 Đợi phía server đáp ứng yêu cầu
 Nạp lại toàn bộ trang web sau mỗi tương tác
• Một số rào cản khác (hoạt động qua trình
duyệt…)

8
Giải pháp và công nghệ thực tế
• Chỉ cập nhật các phần bị thay đổi của
trang Web
• Trao đổi dữ liệu bất đồng bộ client/server
• AJAX xuất hiện như một giải pháp
• Một công nghệ của Web 2.0
9
Asynchronous JavaScript And XML
• AJAX là tập hợp của nhiều công nghệ với
thế mạnh của riêng mình để tạo thành

một sức mạnh mới.
 Thể hiện web theo chuẩn XHTML và CSS
 Nâng cao tính năng động và phản hồi bằng DOM
 Trao đổi và xử lý dữ liệu bằng XML và XSLT
 Truy cập dữ liệu bất đồng bộ bởi XMLHttpRequest
 Liên kết công nghệ bằng JavaScript
10
Mô hình tương tác không đồng bộ với AJAX
11
Nội dung
• XMLHttpRequest và trao đổi dữ liệu bất
đồng bộ
• Ứng dụng AddressBook
• Kết luận và hướng phát triển
• Các công nghệ cấu thành AJAX
• Giới thiệu công nghệ AJAX
12
Các công nghệ cấu thành AJAX
• Cascading Style Sheet (CSS): Bảng
định kiểu xếp chồng
• Document Object Model (DOM): Mô
hình đối tượng tài liệu
• eXtensible Markup Language (XML):
Ngôn ngữ đánh dấu mở rộng
• JavaScript: Ngôn ngữ kịch bản phía client
• XMLHttpRequest
13
Sự kết hợp các công nghệ
• JavaScript
• DOM & JavaScript

• CSS
• XMLHttpRequest & JavaScript: truyền
thông giữa client/server
• Dữ liệu dạng XML
14
Nội dung
• Giới thiệu công nghệ AJAX
• Các công nghệ cấu thành AJAX
• XMLHttpRequest và trao đổi dữ liệu bất
đồng bộ
• Ứng dụng AddressBook
• Kết luận và hướng phát triển
15
XMLHttpRequest
• Công nghệ trọng tâm của AJAX
• Thành phần ActiveX trong IE 5.0
• Không là chuẩn của W3C nhưng được hầu
hết các trình duyệt hỗ trợ
• Thực hiện một cách bất đồng bộ:
 Gửi các yêu cầu (request) tới server
 Nhận các đáp ứng (response) từ server
16
XMLHttpRequest
• Tạo XMLHttpRequest bằng JavaScript
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();
}
}
Kiểm tra trình duyệt có
phải là IE hay không?
Tạo đối tượng XMLHttpRequest cho
IE dưới dạng một ActiveXObject
Tạo đối tượng XMLHttpRequest
cho các trình duyệt non-IE
17
Mô hình ứng dụng AJAX
18
Một số ứng dụng dùng AJAX
• Xử lý văn bản trên Net
• Giao tiếp, liên lạc
• Chia sẻ và lưu trữ file
• Bản đồ trực tuyến


19

20
Nội dung
• Giới thiệu công nghệ AJAX
• Các công nghệ cấu thành AJAX
• XMLHttpRequest và trao đổi dữ liệu bất
đồng bộ
• Giới thiệu ứng dụng AddressBook
• Kết luận và hướng phát triển
21

Xây dựng ứng dụng AddressBook
• Giới thiệu
 Ứng dụng web áp dụng AJAX
 Quản lý danh bạ trực tuyến
• Lựa chọn công nghệ
 PHP/MySQL
 Appserv
22
Các module của ứng dụng
• Module admin
• Module quản lý login/logout cho user
• Module quản lý danh mục
• Module quản lý nhóm
• Module quản lý danh sách mail
• Module quản lý các chức năng
23
Áp dụng AJAX
• Phía server:
 Sử dụng PHP
 Cơ sở dữ liệu MySQL
• Phía client:
 Tạo và sử dụng đối tượng XMLHttpRequest
 Dùng JavaScript để thao tác trên các đối
tượng DOM
 Không sử dụng thư viện
24
Kết quả ứng dụng
25
Ứng dụng SimpleAddressBook