zunia.vn

Tuyển sinh 2024 dành cho Gen-Z

zunia.vn

» Công Nghệ Thông Tin

» Kỹ thuật lập trình

AJAX – Tương lai của của ứng dụng Web

Chia sẻ: Nguyen Bao Ngoc | Ngày: | Loại File: PDF | Số trang:116

Báo xấu

167
lượt xem 51
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Tham khảo sách 'ajax – tương lai của của ứng dụng web', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: AJAX – Tương lai của của ứng dụng Web

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC ... KHOA ...   AJAX – Tương lai của của ứng dụng Web
AJAX – Tương lai của Web 2.0 Bạn đang sử dụng Gmail? hay Google Map? Bạn yêu thích tính năng của Google Suggest? hay ứng dụng web Ta-da List, Backpack, BaseCamp của 37Signals? hay các tính năng tiện dụng của Flickr? Trên đây là một số các ứng dụng/dịch vụ web nổi lên trong thời gian gần đây như là những ứng dụng không chỉ giàu tính năng mà còn có tính chất "cách mạng" trong lịch sử phát triển của các ứng dụng web. Điểm chung của các dịch vụ web này là gì? Câu trả lời là những tính năng và cách thức nó tương tác với người dùng: rất tiện lợi và nhanh chóng đến nỗi bạn gần như tưởng mình đang sử dụng một phần mềm chứ không phải đang xem trang web. Công nghệ đứng đằng sau các dịch vụ này là AJAX, viết tắt của Ansynchronous JAvascript and XML ("ansynchronous" có nghĩa là "không đồng bộ" - lý do vì sao được giải thích trong bài), hay Advanced JAvascripting and XML. Cái tên Ajax được nhắc đến lần đầu tiên bởi Adaptive Path và nhanh chóng được chấp nhận rộng rãi trong cộng đồng những người phát triển ứng dụng web và giờ đây có lẽ là cái tên được nhắc đến nhiều nhất và được xem là một công nghệ hứa hẹn sẽ mở ra thời kỳ mới của các ứng dụng web (mặt khác, cũng có rất nhiều ý kiến trái ngược nhau về tên gọi này). Vậy Ajax là gì? Vì sao nó làm được những điều mà các công nghệ trước đây không thực hiện được? Cơ chế hoạt động của nó? Nó có phức tạp không? Làm thế nào để ứng dụng nó cho các sản phẩm của bạn? Ajax có điểm yếu nào không? và khi nào nên sử dụng Ajax? Trong bài viết này, tớ sẽ tổng hợp những gì tớ tìm hiểu được về công nghệ này gồm cả những điểm mạnh và điểm yếu của nó, đồng thời tớ đã tạo ra một ứng dụng minh họa cho việc áp dụng công nghệ Ajax với đầy đủ mã nguồn và giải thích chi tiết từng bước để áp dụng công nghệ này. TỪ NHỮNG GIỚI HẠN CỦA CÁC ỨNG DỤNG WEB HIỆN TẠI… Trước khi tìm hiểu tại sao Ajax lại được xem là "cứu tinh" của các ứng dụng web, hãy thử phân tích những giới hạn của các ứng dụng web hiện tại khiến nó chưa thể thay thế cho các phần mềm máy khách truyền thống. Chỉ cách đây vài năm, khi mà các dịch vụ web bùng nổ, người ta đã mơ tưởng đến một lúc nào đó tất cả các ứng dụng mà bạn sử dụng sẽ là các ứng dụng web thay vì collection by traibingo 1
AJAX – Tương lai của Web 2.0 các phần mềm chạy độc lập trên các máy tính đơn lẻ. Quả thật, với sự p hát triển chóng mặt của mạng Internet cùng với những ưu điểm của các ứng dụng web (truy cập tại mọi nơi, không cần nâng cấp,…), tương lai của các phần mềm chắc chắn sẽ gắn chặt với các ứng dụng web, nếu không muốn nói là có thể sẽ bị thay thế. Tuy nhiên, cho đến giờ, giấc mơ đó vẫn chưa thành sự thật và người ta bắt đầu nghĩ rằng, có lẽ nó sẽ không bao giờ trở thành sự thật. Tại sao vậy? Một trong những giới hạn quan trọng của các ứng dụng web hiện tại là cách thức nó tương tác với người dùng. Khác với các phần mềm chạy độc lập ở máy khách có những khả năng dường như vô tận trong cách thức tương tác 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). Để hiểu tại sao tính chất này lại trở thành một rào cản của các ứng dụng web, hãy phân tích cách thức hoạt động của các dịch vụ web hiện tại xử lý một tác vụ đơn giản như xóa email trong Yahoo! Mail: Bạn đang ở trong hòm thư "Inbox" của Yahoo! Mail. Bạn chọn một số email và nhấn nút Delete để xóa chúng (chuyển vào thùng rác). Yahoo! Mail trước hết sẽ lấy danh sách các email bạn chọn (quá trình này chạy trên máy của bạn), sau đó gởi danh sách này cùng với mã lệnh qua một siêu liên kết đến máy chủ của Yahoo (nếu bạn muốn biết đó là địa chỉ nào, nó được xác định qua tham số "action" của thẻ ) yêu cầu máy chủ thực hiện tác vụ xóa đối với các email đó và gửi lại trang web Yahoo! mail với nội dung mới. Trong khoảng thời gian yêu cầu được gửi đi đến lúc bạn nhận được trang web mới, những gì bạn phải làm là … ngồi đợi nhìn màn hình trình duyệt trắng bốc (nếu bạn sử dụng ADSL thì thời gian này cũng không đến nỗi - khoảng từ 2 đến 3 giây, còn nếu bạn dùng dial -up thì…). Và bạn cũng sẽ phải trải qua một quá trình tương tự đối với các tác vụ khác, thậm chí nếu bạn chỉ muốn chuyển từ thư mục " Inbox" (hòm thư đến) sang "Sent" (hòm thư đi). Bạn sẽ không bao giờ phải trải qua việc chờ đợi trên khi sử dụng các phần mềm chạy trên máy tính đơn lẻ: bạn không bao giờ thấy phần mềm một khi đã được mở ra lại phải "biến mất" vài trong vài giây để cập nhật dù chỉ là một tác vụ đơn giản nhất, và ngay cả khi phần mềm cần thời gian xử lý một tác vụ nào đó thì bạn vẫn thấy nó ở đó, và nó báo cho bạn là nó đang xử lý tác vụ của bạn. Nếu xét về khía cạnh khả năng ứng dụng trong các tác vụ hàng ngày thì hạn chế trên của các ứng dụng web là không thể chấp nhận được. collection by traibingo 2
AJAX – Tương lai của Web 2.0 Tất nhiên, bên cạnh rào cản về cách thức tương tác, các ứng dụng web còn vấp phải nhiều giới hạn khác (ví dụ như bản thân việc phải hoạt động dựa trên các trình duyệt đã là một rào cản quan trọng) nhưng một khi chưa giải quyết đư ợc vấn đề trên thì các ứng dụng web sẽ không bao giờ có thể thay thể cho các phần mềm độc lập. … ĐẾN HIỆN TƯỢNG GMAIL Nếu bạn đã từng sử dụng Gmail, bạn sẽ nhận thấy Gmail đem lại cho bạn cái cảm giác đang sử dụng một phần mềm hơn là một dịch vụ web: sử dụng bàn phím (không phải chuột) để chọn một hoặc nhiều email, nhấn nút " Archive" và ngay lập tức các email được bỏ vào hộp lưu trữ. Bạn gần như không phải đợi - trang Gmail vẫn ở đó. Và nếu có email mới, bạn sẽ được thông báo ngay mà không cần phải tải lại trang web. Gmail ra đời và nhanh chóng trở thành một hiện tượng - không chỉ ở chỗ nó là dịch vụ webmail đầu tiên cho miễn phí 1GB dung lượng mà còn ở chỗ cách nó thay đổi quan niệm truyền thống về cách thức thực hiện tương tác với người dùng của các ứng dụng web AJAX - sự kết hợp kỳ diệu của công nghệ web Đề tài kỹ thuật vốn luôn khô khan và không mấy thú vị, nhưng những câu chuyện về quá trình phát triển của AJAX trong không gian ứng dụng Internet đa phương tiện đã tạo nên sức hút khó tin xuyên suốt năm 2005. AJAX là công cụ Thế hệ Web 2.0 chỉ vừa bắt đầu và sẽ phải trải qua cả một chặng trọng tâm của đường dài phía trước để có thể thay đổi những gì vốn đã trở nên Web 2.0. (ECT) quen thuộc với mọi người hiện nay. Đóng vai trò then chốt trong giai đoạn thứ hai của web là tổ hợp công nghệ AJAX. Dù thế giới chưa thực sự sẵn sàng đón nhận, nhiều người cho rằng các ứng dụng AJAX đang phát triển còn nhanh hơn cả định luật Moore - động lực thúc đẩy ngành điện toán gốc. AJAX là gì? AJAX, viết tắt từ Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ), là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách cắt nhỏ dữ collection by traibingo 3
AJAX – Tương lai của Web 2.0 liệu và chỉ hiển thị những gì cần thiết, thay vì tải đi tải lại toàn bộ trang web. AJAX không phải một công nghệ đơn lẻ mà là sự kết hợp một nhóm công nghệ với nhau. Trong đó, HTML và CSS đóng vai hiển thị dữ liệu, mô hình DOM trình bày thông tin động, đối tượng XMLHttpRequest trao đổi dữ liệu không đồng bộ với máy chủ web, còn XML là định dạng chủ yếu cho dữ liệu truyền. Đây đều là công nghệ sẵn có nhưng Javacript đã lắp ráp chúng lại để thực hiện những "sứ mệnh" đáng khâm phục. Hầu hết các câu chuyện về nguồn gốc của AJAX được bắt đầu từ khi Microsoft phát triển công nghệ Remote Scripting vào năm 1998. Tuy nhiên, phương pháp tải không đồng bộ nội dung trên một trang we b đã xuất hiện trong thành tố IFRAME của Internet Explorer 3 (1996) và thành tố LAYER của Netscape 4.0 năm 1997. Khi giới thiệu Internet Explorer 4.0, Microsoft đã sử dụng mô hình đối tượng tài liệu DOM khác biệt. Đến năm 2000, Netscape hoàn toàn đánh mất thị trường trình duyệt vào tay hãng phần mềm của Bill Gates và thành tố LAYER cũng không còn được các chuyên gia phát triển web chú ý tới. Phải vài năm sau, AJAX mới lại lôi kéo được sự quan tâm của giới công nghệ và trở thành công cụ cải tiến giao diện người dùng cho ứng dụng web. Thuật ngữ này cũng chỉ mới xuất hiện cách đây 1 năm (tháng 2/2005) trong bài viết nổi tiếng của Jesse James Garrett trên trang Adaptive Path. Từ đó, AJAX trở thành trung tâm trong mọi câu chuyện liên quan đến thế hệ Web 2.0. AJAX hoạt động như thế nào? Ứng dụng web truyền thống (trái) và ứng dụng AJAX. (Adaptive Path) collection by traibingo 4
AJAX – Tương lai của Web 2.0 Từ lâu, mọi người đã tưởng tượng ứng dụng máy tính rồi sẽ được lưu và chạy hoàn toàn trên web thay vì nằm bó buộc trong ổ cứng. Dù vậy, viễn cảnh đó vẫn chưa thể xảy ra do ứng dụng web bị hạn chế bởi nguyên lý rằng tất cả các thao tác phải được thực hiện thông qua HTTP (HyperText Transfer Protocol - Giao thức truyền tải qua siêu liên kết). Những hoạt động của người sử dụng trên trang web sẽ tạo ra một yêu cầu HTTP tới server. Máy chủ thực hiện một số khâu xử lý như lấy lại dữ liệu, tính toán, kiểm tra sự hợp lệ của thông tin, sửa đổi bộ nhớ, sau đó gửi lại một trang HTML hoàn chỉnh tới máy khách. Về mặt kỹ thuật, phương pháp này nghe có vẻ hợp lý nhưng cũng khá bất tiện và mất thời gian, bởi khi server đang thực hiện vai trò của nó thì người dùng sẽ làm gì? Tất nhiên là chờ đợi. Để khắc phục hạn chế trên, các chuyên gia phát triển giới thiệu hình thức trung gian - cơ chế xử lý AJAX - giữa máy khách và máy chủ. Điều này giống như việc tăng thêm một lớp giữa cho ứng dụng để giảm quá trình "đi lại" của thông tin và giảm thời gian phản ứng. Thay vì tải lại (refresh) toàn bộ một trang, nó chỉ nạp những thông tin được thay đổi, còn giữ nguyên các phần khác. Vì thế, khi duyệt một trang hỗ trợ AJAX, người sử dụng không bao giờ nhìn thấy một cửa sổ trắng (blank) và biểu tượng đồng hồ cát - dấu hiệu cho thấy máy chủ đang thực hiện nhiệm vụ. Ví dụ, trong một website ảnh, với ứng dụng truyền thống, toàn bộ trang chứa các ảnh sẽ phải mở lại từ đầu nếu có một thay đổi nào đó trên trang. Còn khi áp dụng AJAX, DHTML chỉ thay thế đoạn tiêu đề và phần vừa chỉnh sửa, do vậy tạo nên các giao dịch trơn tru, nhanh chóng. collection by traibingo 5
AJAX – Tương lai của Web 2.0 Tương tác đồng bộ trong ứng dụng web truyền thống (trên) và dị bộ trong ứng dụng AJAX. (Adaptive Path) "Mọi thao tác của người sử dụng sẽ gửi lệnh JavaScript tới bộ xử lý AJAX, thay vì tạo ra một yêu cầu HTTP (HTTP request) và truy vấn tới máy chủ", Jesse James Garrett đã ghi trong bài viết đầu tiên định nghĩa về thuật ngữ này. "Nếu cần gì từ server, như tải về bổ sung mã giao diện hay nhận dữ liệu mới, AJAX sẽ truyền yêu cầu tới máy chủ một cách không đồng bộ, thông thường sử dụng XML, mà không làm gián đoạn sự tương tác của người dùng với ứng dụng web". 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. collection by traibingo 6
AJAX – Tương lai của Web 2.0 Nhiều công ty khác cũng đang nối gót xu thế này như trang chia sẻ ảnh Flickr (hiện thuộc Yahoo) hay công cụ tìm kiếm A9.com của Amazon. Yahoo dự định trong vài tuần tới sẽ ra mắt bản Yahoo Mail Beta 1 sử dụng AJAX trên toàn thế giới (đang được thử nghiệm giới hạn). Hòm thư mới sẽ được trang bị thêm nhiều tính năng thuộc Web 2.0 như RSS, chế độ xem thư trước (preview)... Microsoft cũng đang triển khai chương trình Windows Live Mail và Windows Live Messenger hỗ trợ 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. Thách thức lớn nhất khi tạo ứng dụng AJAX không nằm ở khâu kỹ thuật bởi những thành phần của nó đã xuất hiện từ lâu, hoạt động ổn định và được hiểu người biết đến. Vấn đề ở đây chỉ là "các chuyên gia thiết kế cần quên đi những giới hạn của web, bắt đầu nghĩ rộng hơn, sâu hơn về khả năng của công nghệ và sáng tạo nó theo cách riêng của mỗi người", Alexei White, Giám đốc sản xuất của công ty eBusiness (Mỹ), nhận xét. "AJAX sẽ làm mất dần ảnh hưởng của Microsoft trên thị trường. Tuy chưa thể lấn át hoàn toàn, nó sẽ mang lại những tính năng thay thế cho hầu hết các sản phẩn như Office". Những nhược điểm của AJAX AJAX có thể góp phần tạo nên một thế hệ mới cho ứng dụng web (như colr.org hay backpackit.com). Tuy nhiên, nó cũng là một công nghệ "nguy hiểm" khi gây ra không ít rắc rối về giao diện người dùng. Chẳng hạn, phím "Back" (trở lại tran g trước) được đánh giá cao trong giao diện website chuẩn. Đáng tiếc, chức năng này không hoạt động ăn khớp với Javascript và mọi người không thể tìm lại nội dung trước đó khi bấm phím Back. Bởi vậy, chỉ một sơ xuất nhỏ là dữ liệu trên trang đã bị thay đổi và khó có thể khôi phục lại được. Đây là một trong những nguyên nhân chính khiến nhiều người không ủng hộ ứng dụng Javascript. Bên cạnh đó, mọi người không thể lưu lại địa chỉ web vào thư mục Favorite (Bookmark) để xem lại về sau. Do áp dụng lớp trung gia n để giao dịch, các ứng dụng AJAX không có một địa chỉ cố định cho từng nội dung. Khiếm khuyết này làm cho AJAX dễ "mất điểm" trong mắt người dùng. Những trình duyệt hỗ trợ AJAX là Microsoft Internet Explorer 5.0 trở lên; browser dựa trên Gecko như Mozilla, Firefox, SeaMonkey, Epiphany, Galeon và Netscape 7.1; trình duyệt chứa KHTML API 3.2 trở lên như Konqueror, Apple Safari... collection by traibingo 7
AJAX – Tương lai của Web 2.0 CSS - tập tin định kiểu theo tầng (Cascading Style Sheets) - được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML, XHTML, XML, SVG, XUL... Các thông số kỹ thuật của CSS do tổ chức World Wide Web Consortium (W3C) quản lý. DOM - mô hình đối tượng tài liệu (Document Object Model) - là một giao diện lập trình ứng dụng (API). Thông thường DOM có dạng một cây cấu t rúc dữ liệu và được dùng để truy xuất các tài liệu HTML và XML. Mô hình DOM hoạt động độc lập với hệ điều hành và dựa theo kỹ thuật lập trình hướng đối tượng để mô tả tài liệu. DHTML, hay HTML động, tạo một trang web bằng cách kết hợp các thành phần: ngôn ngữ đánh dấu HTML tĩnh, ngôn ngữ lệnh máy khách (như Javascript) và ngôn ngữ định dạng CSS và DOM. Do có khả năng phong phú, DHTML còn được dùng như một công cụ xây dựng các trò chơi đơn giản trên trình duyệt. collection by traibingo 8
AJAX – Tương lai của Web 2.0 AJAX - Ansynchronous JAvascripting and XML Google Map, Google Suggest, Flickr, BackCamp, Ta-da List - đó là một số những ứng dụng ra đời sau thành công của Gmail - tất cả đều hoạt động dựa trên một công nghệ đóng vai trò cốt lõi thực hiện các tương tác trung gian giữa người dùng và máy chủ: AJAX. Nói Ajax là một công nghệ không hẳn đã đúng mà thực ra nó là sự kết hợp của một loạt các công nghệ khác nhau:  XHTML+CSS với vai trò hiển thị thông tin  Mô hình tương tác và hiển thị động DOM (Document Object Model)  Trao đổi và truy cập/tác động lên thông tin sử dụng XML và XSLT  Nhận thông tin không đồng bộ với đối tượng XMLHttpRequest  Javascript với vai trò kết hợp 4 công nghệ trên lại với nhau Nếu nói Ajax là một công nghệ mới cũng không hẳn bởi thực ra, việc sử dụng XMLHttpRequest đã được thực hiện từ rất lâu, cũng như các công nghệ như DOM, XHTML, XML,… đều đã được biết đến và áp dụng từ rất lâu. Điểm khiến cho Ajax trở thành một hiện tượng chính là ở chỗ nó là một sự kết hợp hoàn hảo các công nghệ hoàn toàn khác nhau để giải quyết một vấn đề tưởng như không thể giải quyết - mà việc áp dụng lại rất đơn giản như bạn sẽ thấy ở phần sau (có thể so sánh nó như việc pha chế Cocktail - tìm được đúng một loại tổ hợp của các loại rựu để tạo ra một hương vị và cảm giác hoàn toàn khác). AJAX - SỰ KHÁC BIỆT Có lẽ bạn đang thắc mắc làm thế nào Ajax lại có thể giải quyết được vấn đề tương tác người dùng của các ứng dụng web. Thử lật lại vấn đề: bạn cần phải có một cách nào đó để quá trình tương tác với người dùng không bị ngắt quãng khi ứng dụng cần tương tác với máy chủ. Bạn có bao giờ nghĩ là sẽ thật tốt nếu như có một "lớp" trung gian đứng đằng sau giao diện của ứng dụng web đảm nhận việc trao đổi thông tin với máy chủ và sau đó gửi trả k ết quả ra giao diện? Cũng giống như nếu bạn làm giám đốc thì bạn sẽ có các nhân viên cấp dưới đảm nhận việc lấy thông tin chi tiết về thị trường báo lên cho bạn, bạn chỉ cần ngồi một chỗ, đưa ra quyết định dựa trên thông tin nhận được và thực hiện các giao dịch với các đối tác. Đó chính là cơ chế hoạt động của Ajax: nó đóng vai trò như là một lớp trung gian giữa giao diện bạn thấy trên trình duyệt và máy chủ xử lý thông tin. Có thể mô tả cách thức hoạt động của Ajax như sau: collection by traibingo 1
AJAX – Tương lai của Web 2.0  Ajax thực hiện tương tác với máy chủ bằng cách sử dụng đối tượng XMLHttpRequest, nhận kết quả về dưới dạng XML và phân tích kết quả bằng công nghệ DOM.  Tương tác giữa Ajax và giao diện người dùng được thực hiện thông qua các mã Javascript và XHTML + CSS. Hai mô hình dưới đây minh họa 2 cơ chế làm việc hoàn toàn khác nhau: một bên là cơ chế của các ứng dụng web truyền thống và một bên là ứng dụng web sử dụng công nghệ Ajax . collection by traibingo 2
AJAX – Tương lai của Web 2.0 Một trong những điểm mấu chốt của công nghệ Ajax là bạn không tương tác trực tiếp với máy chủ như cách truyền thống mà là qua một lớp trung gian của Ajax. Có thể bạn sẽ hỏi phải chăng như vậy thì sẽ làm cho cơ chế hoạt động phải qua thêm một bước trung gian và sẽ làm chậm hơn nữa quá trình tương tác? Thắc mắc trên là hoàn toàn có lý, tuy nhiên, thực tế lại ngược lại: sử dụng Gmail bạn có cảm giác mọi thứ nhanh hơn. Lý do là: 1) Không phải lúc nào bạn cũng cần phải tương tác với máy chủ . Như trong trường hợp của Gmail, một khi giao diện của Gmail đã được tải về xong (để ý khoảng thời gian ngắn từ khi bạn đăng nhập cho đến khi giao diện của Gmail xuất hiện) thì những tác vụ như chuyển từ thư mục này sang xem thư mục khác không nhất thiết phải hỏi lại máy chủ (tất nhiên với điều kiện dữ liệu đã có sẵn) 2) Bằng cách chỉ nhận những thông tin cần thiết (ở dạng XML), dung lượng truyền tải giữa máy tính của bạn và máy chủ sẽ giảm đi rất nhiều. Sau khi bạn giao diện đã được tải về 1 lần, Ajax sẽ không cần phải tải lại toàn bộ giao diện đó mỗi khi tương tác với máy chủ. Thay vào đó, Ajax sẽ gởi yêu cầu đến máy chủ và nhận kết quả từ máy chủ về những gì đã thay đổi sau khi máy chủ thực hiện yêu cầu đó. Ajax sau đó sẽ thông báo cho phần giao diện (thông qua các l ời gọi Javascript) thực hiện các thay đổi tương ứng trên giao diện. collection by traibingo 3
AJAX – Tương lai của Web 2.0 3) Tương tác giữa phần giao diện và Ajax là tương tác nội bộ bên trong trình duyệt , giúp cho các thay đổi sẽ được thể hiện gần như tức thì. Mô hình sau thể hiện những gì diễn ra giữa Giao diện ứng dụng web - Ajax - và máy chủ: Để ý là chu kỳ tương tác giữa bạn và Ajax mang tính chất ngẫu nhiên và rất thường xuyên, trong khi đó các tương tác giữa Ajax và máy chủ xảy ra với một chu kỳ dài hơn nhiều. collection by traibingo 4
AJAX – Tương lai của Web 2.0 Kỹ thuật lập trình Ajax AJAX là một trong những từ ngữ thời thượng bậc nhất hiện nay trong giới công nghệ thông tin và là bí quyết kĩ thuật đứng đằng sau các ứng dụng lớn thuộc Google: Flickr, GMail, Google Suggest, Google Maps. Mặc dù cái tên này mới xuất hiện được vài tháng, InfoWorld số tháng 5/2005 đã đưa ra nhận định: Ajax đang tạo nên cuộc cách mạng trong thế giới web. AJAX LÀ GÌ? JavaScript, ngôn ngữ lập trình chạy trên trình duyệt đã quá quen thuộc với thế giới web kể từ khi Netscape phát minh ra nó. Sự phát triển của công nghệ và nhu cầu người sử dụng ngày càng cao buộc các nhà phát triển tạo ra một kĩ thuật khác cho phép xử lý các tác vụ phức tạp hơn. Tháng 2/2005, trên Internet bắt đầu lan truyền thuật ngữ Ajax như là một kỹ thuật mới cho ứng dụng web. Những thành công vang dội và sự hấp dẫn kì lạ của Gmail, Google Suggest và Google Maps đã khiến cho Ajax được chú ý một cách đặc biệt. Ajax là viết tắt của Asynchronous JavaScript and XML - kỹ thuật 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 máy chủ mà không cần nạp lại trang • 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. Các kĩ sư của dự án Mozilla bắt đầu hỗ trợ tính năng này ở bản Mozilla 1.0 (và Netscape 7). Apple cũng đã thực hiện một tính năng tương tự kể từ Safari 1.2. Ajax là sự phối hợp một loạt các công nghệ đang thu hút sự quan tâm của giới công nghiệp trong thời gian gần đây. Đó là: • Trình bày trang web dựa trê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; • Biểu diễn động và tương tác sử dụng Document Object Model, chuẩn của W3C; • Trao đổi và xử lý dữ liệu dùng XML và XSLT, chuẩn của W3C; • Thu hồi dữ liệu bất đối xứng dùng XMLHttpRequest; • Dùng JavaScript để liên kết mọi thứ lại với nhau. JavaScript ở đây là ECMAScript, chuẩn của collection by traibingo 1
AJAX – Tương lai của Web 2.0 ECMA, không phải là JScript của Microsoft. Ở các ứng dụng web truyền thống, client sẽ gửi HTTP Request đến web server và web server sẽ gửi trả response chứa các thông tin dưới dạng HTML và CSS. 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. LẬP TRÌNH AJAX Xử lý HTTP Request Để gửi một HTTP Request đến server bằng JavaScript, bạn cần tạo một đối tượng của lớp cung cấp tính năng này. Trong IE thì lớp này tồn tại dưới dạng một đối tượng ActiveX có tên là XMLHTTP. Đối tượng này có từ IE 4.0. var httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); Nếu MSXML được cài đặt thì bạn cũng có thể gọi: var httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); Ở Mozilla, Firefox, Opera 8.0, Safari và các trình duyệt khác thì lớp này có tên là XMLHttpRequest. Đối tượng XMLHttpRequest không phải là một chuẩn của W3C (tương lai có thể được W3C chấp thuận). Đối tượng XMLHttpRequest được hỗ trợ ở IE 5.0+, Safari 1.2+, Mozilla 1.0+/ Firefox, Opera 8.0+ và Netscape 7+. var httpRequest = new XMLHttpRequest(); Do sự khác biệt này, nên để ứng dụng của bạn chạy trên nhiều trình duyệt thì bạn có thể làm như sau: if (window.XMLHttpRequest) { // Mozilla, Safari, ... httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } Do ActiveX trên IE rất nguy hiểm cho người dùng nên nhiều trường hợp tính năng này được mặc collection by traibingo 2
AJAX – Tương lai của Web 2.0 định cấm, vì vậy bạn cần kiểm tra trình duyệt của người sử dụng trước khi gọi đối tượng XMLHTTP. Việc kiểm tra này được thực hiện qua giá trị của window.ActiveXObject. Ví dụ: if (window.ActiveXObject) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") } else { ...} Một số phiên bản của trình duyệt Mozilla không làm việc đúng khi nhận đáp trả từ server không có header chứa XML mime-type. Để khắc phục vấn đề này, bạn có thể sử dụng phương thức định nghĩa lại phần header do server gửi đến trong trường hợp nó không phải là text/xml. httpRequest = new XMLHttpRequest(); httpRequest.overrideMimeType(text/xml); Tiếp theo, bạn cần xác định muốn làm gì sau khi nhận được đáp trả (response) từ server. Giai đoạn này, bạn chỉ cần báo cho đối tượng HTTP request biết hàm JavaScript sẽ làm công việc xử lý đáp trả. Điều này được thực hiện bằng cách thiết lập thuộc tính onreadystatechange của đối tượng thành tên của hàm JavaScript: httpRequest.onreadystatechange = nameOfTheFunction; Chú ý không dùng cặp ngoặc đơn () sau tên hàm và không truyền tham số vào hàm đó. Thêm nữa, thay vì trao tên hàm thì bạn có thể sử dụng kĩ thuật định nghĩa hàm động: httpRequest.onreadystatechange = function() { // do the thing }; Sau khi đã khai báo những gì sẽ diễn ra lúc nhận được response, bạn tiến hành gửi request. Bạn cần gọi các phương thức open() và send() của lớp HTTP request: httpRequest.open(GET, http://www.example.org/some.file, true); httpRequest.send(null); Tham số đầu tiên của lời gọi đến open() là phương thức HTTP Request – GET, POST, HEAD hay bất cứ phương thức nào mà bạn muốn sử dụng và phương thức đó cần được server hỗ trợ. Chú ý viết hoa theo quy định của chuẩn HTTP, nếu không thì một số trình duyệt như Firefox có thể không xử lý request. collection by traibingo 3
AJAX – Tương lai của Web 2.0 Tham số thứ hai là địa chỉ URL của trang mà bạn gửi request đến. Do thiết lập bảo mật, bạn không thể gọi các trang trên tên miền của bên thứ ba. Chú ý là nếu bạn không gọi đúng tên miền trên tất cả các trang thì bạn sẽ nhận được thông báo permission denied khi gọi open(). Tham số thứ ba xác lập request có bất đối xứng hay không (asynchronous). Nếu TRUE, thì việc thực thi hàm JavaScript sẽ tiếp tục trong khi response của server chưa đến. Đây là chữ A trong AJAX. Tham số gửi đến phương thức send() có thể là bất cứ dữ liệu nào mà bạn muốn gửi tới server nếu bạn dùng phương thức POST để gửi request. Dữ liệu sẽ có dạng của một chuỗi truy vấn: name=value&anothername=othervalue&so=on Đối tượng XMLHttpRequest có một tập các thuộc tính dùng chung trên tất cả các môi trường hỗ trợ. Dưới đây là danh sách các thuộc tính chủ yếu của đối tượng này. Xử lý Server Response Chú ý khi gửi request, bạn cung cấp tên của hàm JavaScript được thiết kế để xử lý response. httpRequest.onreadystatechange = nameOfTheFunction; Hãy xem hàm này nên làm gì. Đầu tiên, hàm cần kiểm tra trạng thái của request. Nếu trạng thái có giá trị là 4, nghĩa là ứng dụng của bạn đã nhận được response đầy đủ từ server và đó là dấu hiệu tốt để bạn tiếp tục xử lý nó. if (httpRequest.readyState == 4) { // không xảy ra vấn đề gì và bạn đã nhận được response } else { // chưa sẵn sàng } Tiếp theo cần kiểm tra mã trạng thái của HTTP server response. Tất cả các mã có thể thàm khảo ở site của W3C. Trong bài viết này, chúng ta quan tâm đến response 200 (OK). if (httpRequest.status == 200) { // trạng thái response trả lại dấu hiệu tốt! } else { collection by traibingo 4
AJAX – Tương lai của Web 2.0 // có vấn đề trong việc tiếp nhận và xử lý request, // ví dụ 404 (Not Found) // hay 500 (Internal Server Error) } Sau khi đã kiểm tra trạng thái của request và mã trạng thái của HTTP response, việc xử lý dữ liệu mà server gửi tới tùy ở bạn. Bạn có hai lựa chọn: • httpRequest.responseText – trả lại dưới dạng chuỗi văn bản • httpRequest.responseXML – trả lại dưới dạng đối tượng XMLDocument và bạn có thể duyệt bằng cách sử dụng các hàm JavaScript DOM Ví dụ với Text Response Chúng ta sẽ xây dựng một ví dụ đơn giản. Các mã JavaScript gửi request đến một trang HTML, test.html. Trang này chứa dòng "Im a test", sau đó chúng ta dùng alert() để gửi ra nội dung của file đó. style="cursor: pointer; text-decoration: underline" onclick="makeRequest(test.html)"> Trong ví dụ này, người dùng kích chuột vào liên kết "Make a request" trên trình duyệt, việc này sẽ gọi hàm makeRequest() cùng với một tham số – cái tên test.html của file HTML trong cùng thư mục. Sau đó request được thực hiện. Tiếp theo, bạn xác định hàm alertContents() sẽ xử lý trường hợp onreadystatechange. alertContents() kiểm tra xem response đã nhận được hay chưa và nếu OK thì nó sẽ thực thi alert() để gửi ra nội dung của file test.html. Ví dụ với XML Response Ví dụ vừa khảo sát minh họa cho cách dùng thuộc tính reponseText của đối tượng request. Ví dụ dưới đây sẽ minh họa cho thuộc tính responseXML. collection by traibingo 5
AJAX – Tương lai của Web 2.0 Việc đầu tiên là chuẩn bị trang XML sẽ được dùng cho request về sau. Trang dưới có tên là test.xml: Im a test. Trong dòng mã của ví dụ trên chúng ta chỉ cần thay dòng request bằng: ... onclick="makeRequest(test.xml)"> ... Sau đó trong alertContents() chúng ta cần thay dòng alert(httpRequest.responseText); với: var xmldoc = httpRequest.responseXML; var root_node = xmldoc.getElementsByTagName(root).item(0); alert(root_node.firstChild.data); responseXML lấy giúp chúng ta đối tượng XMLDocument và chúng ta sẽ dùng các phương thức DOM để truy cập một số dữ liệu có trong trang XML. Mã nguồn ví dụ có thể tải về ở website TGVT, bạn cũng có thể chạy trực tiếp tại http://goldenkey.edu.vn/ajax. Bộ xử lý sự kiện cho một sự kiện phát sinh mỗi khi có sự thay đổi onreadystatechange trạng thái. Status: 0 = uninitialized 1 = loading 2 = loaded 3 = interactive 4 = readyState complete Dữ liệu dạng String trả về từ server responseText Đối tượng tài liệu tương thích DOM của dữ liệu trả về từ server responseXML Mã trạng thái dạng số do server trả về, như 404 cho "Not Found" status hay 200 cho "OK" Thông điệp dạng String message đi kèm với mã trạng thái. statusText collection by traibingo 6
AJAX – Tương lai của Web 2.0 VÍ DỤ MINH HỌA & CÁCH ÁP DỤNG CÔNG NGHỆ AJAX Đừng để danh sách những công nghệ làm nên AJAX "hù dọa" bạn. Thực ra việc tìm hiểu nghiên cứu và áp dụng công nghệ này rất đơn giản và thậm chí bạn k hông cần phải hiểu rõ cách sử dụng những công nghệ thành phần (ví dụ như DOM - tất nhiên nếu bạn biết về DOM thì sẽ rất tuyệt, nhưng nếu bạn không biết về nó thì cũng không sao). Bản thân tớ chỉ mất 1 ngày để mày mò nghiên cứu bản chất và áp dụng công nghệ này thực hiện một ví dụ minh họa cho bài viết. Trong ví dụ sau, tớ sẽ tạo một mẫu đơn đăng ký nho nhỏ, yêu cầu người dùng chọn một tên đăng nhập và cung cấp một địa chỉ email không được trùng lặp với bất kỳ ai trong cơ sở dữ liệu đã có. Bằng cách sử dụng Ajax, tớ có thể kiểm tra so sánh với danh sách tên trong cơ sở dữ liệu ngay sau khi người dùng vừa mới nhập tên xong và báo lỗi ngay nếu nó bị trùng (không cần đợi người dùng phải gửi mẫu đơn đi). Điều tương tự xảy ra đối với địa chỉ email, chỉ thêm một cá i là tớ kiểm tra luôn định dạng của nó có phải là một địa chỉ email hay không trước khi áp dụng. Sau khi chọn tên và email xong (tất nhiên là sau khi tớ đã kiểm tra là chúng hợp lệ), người dùng có thể nhấn nút tạo tài khoản - và lần này tớ cũng sử dụng luôn Ajax để thực hiện việc này (minh họa khả năng thay đổi trực tiếp vào cơ sở dữ liệu). Để ý là bạn hoàn toàn không phải rời khỏi trang đăng ký trong bất kỳ giai đoạn nào. Tất cả xảy ra liền mạch và nhanh chóng. Cũng hy vọng bạn sẽ để ý chi tiết sau: mặc dù đây là một ví dụ minh họa công nghệ Ajax, tớ cũng muốn minh họa tầm quan trọng của cách thức bạn tương tác với người dùng. Để ý khi bạn đưa chuột vào một ô nào đó (ô đó sẽ sáng lên cho biết những gì bạn gõ sẽ là vào ô đó), khi có thông báo lỗi (ô bị lỗi sẽ chuyển sang màu đỏ và bạn tự động được chuyển ngược về ô đó để sửa) hay khi dữ liệu của bạn là hợp lệ (ô chuyển sang màu xanh da trời). Thêm một bước nữa, tớ đã thiết kế để một khi dữ liệu còn chưa hoàn tất (chưa có đủ tên và email, hoặc tên hay email bị trùng) thì bạn sẽ không thể gửi đơn đi được (nút Submit bị vô hiệu hóa). Chỉ là những ứng dụng rất nhỏ và chi tiết nhưng nó giúp cho ứng dụng của bạn dễ sử dụng hơn rất nhiều. Bạn sẽ tìm thấy mã nguồn cũng như hướng dẫn từng bước áp dụn g công nghệ này tại trang ví dụ. collection by traibingo 1

CÓ THỂ BẠN MUỐN DOWNLOAD

THÔNG TIN

TRỢ GIÚP

HỖ TRỢ KHÁCH HÀNG

Theo dõi chúng tôi

Chịu trách nhiệm nội dung:

Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA

LIÊN HỆ

Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM

Hotline: 093 303 0098

Email: support@tailieu.vn

Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015 Copyright © 2022-2032 TaiLieu.VN. All rights reserved.