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

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
Nội dung trích xuất từ tài liệu:
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 BÁO CÁO ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC ĐỀ TÀI: TÌM HIỂU VÀ XÂY DỰNG ỨNG DỤNG DỰA TRÊN CÔNG NGHỆ AJAX 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 1 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 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 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… 4 Mô hình ứng dụng Web truyền thống 5 Mô hình tương tác đồng bộ client/server 6 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…) 7 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 8 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 9 Mô hình tương tác không đồng bộ với AJAX 10 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: Ngôn ngữ kịch bản phía client • XMLHttpRequest 12 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 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 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() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } Tạo đối tượng XMLHttpRequest Tạo đối tượng XMLHttpRequest cho cho các trình duyệt non-IE IE dưới dạng một ActiveXObject 16 Mô 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