Công nghệ AJAX ra đời đã trở thành cứu tinh của các ứng dụng web hiện nay, với những gì mà AJAX có, đã làm cho thế hệ web nhiều đổi mới và phát triển mạnh trong những năm gần đây. Mặc dù AJAX đã ra đời được mấy năm (từ 2005) và không còn xa lạ với các nhà phát triển web trên thế giới, đồng thời vẫn còn tồn tại nhiều lỗ hổng xong đến bây giờ và trong tương lai vẫn còn phát triển rất mạnh và phổ biết hơn. Các nhà khoa học vẫn không ngừng nghiên cứu để khắc phục những lỗ hổng trong AJAX đồng thời tìm hiểu thêm nhiều những tính năng mở rộng khác của AJAX để thỏa mãn đáp ứng nhu cầu sử dụng website, internet trong tương lai của con người.
Tìm hiểu về AJAX GVHD: Đào Phan Vũ SVTH : Trần Minh Hoàng 1 Tìm hiểu về AJAX GVHD: Đào Phan Vũ MỤC LỤC LỜI MỞ ĐẦU 3 CHƯƠNG 1: TỔNG QUAN VỀ AJAX .4 1.Giới thiệu AJAX: 4 1.1 Khái niệm: 4 1.2 Vai trò của Ajax: 5 1.3 Ưu nhược điểm của Ajax .6 2. Phương thức hoạt động của Ajax 7 2.1 Mô hình ứng dụng web truyền thống và có sử dụng công nghệ AJAX: 7 2.2 Hoạt động của công nghệ AJAX: 8 CHƯƠNG 2: KỸ THUẬT LẬP TRÌNH AJAX .11 1.Kỹ thuật lập trình của một số công nghệ trong AJAX .11 1.1Lập trình CSS trong Ajax .11 1.2 Lập trình DOM trong AJAX .14 1.3 Công nghệ XML trong AJAX .19 1.4 Đối tượng XMLHttpRequest 24 1.5 Javascript 32 2. Công việc gửi Request và Response của server trong AJAX 33 2.1 Xử lý HTTP Request .33 2.2 Xử lý Server Response .35 2.Ví dụ tổng hợp: .38 4. Vấn đề bảo mật 42 CHƯƠNG 3: ỨNG DỤNG CỦA AJAX 44 1.Một số ứng dụng của Ajax .44 2.Giới thiệu một số hệ thống ứng dụng Ajax 45 2.1 Fast dictionary: .45 2.2 Mobile phone catalog: 46 2.3 Google maps 47 2.4 Gmail .49 KẾT LUẬN SVTH : Trần Minh Hoàng 2 Tìm hiểu về AJAX GVHD: Đào Phan Vũ LỜI MỞ ĐẦU Trong xã hội công nghệ tiên tiến ngày nay, mạng, internet là nguồn tài nguyên không thể thiếu trong cuộc sống. Trong kinh doanh, các doanh nghiệp nhờ vào internet, website để giới thiệu, quảng bá sản phẩm, bán hàng… Học sinh, sinh viên thì vào mạng để học tập, tìm tài liệu, giải trí, chát… Internet thật sự phổ biến và phát triển mạnh khi website ra đời. Từ khi website ra đời đã giúp con người có thêm nguồn thông tin, giải trí lớn tiện ích. Các ứng dụng website cũng dần phổ biến đặc biệt là dịch vụ web. Ban đầu chỉ là web tĩnh rồi đến web động, càng ngày càng được nhiều người yêu thích. Đặc biệt sự ra đời của thế hệ web 2.0 đã đem lại cho giới công nghệ nói chung và các nhà làm web nói riêng nhiều tính năng ưu việt, và các trang web hiện nay cũng phong phú và đa dạng hơn, cung cấp cho con người nhiều thông tin giải trí yêu thích hơn. Và đóng vai trò then chốt trong giai đoạn thứ hai này của web là công nghệ AJAX, với công nghệ này đã tạo bước đột phá mới mẻ cho website, công nghệ AJAX có thể nói là “cứu tinh” của ứng dụng web, từ khi AJAX xuất hiện và được sử dụng trong website, thế hệ web đã bước sang 1 thời kỳ mới. Vậy công nghệ AJAX là gì? Những cống hiến to lớn của nó trong thiết kế và lập trình web là gì? Đây là vấn đề em muốn tìm hiểu, vì vậy em đã chọn đề tài: “Tìm hiểu về AJAX” Bài viết này của em gồm có 3 chương: 1. Tổng quan về AJAX. 2. Kỹ thuật lập trình AJAX. 3. Ứng dụng của AJAX. Mặc dù có nhiều cố gắng nhưng bài viết vẫn không thể tránh được có nhiều thiếu sót. Em hi vọng thầy cô có thể đóng góp ý kiến để đề tài của em hoàn thiện hơn. Cuối cùng em xin chân thành cảm ơn thầy Đào Phan Vũ đã giúp đỡ em hoàn thành đề án này. Em xin chân thành cảm ơn! Sinh viên thực hiện Trần Minh Hoàng SVTH : Trần Minh Hoàng 3 Tìm hiểu về AJAX GVHD: Đào Phan Vũ CHƯƠNG 1: TỔNG QUAN VỀ AJAX. 1.Giới thiệu AJAX: 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 web đã xuất hiện trong thành tố IFRAME của Internet Explorer 3 năm 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 vào 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. 1.1 Khái niệm: AJAX được định nghĩa là không đồng bộ giữa Javascript và XML, nó là viết tắt của từ Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ). Không đồng bộ có nghĩa là với bất kỳ số lượng yêu cầu và trả lời như thế nào đều có thể được sắp đặt cùng một lúc. Các mã sau không phải chờ để cho các mã trước kết thúc mới bắt đầu. AJAX là bộ công cụ cho phép tăng tốc độ ứng dụng web bằng cách cắt nhỏ dữ 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. Là một nhóm 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, đang thu hút sự quan tâm của giới công nghệ trong thời gian gần đây. Các công nghệ đó là: • HTML và CSS đóng vai hiển thị dữ liệu • Mô hình DOM trình bày thông tin động • XMLHttpRequest trao đổi dữ liệu không đồng bộ với máy chủ web • XML là định dạng chủ yếu cho dữ liệu truyền • Javacript được dùng để lắp ráp chúng lại với nhau. Đặc biệt là sự kết hợp của 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 Và các ứng dụng Ajax thì xoay quanh một tính năng có tên là XMLHttpRequest. SVTH : Trần Minh Hoàng 4 Tìm hiểu về AJAX GVHD: Đào Phan Vũ 1.2 Vai trò của Ajax: Như đã nói ở trên AJAX là một tập hợp các công nghệ bổ sung lẫn nhau. Mỗi công nghệ trong đó đều có một vai trò, tính năng riêng. Như JavaScript có vai trò chất keo kết dính các ứng dụng lại với nhau. Giao diện người dùng được tạo và tái nạp bằng cách dùng JavaScript để điều khiển Document Object Model - DOM, tạo và tổ chức biểu diễn dữ liệu cho người dùng, đồng thời xử lí các tương tác trên chuột và bàn phím. Công nghệ AJAX có khả năng lấy dữ liệu mới từ máy chủ mà không cần dỡ các trang hiện tại. Nó không nhất thiết phải làm với bất kỳ cơ chế vận chuyển đặc biệt hoặc yêu cầu cụ thể hoặc bất kỳ định dạng phản ứng nào mà công nghệ DOM trong AJAX cho phép, một khi dữ liệu mới được lấy ra, nó có thể được sử dụng để chèn dữ liệu vào trang cũ. Cụ thể ta có: • XHTML hay HTML và Cascading Style Sheets (CSS) cung cấp các tiêu chuẩn để thể hiện nội dung trang Web lên trình duyệt người dùng. • Document Object Model (DOM) cung cấp cấu trúc cho phép hiển thị động nội dung và các tương tác liên quan. DOM mở ra nhiều cách thức mạnh cho người dùng khi muốn truy cập và thao tác với đối tượng nằm trong một văn bản bất kỳ. • XML và XSLT cung cấp kiểu định dạng cho dữ liệu, để dữ liệu có thể được thao tác, truyền tải hoặc trao đổi giữa máy chủ (server) và máy khách (client). • XML HTTP Request: Điểm bất cập lớn nhất trong xây dựng ứng dụng Web là mỗi lần một webpage được tải về trình duyệt của người dùng, kết nối server liên quan sẽ bị cắt. Hơn nữa, đường dẫn bên trong trang còn đòi hỏi phải thiết lập một kết nối khác với server và tải về toàn bộ trang cho dù người dùng chỉ muốn mở rộng một đường link đơn giản. XML HTTP Request cho phép truy vấn dữ liệu không đồng bộ và đảm bảo các trang web không bị load trở lại khi thay đổi trong yêu cầu người dùng ở mức nhỏ nhất. • JavaScript (JS): là ngôn ngữ kịch bản hợp nhất các đối tượng để hoạt động với nhau một cách hiệu quả, do đó giữ vai trò đáng kể trong ứng dụng web. Người ta thường nói chuyện gì cũng có 2 mặt của nó, và công nghệ AJAX cũng vậy tuy là rất tiện ích, giúp cho chúng ta rất nhiều trong việc làm web và các ứng dụng web song nó vẫn còn có mặt hạn chế đến bây giờ vẫn đang được tìm cách để khắc phục. SVTH : Trần Minh Hoàng 5 Tìm hiểu về AJAX GVHD: Đào Phan Vũ 1.3 Ưu nhược điểm của Ajax. 1.3.1 Ưu điểm của Ajax AJAX làm cho các ứng dụng web nhanh hơn so với các ứng dụng máy tính để bàn. Ví dụ: một tìm kiếm Google Đầu tiên bạn nhập vào một số văn bản trong hộp tìm kiếm. Sau đó nhấn nút tìm kiếm. Trang được làm mới và bạn sẽ có được kết quả cần tìm. Toàn bộ quá trình này có thể mất một vài giây đến vài phút tùy thuộc vào lượng dữ liệu bạn đã yêu cầu, tải về máy chủ web, kết nối internet của bạn và như vậy.Nó là một quá trình khá nhanh, nhưng nó có thể được nhanh hơn .với Ajax. Với công nghệ Ajax, khi bạn nhập cùng một văn bản vào hộp tìm kiếm, tuy nhiên giờ đây kết quả của bạn được trả lại ngay lập tức khi bạn đang gõ. Đó là sức mạnh của Ajax, dữ liệu được trả về ngay lập tức mà không cần phải bấm vào trình và chờ đợi cho màn hình làm mới. Vì vậy, đó là kết quả cuối cùng của một AJAX kích hoạt trang web, dữ liệu ngay lập tức được trả về dựa trên các chữ cái bạn đang đánh máy (như trong ví dụ Ajax tìm kiếm Google). AJAX cho phép quản trị web tạo ra tốt hơn, nhanh hơn và thân thiện với người dùng các ứng dụng web với cơ sở của nó của Javascript và HTTP. Toàn bộ trang này không nạp lại. Trình Ajax nhanh hơn quá trình hình thức trình thông thường. Sử dụng công nghệ ajax là không giới hạn hình thức dữ liệu. Nó được sử dụng rộng rãi trong thiết kế menu động, thu thập dữ liệu để phân tích stat web, hoặc thậm chí tải lại toàn bộ trang tự động. 1.3.2 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. 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.Đó là: Khi một số người dùng tắt JavaScript của trình duyệt của họ. Thì trong trường hợp này ajax không làm việc. Dữ liệu tự động nạp vào lịch sử web là không có sẵn, tức là bạn không thể tải lại trang bằng cách sử dụng nút quay lại ( back ) của trình duyệt. Bởi chức năng này không hoạt động ăn khớp với Javascript. Vì thế 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. SVTH : Trần Minh Hoàng 6 Tìm hiểu về AJAX GVHD: Đào Phan Vũ Người dùng 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 gian để 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. Mặc dù công nghệ AJAX có nhiều khuyết điểm như trên nhưng nó vẫn được sử dụng nhiều và rộng rãi trong các ứng dụng web hiện này như trong Google map, gmail… Vậy nó hoạt động như thế nào bây giờ chúng ta cùng tìm hiểu phương thức hoạt động của nó. 2. Phương thức hoạt động của Ajax. Trước khi tìm hiểu các công nghệ trong AJAX hoạt động như thế nào, chúng ta cùng xem coi mô hình web truyền thống và mô hình web có sử dụng AJAX khác nhau như thế nào để từ đó tìm ra ưu việt trong hoạt động của công nghệ AJAX. 2.1 Mô hình ứng dụng web truyền thống và có sử dụng công nghệ AJAX: • Ở các ứng dụng web truyền thống, khi người dùng có một 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ả response chứa các thông tin dưới dạng HTML và CSS, trang HTML này sẽ 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í 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. • Mô hình web có sử dụng công nghệ Ajax có nhiều điểm khác biệt và tiện ích hơn nhiều so với mô hình truyền thống . Ajax cho phép tạo ra một Ajax Engine nằm giữa giao tiếp giữa máy client và máy chủ sever. 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. Rõ ràng mô hình web có sử dụng công nghệ Ajax tiện ích hơn nhiều, 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 web của phản hồi nhanh hơn, thông minh SVTH : Trần Minh Hoàng 7 Tìm hiểu về AJAX GVHD: Đào Phan Vũ 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 của, nó sẽ báo hiệu và ta có thể đón để thể hiện những thay đổi cần thiết. Ứng dụng web truyền thống Ứng dụng AJAX 2.2 Hoạt động của công nghệ AJAX: Để AJAX có thể làm việc được, chúng ta phải chạy một công nghệ bên phía máy chủ như ASP.NET hay PHP. Ban đầu JavaScript sẽ gửi dữ liệu đến một URL theo cùng một cách thức điển hình của web, HTML sẽ gửi dữ liệu (thông qua một tiêu chuẩn yêu cầu là GET hoặc POST). Sự khác biệt chủ yếu ở đây là JavaScript có thể gửi các dữ liệu mà không cần phải rời khỏi trang (nó chỉ đơn giản là xảy ra đằng sau trình duyệt). Máy chủ sau quá trình xử lý, dữ liệu sẽ được gửi về dưới một tập tin XML thay vì một trang web. Sau đó JavaScript lấy những gì nó cần từ tập tin XML (vẫn xảy ra SVTH : Trần Minh Hoàng 8 Tìm hiểu về AJAX GVHD: Đào Phan Vũ hoàn toàn phía sau) và sử dụng dữ liệu đó để thao tác với DOM. Sau đó mới cho ra trang HTML trình bày trên máy client. Bởi vì tất cả những điều trên xảy ra phía sau trình duyệt , nên từ quan điểm của người dùng, chúng tương tác trực tiếp với trang web. Nhưng trên thực tế là đã diễn ra trên máy chủ - hoặc là các trang web đã được giao tiếp với một máy chủ bằng cách nào - là hoàn toàn ẩn với người sử dụng. Trong thực tế, điều này cho phép một trang web có khả năng xử lý giống một chương trình máy tính bình thường. Giả sử ta có một ứng dụng web sau, trong ứng dụng này có chứa một trang HTML tĩnh, hoặc một trang HTML được tạo ra bằng công nghệ JSP có chứa một trang HTML yêu cầu phía máy chủ xác nhận ID Một thành phần của máy chủ tên là ValidateServlet sẽ cung cấp các logic xác nhận ID đó có đúng không. Hình sau mô tả chi tiết của sự tương tác của các công nghệ trong Ajax. 1. Khi có một sự kiện xảy ra hay một yêu cầu bên máy Client. 2. Một đối tượng XMLHttpRequest sẽ được tạo ra và cấu hình. 3. Đối tượng XMLHttpRequest sẽ làm một cuộc gọi hay nói cách khác là XMLHttpRequest gửi yêu cầu đến máy chủ. 4. Yêu cầu gửi đi được ValidateServlet bên máy chủ xử lý. 5. Sau khi ValidateServlet xử lý xong, sẽ trả tài liệu về dưới dạng XML. 6. Đối tượng XMLHttpRequest sẽ gọi hàm callback() để xử lý kết quả trả về. 7. Sau khi xử lý xong file XML sẽ cho ra file HTML, và DOM cập nhật, update lên trình duyệt cho client. SVTH : Trần Minh Hoàng 9 Tìm hiểu về AJAX GVHD: Đào Phan Vũ Chi tiết hoạt động của từng bước cụ thể ta sẽ xét trong chương 2, sau khi chúng ta tìm hiểu chi tiết từng công nghệ trong AJAX. Trên đây chỉ là các bước hoạt động và sự tương tác qua lại của các công nghệ trong AJAX. SVTH : Trần Minh Hoàng 10