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 [...]... hình ứng dụng AJAX 17 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 18 http://maps.google.com/ 19 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 20 Xây dựng ứng dụng AddressBook • Giới thiệu  Ứng. .. • Kết luận và hướng phát triển 27 Kết luận • AJAX - công nghệ chủ chốt mang tính đột phá • Mục tiêu:  Tăng tốc độ duyệt web  Xóa ranh giới giữa các ứng dụng Web và ứng dụng Desktop 28 Hướng phát triển • Nâng cao tính cộng đồng và chia sẻ • Xây dựng các ứng dụng tính tương tác cao với người dùng • Thay thế ứng dụng Web truyền thống bằng ứng dụng Web kiểu AJAX • Cung cấp phần mềm dưới dạng các dịch... tác trên các đối tượng DOM  Không sử dụng thư viện 23 Kết quả ứng dụng 24 Ứng dụng SimpleAddressBook 25 So sánh • Sau một tác động của người dùng  AddressBook: Nạp lại phần trang web bị thay đổi  SimpleAddressBook: Nạp lại toàn bộ trang web 26 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... XMLHttpRequest 12 Sự kết hợp các công nghệ • • • • JavaScript DOM & JavaScript CSS XMLHttpRequest & JavaScript: thông giữa client/server • Dữ liệu dạng XML truyền 13 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 14 XMLHttpRequest • Công nghệ trọng tâm của AJAX • Thành phần ActiveX trong...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 11 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:... 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 21 Các module của ứng dụng • • • • • • Module Module Module Module Module Module admin quản lý quản lý quản lý quản lý quản lý login/logout cho user danh mục nhóm danh sách mail các chức năng 22 Á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... thuật lập trình với AJAX • Phía client: sử dụng các ngôn ngữ script  Thao tác các đối tượng DOM  Áp đặt giao diện với CSS  Tạo và xử lý các đối tượng XMLHttpRequest • Phía server: sử dụng các công nghệ phía server  NET  J2EE  PHP 31 Khó khăn trong lập trình AJAX và giải pháp • Lập trình phía client với ngôn ngữ Script • Ứng dụng rất khó debug với mã nguồn được viết ở cả client và server • Giải pháp... chế đến mức tối thiểu viết mã phía client  Sử dụng các thư viện AJAX trong ứng dụng Web 32 Giới thiệu một số thư viện • NET  Atlas  Ajax. NET • J2EE  JSPTaglib  Google Web ToolKit (GWT) • PHP  Sajax 33 Giới thiệu về PHP • Là một ngôn ngữ lập trình kiểu script, chạy trên server và trả về mã HTML cho trình duyệt • Là ngôn ngữ dễ sử dụng, cú pháp lệnh đơn giản, biến không cần khai báo trước khi dùng,... khai báo trước khi dùng, tự động ép kiểu • Tập hàm built_in phong phú, có mã nguồn mở… 34 SAJAX (Simple Ajax) cho PHP • Sajax là một Ajax framework giúp ta tạo các mã JavaScript phía trình duyệt với các ngôn ngữ khác nhau phía server • Hiện nay Sajax cho phép dùng với ASP, ColdFusion, Perl, PHP, Python, và Ruby trên server 35 ... 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 15 XMLHttpRequest • Tạo XMLHttpRequest bằng JavaScript Kiểm tra trình duyệt có phải là IE hay không? var xmlHttp; function createXMLHttpRequest() . 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. 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 •. 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