Tìm hiểu công nghệ ajax và ứng dụng của ajax trong thiết kế web động

TRƯỜNG ĐẠI HỌC KINH TẾ QUỐC DÂN BỘ MÔN CÔNG NGHỆ THÔNG TIN BÁO CÁO ĐỀ ÁN MÔN HỌC (Chuyên ngành Cơng Nghệ Thơng Tin) Đề tài: TÌM HIỂU CƠNG NGHỆ AJAX VÀ ỨNG DỤNG CỦA AJAX TRONG THIẾT KẾ WEB ĐỘNG Giảng viên hướng dẫn: Phạm Minh Hoàn Sinh viên thực hiện: Đỗ Anh Việt Lớp: Công Nghệ Thông Tin K49A Hà nội, 06/8/2010 Mục lục LỜI NÓI ĐẦU CHƯƠNG I: TỔNG QUAN VỀ CÔNG NGHỆ AJAX Sự xuất Ajax Định nghĩa Ajax, trình duyệt hỗ trợ Ajax Ưu điểm Ajax so với ứng dụng web truyền thống Các ứng dụng AJAX phổ biến CHƯƠNG II: TÌM HIỂU VỀ CƠNG NGHỆ AJAX Đối tượng XMLHttpRequest Các phương thức đối tượng XMLHttpRequest7 Các thuộc tính đối tượng XMLHttpRequest Ajax PHP 16 CHƯƠNG III: THIẾT KẾ MỘT SỐ TRANG WEB ĐƠN GIẢN SỬ DỤNG CÔNG NGHỆ AJAX 20 Thiết kế ứng dụng từ điển trực tuyến với công nghệ AJAX Thiết kế ứng dụng Gợi ý tìm kiếm (Suggestion) 20 23 CHƯƠNG IV:TỔNG KẾT, ĐÁNH GIÁ 25 PHỤ MỤC: GIỚI THIỆU CÁC TOOLKIT HỖ TRỢ AJAX TRONG VIỆC THIẾT KẾ WEB ĐỘNG .29 ASP.NET AJAX Control Toolkit 29 jQuery 32 TÀI LIỆU THAM KHẢO 41 LỜI NÓI ĐẦU Khác với phần mềm chạy độc lập máy khách (có khả tương tác gần tức thời với người dùng), ứng dụng Web bị giới hạn nguyên lý hoạt động nó: tất giao dịch phải thực thông qua phương thức giao dịch HTTP (HyperText Transport Protocol - Giao thức truyền tải qua siêu liên kết) mơ hình có tên Client/Server Bất kỳ tác động người dùng lên ứng dụng Web thơng qua trình duyệt cần thời gian gửi Server sau xử lý, Server trả thông tin người dùng mong đợi Như vậy, độ trễ trường hợp điều mà ứng dụng Web khó sánh với phần mềm chạy máy tính đơn lẻ (đặc biệt ứng dụng Bản đồ trực tuyến, soạn thảo văn trực tuyến, sát hạch trực tuyến có tính thời gian làm bài…) Chính lý mà cần phải có số giải pháp khử độ trễ ứng dụng web AJAX đời giải phần vấn đề AJAX kết hợp nhiều công nghệ có sẵn JavaScript, XMLHttpRequest, HTML, CSS,… Nó hỗ trợ việc truyền tải liệu bất đồng bộ, tăng cường khả tương tác với server, giúp tăng tốc ứng dụng web Nội dung đề tài tập trung tìm hiểu tổng quan cơng nghệ AJAX, xây dựng số ứng dụng áp dụng công nghệ Xin chân thành cảm ơn thầy giáo Phạm Minh Hồn nhiệt tình hướng dẫn giúp đỡ chúng em trình thực đề tài! Sinh viên thực đề tài Đỗ Anh Việt CHƯƠNG I: TỔNG QUAN VỀ CÔNG NGHỆ AJAX Sự xuất Ajax Thuật ngữ AJAX xuất vào ngày 18/2/2005 báo có tên AJAX : A New Approach to Web Applications tác giả Jesse James Garrett, cơng ty AdapativePath Ơng định nghĩa tóm gọn lại từ cụm từ “Asynchronous JavaScript + CSS + DOM + XMLHttpRequest” Ngay sau thuật ngữ AJAX phổ biến nhanh chóng cộng đồng phát triển Web từ khóa tìm kiếm nhiều Internet Định nghĩa Ajax, trình duyệt hỗ trợ Ajax Nội dung định nghĩa Garrett AJAX báo sau: AJAX khơng phải cơng nghệ Nó tập hợp nhiều cơng nghệ với mạnh riêng để tạo thành sức mạnh AJAX bao gồm:  Thể Web theo tiêu chuẩn XHTML CSS;  Nâng cao tính động tương tác DOM (Document Object Model);  Trao đổi xử lý liệu XML XSLT;  Truy cập liệu theo kiểu bất đồng (asynchronous) XMLHttpRequest;  Và tất kỹ thuật liên kết lại với JavaScript Trong thành phần cấu thành trên, điểm mấu chốt AJAX nằm XMLHttpRequest Đây kỹ thuật Microsoft khởi xướng tích hợp lần vào IE5 dạng ActiveX Mozilla tích hợp cơng nghệ vào Mozilla 1.0/Netscape sau (đương nhiên tồn version sau Firefox có XMLHttpRequest) có trình duyệt Safari 1.2 (Apple) Opera trở lên Các vấn đề XMLHttpRequest cách sử dụng trình duyệt khác quay trở lại phần Sau số nét khác biệt ứng dụng Web truyền thống ứng dụng Web sử dụng AJAX Ưu điểm Ajax so với ứng dụng web truyền thống Trong ứng dụng Web truyền thống, người dùng có cần thay đổi liệu trang Web, yêu cầu thay đổi gửi server dạng HTTP request (hay gọi postback), server xử lý yêu cầu gửi trả lại trang HTML khác thay trang cũ Qui trình mơ tả nhấp-chờ tải lại (click-wait-and-refresh): ví dụ người dùng sau nhấn nút “Submit” trang Web phải chờ server xử lý xong tiếp tục công việc Ngược lại, ứng dụng AJAX, người dùng nhấn chuột, gõ phím liên tục mà không cần chờ đợi Nội dung tương ứng với hành động người dùng gần hiển thị vào vị trí cần thiết (đáp ứng gần tức thời) trang Web không cần phải refresh lại tồn nội dụng Để tìm hiểu kỹ điều này, ta xem xét mơ hình ứng dụng [1] đề cập, Mơ hình cổ điển Mơ hình AJAX-based: Mơ hình cổ điển ứng dụng Web (hình minh họa lấy từ báo Garrett) Mơ hình ứng dụng Web sử dụng AJAX (theo báo Garrett) Rõ ràng điểm khác biệt thay phải tải trang Web với AJAX trình duyệt phía người dùng cần tải phần trang Web mà người dùng muốn thay đổi Điều giúp cho ứng dụng Web phản hồi nhanh hơn, thơng minh Ngồi ra, điểm đặc biệt quan trọng công nghệ AJAX nằm chữ A (Asynchronous) – không đồng – tức người dùng gửi yêu cầu tới server quay lại với cơng việc mà không cần chờ trả lời Khi server xử lý xong u cầu phía người dùng, báo hiệu người dùng “thu nhận lấy” để thể thay đổi cần thiết Vậy tất chế hoạt động thực nào? AJAX cho phép tạo AJAX Engine nằm giao tiếp Khi đó, yêu cầu gửi (resquest) nhận (response) AJAX Engine thực Thay trả liệu dạng HTML CSS trực tiếp cho trình duyệt, Web server gửi trả liệu dạng XML AJAX Engine tiếp nhận, phân tách chuyển hóa thành XHTML + CSS cho trình duyệt hiển thị Việc thực client nên giảm tải nhiều cho server, đồng thời người sử dụng cảm thấy kết xử lý hiển thị tức mà khơng cần nạp lại trang Mặt khác, kết hợp công nghệ Web CSS XHTML làm cho việc trình bày giao diện trang Web tốt nhiều giảm đáng kể dung lượng trang phải nạp Đây lợi ích thiết thực mà AJAX đem lại Chúng ta xem xét cụ thể thành phần cấu thành AJAX, nguyên lý hoạt động việc sử dụng Javascript kết nối chúng phần Các ứng dụng AJAX phổ biến Google Suggest hiển thị thuật ngữ gợi ý gần người sử dụng chưa gõ xong từ khóa Cịn với Google Maps, người theo dõi thay đổi, xê dịch, kéo thả đồ môi trường desktop Google Suggest Google Maps hai ví dụ bật phương pháp ứng dụng web hệ Hãng dịch vụ tìm kiếm hàng đầu giới đầu tư nhiều vào việc phát triển AJAX Hầu chương trình họ giới thiệu gần đây, từ Orkut, Gmail đến phiên thử nghiệm Google Groups, ứng dụng AJAX Những dự án cho thấy AJAX công nghệ xa xôi mà diện giới thực, từ mơ hình đơn giản Google Suggest đến tinh vi phức tạp Google Maps Tuy vậy, Ajax chưa thể thực tất thứ Những ứng dụng phụ thuộc nhiều vào máy tính cố định Photoshop Adobe không xuất sớm trình duyệt Ngay Google phải tạo phần mềm đồ desktop (Google Earth) yêu cầu tải chương trình để hiển thị hình ảnh 3D thực số tính cải tiến khác Hơn nữa, ứng dụng web đòi hỏi phải liên tục kết nối với Internet, khiến công việc trở nên khó khăn bị gián đoạn CHƯƠNG II: TÌM HIỂU VỀ CƠNG NGHỆ AJAX Đối tượng XMLHttpRequest Yếu tố then chốt công nghệ Ajax đối tượng XMLHttpRequest Tất trình duyệt ngày (IE7+, Firefox, Chrome, Safari, and Opera) có đối tượng xây dựng sẵn (XMLHttpRequest) hỗ trợ công nghệ Đối tượng XMLHttpRequest sử dụng để trao đổi liệu với server Với công nghệ này, phần trang web cập nhật mà tải lại toàn trang Cú pháp cho việc tạo đối tượng XMLHttpRequest: xmlhttp=new XMLHttpRequest(); Với trình duyệt cũ IE5 IE6 sử dụng ActiveX Object thì: xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); Do mà để làm việc với tất trình duyệt, bao gồm IE5 IE6, kiểm tra phiên trình duyệt tạo đối tượng XMLHttpRequest (hay ActiveXObject) if (window.XMLHttpRequest)   {// code for IE7+, Firefox, Chrome, Opera, Safari   xmlhttp=new XMLHttpRequest();  } else   {// code for IE6, IE5   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  } Các phương thức đối tượng XMLHttpRequest Để gửi request tới server, sử dụng hai phương thức open() send() đối tượng XMLHttpRequest xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); 2.1 Phương thức open() Phương thức sử dụng để thiết lập kết nối tới server Cú pháp: open(method,url,async) Miêu tả: Tham số method Miêu tả method: có hai loại GET POST GET đơn giản nhanh POST, sử dụng hầu hết trường hợp Tuy nhiên ta sử dụng POST request mà:  Gửi lượng lớn liệu lên server (POST không giới hạn kích thước liệu)  Gửi thơng tin form nhập liệu người dùng (POST mạnh bảo mật GET) url Đặc tả vị trí file server File loại nào, txt hay xml file mã kịch asp hay php async true : bất đồng false: đồng Để AJAX hoạt động bất đồng bộ, ta phải thiết lập tham số async phương thức open() true: Gửi request cách bất động cải tiến quan trọng cho người phát triển web nhiều tác vụ thực server nhiều thời gian Trước có AJAX làm cho ứng dụng bị treo hay dừng đột ngột Với AJAX, ta đợi trả lời từ server , thay vào là:   Thực hay đoạn mã khác đợi response từ server Giải với response mà trạng thái sẵn sàng 2.2 Phương thức send() Phương thức sử dụng để gửi yêu cầu tới server Cú pháp: send(string) Miêu tả: Tham số string Miêu tả Chuỗi giá trị truyền lên server sử dụng cho request dạng POST Một GET request đơn giản: xmlhttp.open("GET","demo_get.asp",true); xmlhttp.send(); Một POST request đơn giản: xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send(); Để POST liệu form HTML, ta thêm HTTP header phương thức setRequestHeader() Rồi đặc tả liệu muốn gửi phương thức send(): xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford"); Phương thức Miêu tả Thêm HTTP headers vào request setRequestHeader(header,value) header: đặc tả tên header value: đặc tả giá trị header Các thuộc tính đối tượng XMLHttpRequest Để nhận phản hồi từ server, ta sử dụng hai thuộc tính responseText responseXML đối tượng XMLHttpRequest Property Description responseText nhận liệu phản hồi string responseXML Nhận liệu phản hồi tài liệu XML 3.1 Thuộc tính responseText Nếu phản hồi từ server tài liệu XML, ta sử dụng thuộc tính responseText Thuộc tính responseText trả chuỗi kí tự nhận từ server document.getElementById("myDiv").innerHTML=xmlhttp.responseText; Ví dụ: Khi nút click, hàm changeContent() kích hoạt với tham số text file.txt , nội dung file text file.txt đọc thay vào vị trí ô text trình duyệt Hàm changeContent() function loadXMLDoc(url) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 10 10 11 House Show tổng thời gian tốc độ trung bình tỉ lệ chênh lệch tốc độ 2372 3682 41674 3788.5 2.50 1560 687 16665 1515 Thử nghiệm trình duyệt Firefox 3.6 10 11 Tra từ About Black Blue Class Control Drop Echip Full Grown House Show tổng thời gian tốc độ trung bình tỉ lệ chênh lệch tốc độ Không sử dụng Ajax Thời gian (ms) 3712 3227 4172 2162 3383 3085 3205 2714 2354 2409 5300 35723 3247.5 1.51 Có sử dụng Cơng nghệ AJAX Thời gian (ms) 2940 2761 1394 2669 1129 466 2695 3096 3040 1506 1910 23606 2146 Trên bảng tổng kết thời gian tra từ hai trang web, ta thấy rằng, website sử dụng cơng nghệ AJAX có tốc độ nhanh hẳn website không ứng dụng công nghệ Trên trình duyệt IE8 website AJAX có tốc độ nhanh 2.5 lần (*) Trên trình duyệt Firefox 3.6 tốc độ nhanh 1.5 lần (*) (*) mang tính ước lượng, khác máy tính khác Điều làm giảm thời gian người dùng phải chờ đợi, giúp tăng tốc ứng dụng web, tiết kiệm chi phí thơng lượng đường truyền cho người sử dụng Lưu ý: 27  Dữ liệu thời gian có bảng lấy sau thực việc tra từ site  Bạn truy cập hai website địa http://deancnttk49a.co.cc để tự kiểm tra thời gian thực tra từ  Thời gian tra từ hai website ngẫu nhiên khơng giống lần tra, điều phụ thuộc vào tốc độ đường truyền cấu hình máy tính bạn 28 PHỤ MỤC: GIỚI THIỆU CÁC TOOLKIT HỖ TRỢ AJAX TRONG VIỆC THIẾT KẾ WEB ĐỘNG ASP.NET AJAX Control Toolkit 1.1 ASP.NET AJAX Control Toolkit gì? ASP.NET AJAX Control Toolkit dự án mã nguồn mở xây dựng tảng Microsoft ASP.NET AJAX framework, nỗ lực lớn Microsoft cộng đồng sử dụng ASP.NET Ajax để cung cấp tảng vững mạnh với khả chỉnh sửa, sử dụng lại, mở rộng cao Với hàng loạt công cụ loạt công cụ cho phép dùng từ cửa sổ công cụ Viusal Studio, AACT cho phép tạo tương tác mạnh mẽ môi trường web 1.2 Download cài đặt AJAX Control Toolkit AJAX Control Toolkit chứa 30 điều khiển cho phép bạn tạo cho trang web bạn tính tương tác mạnh mẽ dễ dàng AJAX Control Toolkit lưu trữ website CodePlex.com, website Microsoft dành cho dự án mã nguồn mở Trên trình duyệt, gõ vào địa sau: http://AjaxControlToolkit.CodePlex.com Click vào Download (xem hình 1) để download phiên cơng cụ 29 Hình 1: Tải AJAX Control Toolkit Sau tải xong, ta file nén dạng zip là: AjaxControlToolkit.Binary.NET35.zip Thêm AJAX Control Toolkit vào Toolbox Đầu tiên, ta thêm AJAX Control Toolkit tab vào toolbox Thực theo bước sau: 30  Tạo project ASP.NET Website cách click vào menu File, chọn New Website Click đúp chuột vào Default.aspx cửa sổ Solution Explorer để mở cửa sổ soạn thảo  Chuột phải vào phía toolbox tab General chọn Add Tab (xem hình 2)  Nhập vào tên cho tab AJAX Control Toolkit Hình 2: Thêm tab Tiếp theo, ta thêm điều khiển AJAX Control Toolkit vào tab Ta thực theo bước sau:  Chuột phải vào phía tab AJAX Control Toolkit lựa chọn menu Choose Items (xem hình 3)  Trỏ đến vị trí giải nén gói AJAX Control Toolkit thao tác chọn file AjaxControlToolkit.dll Hình 3: Chọn control vào toolbox 31 Khi hoàn thành bước control xuất toolbox bạn (xem hình 4) Hình 04: AJAX Control Toolkit hộp toolbox jQuery 2.1 jQuery gì? jQuery thư viện JavaScript, hay gọi JavaScript Framework, hỗ trợ bạn việc xử lý HTML, xử lý kiện trang HTML, tạo hiệu ứng đẹp, xử lý Ajax nhanh ngắn gọn cho ứng dụng web bạn! 2.2 Download cài đặt jQuery Để dùng jQuery trước tiên bạn phải truy cập vào trang web http://jquery.com/ Và click vào Download để tải gói jQuery, sau tải xong ta file jquery.js 32 Copy file vào thư mục chứa file html bạn Trong phần mã html, ta thêm thẻ trỏ đến gói file jquery.js Đoạn mã javascript sử dụng jQuery ta viết tiếp vào thẻ // đoạn mã bạn jQuery 33 2.3 Một số ứng dụng jQuery toolkit: 2.3.1 Sử dụng jQuery kiểm tra ô text box form Đăng nhập 34 Code: jQuery(function() { // show a simple loading indicator var loader = jQuery('') css({position: "relative", top: "1em", left: "25em"}) appendTo("body") hide(); jQuery().ajaxStart(function() { loader.show(); }).ajaxStop(function() { loader.hide(); }).ajaxError(function(a, b, e) { throw e; }); var v = jQuery("#form").validate({ submitHandler: function(form) { jQuery(form).ajaxSubmit({ target: "#result" }); } }); jQuery("#reset").click(function() { v.resetForm(); }); }); 35 2.3.2 Sử dụng jQuery kiểm tra ô text box form Đăng kí 36 Code: pre { text-align: left; } $(document).ready(function() { // validate signup form on keyup and submit var validator = $("#signupform").validate({ rules: { firstname: "required", lastname: "required", username: { required: true, minlength: 2, remote: "users.php" }, password: { required: true, minlength: }, password_confirm: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true, remote: "emails.php" }, dateformat: "required", terms: "required" }, messages: { firstname: "Enter your firstname", lastname: "Enter your lastname", username: { required: "Enter a username", minlength: jQuery.format("Enter at least {0} characters"), remote: jQuery.format("{0} is already in use") }, password: { required: "Provide a password", rangelength: jQuery.format("Enter at least {0} characters") }, password_confirm: { required: "Repeat your password", minlength: jQuery.format("Enter at least {0} characters"), equalTo: "Enter the same password as above" 37 }, email: { required: "Please enter a valid email address", minlength: "Please enter a valid email address", remote: jQuery.format("{0} is already in use") }, dateformat: "Choose your preferred dateformat", terms: " " }, // the errorPlacement has to take the table layout into account errorPlacement: function(error, element) { if ( element.is(":radio") ) error.appendTo( element.parent().next().next() ); else if ( element.is(":checkbox") ) error.appendTo ( element.next() ); else error.appendTo( element.parent().next() ); }, // specifying a submitHandler prevents the default submit, good for the demo submitHandler: function() { alert("submitted!"); }, // set this class to error-labels to indicate valid fields success: function(label) { // set   as text for IE label.html(" ").addClass("checked"); } }); // propose username by combining first- and lastname $("#username").focus(function() { var firstname = $("#firstname").val(); var lastname = $("#lastname").val(); if(firstname && lastname && !this.value) { this.value = firstname + "." + lastname; } }); }); 38 2.3 Sử dụng jQuery lọc kí tự định trước 39 Code: $('.vcode').click(function(){$(this).next().toggle('slow'); return false;}); $('.sample1').alphanumeric(); $('.sample2').alphanumeric({allow:"., "}); $('.sample3').alpha({nocaps:true}); $('.sample4').numeric(); $('.sample5').numeric({allow:"."}); $('.sample6').alphanumeric({ichars:'.1a'}); 40 TÀI LIỆU THAM KHẢO Ajax: A New Approach to Web Applications by Jesse James Garrett February 18, 2005 W3Schools Online Web Tutorials http://www.w3schools.com/ajax/default.asp 41