Báo cáo tìm hiểu công nghệ Ajax

Báo cáo tìm hiểu công nghệ Ajax

z TRƯỜNG ĐẠI HỌC TÔN ĐỨC THẮNG 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 Giảng viên hướng dẫn: Sinh viên thực hiện: Trần Phan Thanh Lê Văn Đảo Lớp: Công Nghệ Thông Tin 12150301 TPHCM, 07/04/2014 1 Mục lục LỜI NÓI ĐẦU 3 CHƯƠNG I: TỔNG QUAN VỀ CÔNG NGHỆ AJAX 4 1. Sự xuất hiện của Ajax 4 2. Định nghĩa Ajax, các trình duyệt hỗ trợ Ajax 4 3. Ưu điểm của Ajax so với các ứng dụng web truyền thống 4 4. Các ứng dụng AJAX phổ biến 6 CHƯƠNG II: TÌM HIỂU VỀ CÔNG NGHỆ AJAX 7 1. Đối tượng XMLHttpRequest 7 2. Các phương thức của đối tượng XMLHttpRequest 7 3. Các thuộc tính của đối tượng XMLHttpRequest 9 4. Ajax và PHP 16 CHƯƠNG III: THIẾT KẾ MỘT SỐ TRANG WEB ĐƠN GIẢN SỬ DỤNG CÔNG NGHỆ AJAX 20 1. ASP.NET AJAX Control Toolkit 27 2. jQuery 30 TÀI LIỆU THAM KHẢO 32 2 LỜI NÓI ĐẦU Khác với các phần mềm chạy độc lập ở máy khách (có khả năng tương tác gần như tức thời với người dùng), 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 (HyperText Transport Protocol - Giao thức truyền tải qua các siêu liên kết) trong một mô hình có tên Client/Server. Bất kỳ một tác động nào của người dùng lên ứng dụng Web thông qua trình duyệt đều cần thời gian gửi về Server và sau khi xử lý, Server sẽ trả về những thông tin người dùng mong đợi. Như vậy, độ trễ trong trường hợp này chính là điều mà các ứng dụng Web khó có thể sánh với như các phần mềm chạy trên máy tính đơn lẻ (đặc biệt là trong các ứng dụng như Bản đồ trực tuyến, soạn thảo văn bả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 vì lý do như vậy mà cần phải có một số giải pháp khử độ trễ trên các ứng dụng web. AJAX ra đời đã giải quyết được phần nào vấn đề này. AJAX là sự kết hợp của nhiều công nghệ đã có sẵn như JavaScript, XMLHttpRequest, HTML, CSS,… Nó hỗ trợ việc truyền tải dữ liệu bất đồng bộ, tăng cường khả năng tương tác với server, giúp tăng tốc ứng dụng web. Nội dung của đề tài này sẽ tập trung tìm hiểu tổng quan công nghệ AJAX, và xây dựng một số ứng dụng cơ bản áp dụng công nghệ này. 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 và giúp đỡ chúng em trong quá trình thực hiện đề tài! Sinh viên thực hiện đề tài. Trần Phan Thanh Lê Văn Đảo 3 CHƯƠNG I: TỔNG QUAN VỀ CÔNG NGHỆ AJAX 1. Sự xuất hiện của Ajax Thuật ngữ AJAX xuất hiện đầu tiên vào ngày 18/2/2005 trong một bài báo có tên AJAX : A New Approach to Web Applications của tác giả Jesse James Garrett, công ty AdapativePath. Ông định nghĩa và tóm gọn lại từ cụm từ “Asynchronous JavaScript + CSS + DOM + XMLHttpRequest”. Ngay sau đó thuật ngữ AJAX được phổ biến cực kỳ nhanh chóng trong cộng đồng phát triển Web và cho đến nay nó là một trong những từ khóa được tìm kiếm nhiều nhất trên Internet. 2. Định nghĩa Ajax, các trình duyệt hỗ trợ Ajax Nội dung định nghĩa của Garrett về AJAX trong bài báo của mình như sau: AJAX không phải là một công nghệ. Nó 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. AJAX bao gồm:  Thể hiện Web theo tiêu chuẩn XHTML và CSS;  Nâng cao tính năng động và tương tác bằng DOM (Document Object Model);  Trao đổi và xử lý dữ liệu bằng XML và XSLT;  Truy cập dữ liệu theo kiểu bất đồng bộ (asynchronous) bằng XMLHttpRequest;  Và tất cả các kỹ thuật trên được liên kết lại với nhau bằng JavaScript. Trong các thành phần cấu thành trên, điểm mấu chốt của AJAX nằm ở XMLHttpRequest. Đây là một kỹ thuật do Microsoft khởi xướng và tích hợp lần đầu tiên vào IE5 dưới dạng một ActiveX. Mozilla tích hợp công nghệ này vào Mozilla 1.0/Netscape 6 sau đó (đương nhiên toàn bộ các version sau này của Firefox đều có XMLHttpRequest) và hiện nay đã có trong trình duyệt Safari 1.2 (Apple) và Opera 7 trở lên. Các vấn đề về XMLHttpRequest và cách sử dụng nó trên các trình duyệt khác nhau sẽ được chúng ta quay trở lại ở các phần tiếp theo. Sau đây là một số nét khác biệt cơ bản giữa các ứng dụng Web truyền thống và ứng dụng Web sử dụng AJAX. 3. Ưu điểm của Ajax so với các ứng dụng web truyền thống Trong các ứng dụng Web truyền thống, khi người dùng có một cần thay đổi dữ liệu trên trang Web, yêu cầu thay đổi được gửi về server dưới dạng HTTP request (hay còn gọi postback), server sẽ xử lý yêu cầu này và gửi trả lại trang HTML khác thay thế trang cũ. Qui trình này được mô tả là nhấp-chờ và tải lại (click-wait-and-refresh): ví 4 dụ người dùng sau khi nhấn một nút “Submit” trên trang Web phải chờ cho đến khi server xử lý xong mới có thể tiếp tục công việc. Ngược lại, trong các ứng dụng AJAX, người dùng có thể 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 từng hành động của người dùng sẽ gần như ngay lập tức được hiển thị vào vị trí cần thiết (đáp ứng gần như tức thời) trong khi trang Web không cần phải refresh lại toàn bộ nội dụng. Để tìm hiểu kỹ hơn điều này, ta sẽ xem xét 2 mô hình ứng dụng như [1] đã đề cập, Mô hình cổ điển và Mô hình AJAX-based: Mô hình cổ điển của một ứng dụng Web (hình minh họa được lấy từ bài báo của Garrett) Mô hình ứng dụng Web sử dụng AJAX (theo bài báo của Garrett) 5 Rõ ràng điểm khác biệt là thay vì phải tải cả trang Web thì với AJAX trình duyệt phía người dùng chỉ cần tải về phần của trang Web mà người dùng muốn thay đổi. Điều này giúp cho ứng dụng 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ữ A (Asynchronous) – không đồng bộ – tức là người dùng cứ gửi yêu cầu của mình tới server và quay lại với công việc của mình mà không cần chờ trả lời. Khi nào server xử lý xong yêu cầu của phía người dùng, nó sẽ báo hiệu và người dùng có thể “thu nhận lấy” để thể hiện những thay đổi cần thiết. Vậy tất cả cơ chế này hoạt động thực sự thế nào? AJAX cho phép tạo ra một AJAX Engine nằm giữa giao tiếp này. 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ị. Việc này được thực hiện trên client nên giảm tải rất nhiều cho server, đồng thời người sử dụng cảm thấy kết quả xử lý được hiển thị tức thì mà không cần nạp lại trang. Mặt khác, sự kết hợp của các công nghệ Web như CSS và XHTML làm cho việc trình bày giao diện trang Web tốt hơn nhiều và giảm đáng kể dung lượng trang phải nạp. Đây là những lợi ích hết sức thiết thực mà AJAX đem lại. Chúng ta sẽ xem xét cụ thể các thành phần cấu thành AJAX, nguyên lý hoạt động và việc sử dụng Javascript kết nối chúng trong phần tiếp theo. 4. Các ứng dụng AJAX phổ biến Google Suggest hiển thị các thuật ngữ gợi ý gần như ngay lập tức khi người sử dụng chưa gõ xong từ khóa. Còn với Google Maps, mọi người có thể theo dõi những thay đổi, xê dịch, kéo thả bản đồ như trên môi trường desktop. Google Suggest và Google Maps là hai ví dụ nổi bật về phương pháp ứng dụng web thế hệ mới. Hãng dịch vụ tìm kiếm hàng đầu thế giới đã đầu tư rất nhiều vào việc phát triển AJAX. Hầu như mọi chương trình họ giới thiệu gần đây, từ Orkut, Gmail đến phiên bản thử nghiệm Google Groups, đều là những ứng dụng AJAX. Những dự án trên cho thấy AJAX không phải là một công nghệ quá xa xôi mà đang hiện diện ngay trong thế giới thực, từ mô hình rất đơn giản như Google Suggest đến tinh vi và phức tạp như Google Maps. Tuy vậy, Ajax chưa thể thực hiện tất cả mọi thứ. Những ứng dụng phụ thuộc nhiều vào máy tính cố định như Photoshop của Adobe sẽ không xuất hiện sớm trên trình duyệt. Ngay cả Google cũng phải tạo một phần mềm bản đồ trên desktop (Google Earth) và yêu cầu tải chương trình về để có thể hiển thị hình ảnh 3D và thực hiện một số tính năng 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 sẽ trở nên khó khăn nếu bị gián đoạn. 6 CHƯƠNG II: TÌM HIỂU VỀ CÔNG NGHỆ AJAX 1. Đối tượng XMLHttpRequest Yếu tố then chốt trong công nghệ Ajax là đối tượng XMLHttpRequest Tất cả các trình duyệt ngày nay (IE7+, Firefox, Chrome, Safari, and Opera) đều có một đối tượng được xây dựng sẵn (XMLHttpRequest) hỗ trợ công nghệ này. Đối tượng XMLHttpRequest được sử dụng để trao đổi dữ liệu với server. Với công nghệ này, một phần của trang web sẽ được cập nhật mà không phải tải lại toàn bộ trang. Cú pháp cho việc tạo một đối tượng XMLHttpRequest: xmlhttp=new XMLHttpRequest(); Với những trình duyệt cũ như IE5 và IE6 sử dụng ActiveX Object thì: xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); Do vậy mà để làm việc với tất cả các trình duyệt, bao gồm cả IE5 và IE6, chúng ta kiểm tra phiên bản của trình duyệt rồi mới 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"); } 2. Các phương thức của đối tượng XMLHttpRequest Để gửi một request tới server, chúng ta sử dụng hai phương thức là open() và send() của đối tượng XMLHttpRequest xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); 7 2.1. Phương thức open() Phương thức này đượ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ố Miêu tả method method: có hai loại là GET và POST GET thì đơn giản và nhanh hơn POST, và nó được sử dụng trong hầu hết các trường hợp. Tuy nhiên ta sử dụng POST request khi mà:  Gửi một lượng lớn dữ liệu lên server (POST không giới hạn kích thước dữ liệu)  Gửi đi thông tin trên một form nhập liệu người dùng (POST thì mạnh và bảo mật hơn là GET) url Đặc tả vị trí của file trên server File này có thể là bất kì loại nào, .txt hay .xml hay là một file mã kịch bản .asp hay .php async true : bất đồng bộ false: đồng bộ Để AJAX có thể hoạt động bất đồng bộ, ta phải thiết lập tham số async trong phương thức open() là true: Gửi đi một request một cách bất động bộ là một cải tiến quan trọng cho người phát triển web do nhiều tác vụ thực hiện trên server mất rất nhiều thời gian. Trước khi có AJAX thỡ nú có thể làm cho ứng dụng bị treo hay dừng đột ngột. Với AJAX, ta không phải đợi trả lời từ server , thay vào đó là: • Thực hiện hay những đoạn mó khỏc trong khi đợi response từ server • Giải quyết ngay với response khi mà nú đó ở trạng thái sẵn sàng 2.2. Phương thức send() Phương thức được sử dụng để gửi yêu cầu tới server 8 Cú pháp: send(string) Miêu tả: Tham số Miêu tả string Chuỗi các giá trị truyền lên server chỉ được 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 dữ liệu như một form HTML, ta thêm một HTTP header bằng phương thức setRequestHeader(). Rồi đặc tả dữ liệu muốn gửi đi bằng 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ả setRequestHeader(header,value) Thêm HTTP headers vào request. header: đặc tả tên header value: đặc tả giá trị header 3. Các thuộc tính của đối tượng XMLHttpRequest Để nhận phản hồi từ server, ta sử dụng hai thuộc tính responseText hoặc responseXML của đối tượng XMLHttpRequest Property Description responseText nhận dữ liệu phản hồi là một string responseXML Nhận dữ liệu phản hồi là một tài liệu XML 9 3.1. Thuộc tính responseText Nếu phản hồi từ server không phải là một tài liệu XML, ta sử dụng thuộc tính responseText. Thuộc tính responseText trả về một chuỗi kí tự nhận được từ server. document.getElementById("myDiv").innerHTML=xmlhttp.responseText; Ví dụ: Khi nút được click, hàm changeContent() được kích hoạt với tham số text file.txt , nội dung file text file.txt sẽ được đọc ra và thay thế vào vị trí ô text trên 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 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { 10 [...]... DỤNG CÔNG NGHỆ AJAX 1 Thiết kế thêm, xóa sử dụng Ajax, Mysql và Php Thêm nội dung vào CSDL Cơ sở dữ liệu sau khi thêm 20 Xóa dữ liệu chỉ cận click vào dấu X Kết quả xóa nội dung 21 2 Thiết kế ứng dụng Gợi ý tìm kiếm (Suggestion) sử dụng Ajax, Php và Mysql Khi gõ một từ khóa, các tên sách được gợi ý sẽ hiện ra Khi gõ vào từ khóa Fun 22 CSDL của trang tìm kiếm 23 3 Thiết kế ứng dụng Web Chat sử dụng Ajax, ... TRỢ AJAX TRONG VIỆC THIẾT KẾ WEB ĐỘNG 1 ASP.NET AJAX Control Toolkit 1.1 ASP.NET AJAX Control Toolkit là gì? ASP.NET AJAX Control Toolkit là một dự án mã nguồn mở được xây dựng trên nền tảng Microsoft ASP.NET AJAX framework, đây là nỗ lực lớn giữa Microsoft và cộng đồng sử dụng ASP.NET Ajax để cung cấp một nền tảng vững mạnh với khả năng chỉnh sửa, sử dụng lại, mở rộng cao Với hàng loạt những công. .. mở 27 Trên trình duyệt, gõ vào địa chỉ sau: http://AjaxControlToolkit.CodePlex.com Click vào Download (xem hình 1) để download phiên bản mới nhất của bộ công cụ này Hình 1: Tải về AJAX Control Toolkit Sau khi tải xong, ta được một 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 một AJAX Control Toolkit tab vào trong toolbox Thực hiện... Với hàng loạt những công cụ và cũng như một loạt những công cụ cho phép dùng từ cửa sổ công cụ trong Viusal Studio, AACT cho phép tạo ra sự tương tác mạnh mẽ trong môi trường web 1.2 Download và cài đặt AJAX Control Toolkit AJAX Control Toolkit chứa hơn 30 điều khiển cho phép bạn tạo cho trang web của bạn tính tương tác mạnh mẽ và dễ dàng nhất AJAX Control Toolkit được lưu trữ trên website CodePlex.com,... hình 2) • Nhập vào tên cho tab mới là AJAX Control Toolkit Hình 2: Thêm một tab mới Tiếp theo, ta sẽ thêm các điều khiển AJAX Control Toolkit vào trong tab mới này Ta thực hiện theo các bước sau: • Chuột phải vào phía dưới tab AJAX Control Toolkit và lựa chọn menu Choose Items (xem hình 3) • Trỏ đến vị trí đã giải nén gói AJAX Control Toolkit và thao tác chọn file AjaxControlToolkit.dll Hình 3: Chọn... href="http://jquery.com/">jQuery 31 TÀI LIỆU THAM KHẢO 1 Ajax: A New Approach to Web Applications by Jesse James Garrett February 18, 2005 2 W3resource.com http://www.w3resource.com /ajax/ working-with-PHP-and-MySQL.php 3 W3Schools Online Web Tutorials http://www.w3schools.com /ajax/ default.asp 4 Tutorialzine.com http://tutorialzine.com/2010/10 /ajax- web-chat-css-jquery/ 32 ... (xmlhttp.readyState==4 && xmlhttp.status==200) { 15 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } 4 Ajax và PHP Ajax có thể phối hợp với các ngôn ngữ kịch bản khác để tăng tính tương tác cho trang web Ví dụ như PHP, ASP, hay là JSP Sau đây là một ví dụ về việc sử dụng Ajax phối hợp với PHP Chú ý là site này bắt buộc phải chạy trên webserver, nếu sử dụng WampServer hay Appserv, hãy copy... các bước trờn thỡ cỏc control sẽ xuất hiện trong toolbox của bạn (xem hình 4) Hình 04: AJAX Control Toolkit trong hộp toolbox 2 jQuery 2.1 jQuery là gì? jQuery là thư viện JavaScript, hay còn gọi là JavaScript Framework, hỗ trợ bạn trong việc xử lý HTML, xử lý các sự kiện trong trang HTML, tạo các hiệu ứng đẹp, xử lý Ajax nhanh và ngắn gọn hơn cho ứng dụng web của bạn! 2.2 Download và cài đặt jQuery Để... ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET", "ajax_ test3.php?q="+str,true); xmlhttp.send(); } Mã kịch bản trong file ajax_ test3.php Empire Burlesque Bob Dylan USA Columbia . 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 Giảng viên hướng dẫn: Sinh viên thực hiện: Trần Phan Thanh Lê Văn Đảo Lớp: Công. với Internet, khiến công việc trên sẽ trở nên khó khăn nếu bị gián đoạn. 6 CHƯƠNG II: TÌM HIỂU VỀ CÔNG NGHỆ AJAX 1. Đối tượng XMLHttpRequest Yếu tố then chốt trong công nghệ Ajax là đối tượng. được tìm kiếm nhiều nhất trên Internet. 2. Định nghĩa Ajax, các trình duyệt hỗ trợ Ajax Nội dung định nghĩa của Garrett về AJAX trong bài báo của mình như sau: AJAX không phải là một công nghệ.