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 .4 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 4 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 XMLHttpRequest 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 20 Thiết kế ứng dụng Gợi ý tìm kiếm (Suggestion) 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 ngun 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 Hoà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 yê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à khơng phải tải lại tồ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 responseXML nhận liệu phản hồi string 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 khơng phải 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