Bài thuyết trình môn ngôn ngữ lập trình - chủ đề: AJAX

BÀI THUYẾT TRÌNH MÔN NGÔN NGỮ LẬP TRÌNH CHỦ ĐỀ: AJAX NHÓM THUYẾT TRÌNH: TẠ HOÀNG DUYÊN ANH PHẠM VĂN HiỆP NGUYỄN THANH HOÀNG Công nghệ Ajax Mục lục Giới thiệu AJAX THẾ MẠNH TRONG AJAX Công nghệ trong Ajax CSS Javascript DOM XML XMLHttpRequest Hạn chế trong Ajax GIỚI THIỆU HOÀN CẢNH RA ĐỜI: Tại sao Ajax được xem là “cứu tinh” của các ứng dụng web? Khi internet bùng nổ người ta nghĩ các ứng dụng web có thể thay thế các phần mềm chạy trên máy client?!. GIỚI THIỆU *Sự thật: Khác với phần mềm ở máy khách(có khả năng tương tác gần như vô tận), các ứng dụng Web bị giới hạn bởi chính nguyên lý hoạt động của nó: tất cả các giao dịch phải thực hiện thông qua phương thức giao dịch HTTP(Giao thức truyền tải qua các siêu liên kết) Vd: Thùng thư Y!ahoo mail: Khi xóa các mail đã đọc ->Yahoo sẽ gửi danh sách mail cần xóa và mã lệnh qua siêu liên kết tới server->yêu cầu server xóa->gửi trả lại trang mới->trình duyệt cập nhật lại.=>mất thời gian nhiều->nảy sinh Ajax. Mô hình tương tác trong một ứng dụng Web truyền thống: This image cannot currently be displayed. GIỚI THIỆU Giới thiệu AJAX I.GIỚI THIỆU AJAX ( "Asynchronous JavaScript and XML" - nghĩa là "JavaScript và XML không đồng bộ") là một tập hợp các công nghệ phát triển web được sử dụng để tạo các ứng dụng web động hay các ứng dụng giàu tính Internet (rich Internet application). Từ Ajax được ông Jesse James Garrett đưa ra và dùng lần đầu tiên vào tháng 2 -2005. Giới thiệu AJAX Ajax bao gồm: Thể hiện web theo tiêu chuẩn XHTML và CSS, các chuẩn của W3C, được Firefox (Mozilla), Safari (Apple), Opera, Netscape 8.0 (nhân Firefox) hỗ trợ rất tốt. Mô hình DOM (Document Object Model), được thực hiện thông qua JavaScript, nhằm hiển thị thông tin động và tương tác với những thông tin được hiển thị Giới thiệu AJAX  Đối tượng XMLHttpRequest để trao đổi dữ liệu một cách không đồng bộ với máy chủ web.  Trao đổi và xử lý dữ liệu bằng XML và XSLT; một chuẩn của W3C.  Và tất cả các công nghệ trên được liên kết lại với nhau bằng JavaScript. Thế mạnh Ajax Ajax-công nghệ kết hợp hai tính năng mạnh của JavaScript được các nhà phát triển đánh giá rất cao: • Gửi yêu cầu (request) đến server • Phân tách và làm việc với XML Các ứng dụng Ajax xoay quanh một tính năng có tên là XMLHttpRequest Thế mạnh Ajax Thế mạnh Ajax • Ajax cho phép tạo ra một Ajax Engine nằm giữa giao tiếp client-server. Khi đó, các yêu cầu gửi resquest và nhận response do Ajax Engine thực hiện. Thay vì trả dữ liệu dưới dạng HTML và CSS trực tiếp cho trình duyệt, web server có thể gửi trả dữ liệu dạng XML và Ajax Engine sẽ tiếp nhận, phân tách và chuyển hóa thành XHTML + CSS cho trình duyệt hiển thị. Thế mạnh Ajax So sánh ứng dụng web truyền thống (trái) với AJAX Adaptive Path Thế mạnh Ajax Mô hình tương tác dùng ứng dụng web Ajax This image cannot currently be displayed. Thế mạnh Ajax • Nhận xét:Rõ ràng điểm khác biệt là thay vì phải tải cả trang web thì với AJAX ta chỉ cần tải về phần của trang Web muốn thay đổi. Điều này giúp cho ứng dụng của web phản hồi nhanh hơn, thông minh hơn. Ngoài ra, điểm đặc biệt quan trọng trong công nghệ Ajax nằm ở chỗ Asynchronous - bất đồng bộ - tức là gửi yêu cầu của mình tới server và tiếp tục thực thi tác vụ hiện tại mà không cần chờ trả lời. Khi nào server xử lý xong yêu cầu, nó sẽ báo hiệu và ta có thể đón để thể hiện những thay đổi cần thiết. www.thangcanhdep.com www.live.com Từ điển Công nghệ trong Ajax-1 Cascading Style Sheet – CSS: Tạm dịch là bảng kiểu xếp chồng - là một phần không thể thiếu trong thiết kế Web, nó được dùng rất nhiều trong các ứng dụng Web truyền thống cũng như trong Ajax. Giúp cho các thành phần định dạng trực quan như màu sắc, lề, hình nền, tính trong suốt, kích cỡ, stylesheet có thể xác định cách mà các phần tử được bố trí quan hệ với các phần tử khác và tương tác với người dùng, cho phép các hiệu ứng khá mạnh mẽ. Cú pháp cơ bản của CSS Gồm 3 thành phần: • Thành phần lựa chọn (thường là một thẻ HTML) (Selector) • Thuộc tính (Property) • Giá trị (Value) VD: Selector { Property1: Value1; Property2: Value2; } Công nghệ trong Ajax  Javascript: Là một ngôn ngữ lập trình đa năng, tương đối giống C. JavaScript được biết dưới dạng một ngôn ngữ có kiểu tự do, thông dịch, ngôn ngữ kịch bản đa năng. Vd:Ví dụ, đoạn mã sau là hợp lệ: PHP Code: var x=3.1415926; x='pi'; Công nghệ trong Ajax-2 Document Object Model-DOM Giúp phân tích một tài liệu (một trang web chẳng hạn) phục vụ cho cơ chế của JavaScript. Sử dụng DOM, cấu trúc của tài liệu có thể được phân rã theo cấu trúc cây và thao tác theo các nút. Trong ứng dụng AJAX, sự thay đổi giao diện người dùng chủ yếu được tạo ra bởi DOM. Công nghệ trong Ajax-3 Các thẻ HTML được tổ chức theo cấu trúc cây. Gốc là thẻ , để biểu diễn tài liệu. Thẻ biểu diễn phần thân của tài liệu. Trong thân tài liệu có các bảng, paragraph, list, các loại thẻ khác. JavaScript làm việc với nút gốc của trang web hiện thời qua một biến toàn cục gọi là document, biến này là điểm bắt đầu của mọi thao tác trên DOM . Vd.doc Công nghệ trong Ajax XML-eXtensible Markup Language Năm 1996 Word Wide Web Consortium (W3C) xây dựng một ngôn ngữ được gọi là XML () – ngôn ngữ đánh dấu mở rộng. Công nghệ trong Ajax-4 Các đặc điểm của XML • XML tương thích với SGML-Standard Generalized Markup Language • Dễ dàng viết được những chương trình xử lý tài liệu XML • Tài liệu XML dễ đọc và có tính hợp lý cao • XML được xây dựng với sự giảm thiểu những thuộc tính tùy chọn • XML dễ dàng được sử dụng trên Internet • XML hỗ trợ nhiều ứng dụng • Không đặt nặng tính hình thức trong nội dung thẻ đánh dấu XML Công nghệ trong Ajax Cấu trúc một tài liệu XML Tài liệu XML chỉ chứa đựng dữ liệu và cách lưu trữ dữ liệu mà không hề đề cập tới cách thức trình bày dữ liệu, chứa những đặc tả về cấu trúc dữ liệu . Mỗi cấu trúc gồm nhiều phần tử (element), mỗi thành phần được bắt đầu với một thẻ bắt đầu (Start–tag) và kết thúc với một thẻ kết thúc (End–tag). Giữa Start–tag và End–tag là nội dung của phần tử này. Nội dung có thể bao gồm dữ liệu văn bản hay có thể là một phần tử khác Công nghệ trong Ajax Vd : F10 Shimano Calcutta 47.76 F20 Bantam Lexica 49.99 Công nghệ trong Ajax Đối tượng XMLHttpRequest Ứng dụng web truyền thống đều phải tái nạp toàn bộ trang web khi gửi yêu cầu đến server ->sự ngắt quãng trong công việc. Vì thế yêu cầu đặt ra là làm cho các request của server không đồng bộ và người dùng vẫn có thể làm việc trong khi đợi tín hiệu trả lời từ server. Trước tiên cần tạo một đối tượng XMLHttpRequest bằng JavaScript trước khi sử dụng đối tượng này để gửi request và xử lý các response. XMLHttpRequest chưa là chuẩn vì thế phải dùng JavaScript theo nhiều cách cho mỗi trình duyệt khác nhau để tạo một thể hiện của XMLHttpRequest. Đoạn mã JavaScript sau dễ dàng tạo ra các thể hiện của đối tượng XMLHttpRequest mà không quan tâm tới loại trình duyệt nào: Công nghệ trong Ajax-5 PHP Code: var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } Trước tiên, tạo một biến toàn cục tên là xmlHttp để lưu trữ một tham chiếu đến đối tượng. Phương thức createXMLHttpRequest thực hiện việc tạo một thể hiện của XMLHttpRequest Window.ActiveXObject sẽ trả về một biến kiểu object hay giá trị null, tương đương với điều kiện true hay false của câu lệnh if Công nghệ trong Ajax Sự tương tác: Hình sau cho thấy mô hình tương tác chuẩn trong một ứng dụng Ajax Công nghệ trong Ajax Hàm callback kiểm tra thuộc tính readyState trên đối tượng XMLHttpRequest Và xem xét mã trạng thái trả về từ server. Remote Scripting: Về cơ bản, remote scripting là một loại lời gọi các thủ tục từ xa, sự tương tác với server vẫn như các ứng dụng Web thông thường, nhưng không tái nạp (refresh) toàn bộ trang web. Chỉ với AJAX, mới có thể sử dụng công nghệ bất kỳ phía server để có thể nhận các request, xử lí chúng và trả về kết quả. Với mỗi công nghệ phía server, có một số lựa chọn cho phía client để thực hiện remote scripting. Công nghệ trong Ajax Có thể nhúng vào các đoạn Flash, Java applet, hay các ActiveX vào ứng dụng Microsoft có giải pháp riêng về remote scripting, được gọi là Microsoft Remote Scripting (MSRS) Vd: đọc thêm RemoteScripting Công nghệ trong Ajax Vấn đề bảo mật: Đối tượng XMLHttpRequest được xử lí bảo mật theo mô hình “sandbox” của trình duyệt. Sức mạnh của phương pháp bảo mật giới hạn này tùy thuộc vào từng trình duyệt Vd: Internet Explorer hiển thị một cảnh báo tình trạng, nguy cơ không an toàn có thể tồn tại và cho phép người dùng lựa chọn có tiếp tục với request đó nữa hay không Firefox sẽ dừng request lại và hiển thị thông điệp lỗi trên JavaScript Công nghệ trong Ajax Hạn chế của Ajax: Các trang web động không được ghi vào bộ lưu lịch sử lướt web của trình duyệt->nút mất tác dụng->giải pháp khắc phục?!. Người dùng có trình duyệt không hỗ trợ Ajax, JavaScript hay đối tượng XMLHttp được yêu cầu=>Ko sử dụng được Ajax. Công nghệ mới có thể mở ra cách thức tấn công mới!?. Công nghệ trong Ajax-6 Kết Thúc Tham khảo và thu thập từ nhiều nguồn: vi.wikipedia.org/wiki Diễn đàn tin học Internet