Đồ án Tìm hiểu và xây dựng ứng dụng dựa trên công nghệ Ajax (Slide)

*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*Nội dungGiới thiệu công nghệ AJAXCác công nghệ cấu thành AJAXXMLHttpRequest và trao đổi dữ liệu bất đồng bộỨng dụng AddressBookKết luận và hướng phát triển*Nội dungCác công nghệ cấu thành AJAXXMLHttpRequest và trao đổi dữ liệu bất đồng bộỨng dụng AddressBookKết luận và hướng phát triểnGiới thiệu công nghệ AJAX*Sự phát triển của Web1990, Tim Berners-Lee sáng chế ra HTML=>mở ra kỷ nguyên WWWKhông có sự tương tác qua WebWeb 1.0 và các trang web độngCác ứng dụng tương tác như eCommerce, forumCác công nghệ sử dụng JavaScript, ASP/ASP.NET, JSP/Servlet, PHP*Mô hình ứng dụng Web truyền thống *Mô hình tương tác đồng bộ client/server*Nhược điểmCá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ầuNạp lại toàn bộ trang web sau mỗi tương tácMột số rào cản khác (hoạt động qua trình duyệt)*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 WebTrao đổi dữ liệu bất đồng bộ client/serverAJAX xuất hiện như một giải pháp Một công nghệ của Web 2.0*Asynchronous JavaScript And XMLAJAX 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 XMLHttpRequestLiên kết công nghệ bằng JavaScript *Mô hình tương tác không đồng bộ với AJAX*Nội dungXMLHttpRequest và trao đổi dữ liệu bất đồng bộỨng dụng AddressBookKết luận và hướng phát triểnCác công nghệ cấu thành AJAXGiới thiệu công nghệ AJAX*Các công nghệ cấu thành AJAXCascading Style Sheet (CSS): Bảng định kiểu xếp chồngDocument Object Model (DOM): Mô hình đối tượng tài liệueXtensible Markup Language (XML): Ngôn ngữ đánh dấu mở rộngJavaScript: Ngôn ngữ kịch bản phía clientXMLHttpRequest*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*Nội dungGiới thiệu công nghệ AJAXCác công nghệ cấu thành AJAXXMLHttpRequest và trao đổi dữ liệu bất đồng bộỨng dụng AddressBookKết luận và hướng phát triển*XMLHttpRequestCông nghệ trọng tâm của AJAXThành phần ActiveX trong IE 5.0Khô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*XMLHttpRequestTạo XMLHttpRequest bằng JavaScriptvar 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 ActiveXObjectTạo đối tượng XMLHttpRequest cho các trình duyệt non-IE*Mô hình ứng dụng AJAX*Một số ứng dụng dùng AJAXXử lý văn bản trên NetGiao tiếp, liên lạcChia sẻ và lưu trữ fileBản đồ trực tuyến.........*ội dungGiới thiệu công nghệ AJAXCác công nghệ cấu thành AJAXXMLHttpRequest và trao đổi dữ liệu bất đồng bộGiới thiệu ứng dụng AddressBookKết luận và hướng phát triển*Xây dựng ứng dụng AddressBookGiới thiệu Ứng dụng web áp dụng AJAXQuản lý danh bạ trực tuyến Lựa chọn công nghệPHP/MySQLAppserv*Các module của ứng dụngModule adminModule quản lý login/logout cho userModule quản lý danh mụcModule quản lý nhómModule quản lý danh sách mailModule quản lý các chức năng*Áp dụng AJAXPhía server: Sử dụng PHPCơ sở dữ liệu MySQLPhía client:Tạo và sử dụng đối tượng XMLHttpRequestDùng JavaScript để thao tác trên các đối tượng DOMKhông sử dụng thư viện*Kết quả ứng dụng*Ứng dụng SimpleAddressBook*So sánhSau một tác động của người dùngAddressBook: Nạp lại phần trang web bị thay đổi SimpleAddressBook: Nạp lại toàn bộ trang web *Nội dungGiới thiệu công nghệ AJAXCác công nghệ cấu thành AJAXXMLHttpRequest và trao đổi dữ liệu bất đồng bộỨng dụng AddressBookKết luận và hướng phát triển*Kết luậnAJAX - công nghệ chủ chốt mang tính đột pháMục tiêu:Tăng tốc độ duyệt webXóa ranh giới giữa các ứng dụng Web và ứng dụng Desktop*Hướng phát triểnNâ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 AJAXCung cấp phần mềm dưới dạng các dịch vụ Web*Em xin chân thành cảm ơn!*Kỹ thuật lập trình với AJAXPhí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 XMLHttpRequestPhía server: sử dụng các công nghệ phía server .NET J2EE PHP*Khó khăn trong lập trình AJAX và giải phápLậ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ápHạn chế đến mức tối thiểu viết mã phía clientSử dụng các thư viện AJAX trong ứng dụng Web*Giới thiệu một số thư viện.NETAtlasAjax.NETJ2EEJSPTaglibGoogle Web ToolKit (GWT)PHPSajaxGiới thiệu về PHPLà 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, tự động ép kiểu.Tập hàm built_in phong phú, có mã nguồn mở*SAJAX (Simple Ajax) cho PHPSajax 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*