KỸ THUẬT LẬP TRÌNH AJAX KỸ THUẬT LẬP TRÌNH AJAX GiỚI THIỆU AJAX AJAX LÀ GÌ ? LẬP TRÌNH AJAX. CÁC ỨNG DỤNG SỬ DỤNG AJAX DEMO KẾT LUẬN 1LẬP TRÌNH AJAX LẬP TRÌNH AJAX 2 LẬP TRÌNH AJAX 3 LẬP TRÌNH AJAX 4 • Cờ Ca-rô (Gomoku) ứng dụng AJAX http://myjavaserver.com/~quangvhg/GomokuBoard.jsp?lang=vi GiỚI THIỆU  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.  Ajax đang tạo nên cuộc cách mạng trong thế giới web. 5LẬP TRÌNH AJAX LẬP TRÌNH AJAX 6 Công nghệ Web 2.0 và AJAX (Asynchronous JavaScript Technology and XML) ngày càng thu hút được sự quan tâm của giới doanh nghiệp trên khắp thế giới. Một trong những lý do chính khiến sự phổ biến của AJAX ngày càng tăng là ngôn ngữ kích bản dùng trong JavaScript của nó. Ngôn ngữ này cho phép tạo các form động cho hoạt động kiểm tra lỗi tích hợp sẵn, tạo các vùng tính toán trên trang Web, tương tác với người dùng thông qua cảnh báo và kiểm chứng thông tin, có thể thay đổi thường xuyên chương trình nền và màu sắc văn bản hay “các nút”, đọc URL history và đưa ra hành động dựa trên danh sách đó, mở và điều khiển các cửa sổ, cung cấp văn bản hoặc các phần trong văn bản khác nhau theo yêu cầu người dùng. AJAX không phải là một công nghệ. Nói chính xác hơn, nó là một tập hợp các công nghệ, trong đó mỗi công nghệ cung cấp một hệ thống cơ sở nền tảng cho thiết kế và phát triển ứng dụng Web: CÔNG NGHỆ WEB 2.0  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 với người dùng. LẬP TRÌNH AJAX 7  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). LẬP TRÌNH AJAX 8  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. LẬP TRÌNH AJAX 9 Khởi đầu một phiên hoạt động, thay vì tải về trang Web yêu cầu, cơ chế AJAX viết trong JS sẽ được load. Hoạt động giống như “người trung gian”, cơ chế này nằm giữa người dùng và Web Server. Nó cũng đóng vai trò như một giao diện gợi nhớ và như một phương tiện truyền thông cho trình duyệt trên máy khách và máy chủ.  Trước đây, nếu muốn đọc e-mail bạn phải trải qua một loạt cú kích chuột và gửi, truy vấn một loạt các khung tạo nên giao diện hiển thị nhiều e-mail người dùng khác nhau. Điều này thực sự làm giảm đáng kể tốc độ truy cập và sử dụng ứng dụng Web. Với truyền tải không đồng bộ, ứng dụng AJAX hoàn toàn loại bỏ được thao tác “chạy- dừng-dừng-chạy” rất khó chịu vốn tồn tại tự nhiên trong tương tác trên Web. Yêu cầu gửi tới server bây giờ hoàn toàn rõ ràng và dễ hiểu với người dùng. LẬP TRÌNH AJAX 10 [...]... XML LẬP TRÌNH AJAX 26 AJAX LÀ GÌ ?  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 Các ứng dụng Ajax xoay quanh một tính năng có tên là XMLHttpRequest LẬP TRÌNH AJAX 27 AJAX LÀ GÌ ?  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. .. 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 Ngược lại, trong ví dụ trên bạn có thể nhấn liên tục vài hộp kiểm để chọn/bỏ chọn các nhãn hiệu mà không cần chờ đợi LẬP TRÌNH AJAX 13 LẬP TRÌNH AJAX 14 Và đây là mô hình sử dụng AJAX: LẬP TRÌNH AJAX. .. ActiveXObject("Msxml2.XMLHTTP"); LẬP TRÌNH AJAX 31 LẬP TRÌNH AJAX  Ở 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(); LẬP TRÌNH AJAX 32 LẬP... phải là JScript của Microsoft LẬP TRÌNH AJAX 28 WEB APPLICATION CŨ  Ở 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 LẬP TRÌNH AJAX 29 WEB AJAX APPLICATION  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ì... if(displayPicture.equalsIgnoreCase("yes")) html += ""; html += ""; row++; } html += ""; // Write the HTML to response out.write(html); LẬP TRÌNH AJAX 25 AJAX LÀ GÌ ?  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...LẬP TRÌNH AJAX 11 Bây giờ hãy thử một ứng dụng đơn giản sử dụng AJAX: Mobile Phone Catalog tại liên kết này: Đây là một danh sách các model điê n thoại di đôêng, ê tính năng của chúng xếp theo tên hãng chế tạo LẬP TRÌNH AJAX 12 Khi bạn đánh dấu hộp kiểm chọn các nhãn hiệu, lập tức danh sách điện thoại của các các hãng xuất hiện ngay... 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 30 LẬP TRÌNH AJAX   Xử lý HTTP Request   Nếu MSXML được cài đặt thì bạn cũng có thể gọi: Để 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... params); return true; } LẬP TRÌNH AJAX 17 Hàm này sẽ xem có những nhãn hiệu nào được chọn và tạo nên một chuỗi (String) request (ví dụ nếu “Nokia” và “Samsung” được chọn thì chuồi này sẽ có dạng “MobileCatalogRender.jsp? brands=,Nokia,Samsung”) và gửi chuỗi này tới hàm retrieveURL() Đây là hàm quan trọng nhất nên ta sẽ xem xét kỹ từng dòng và ý nghĩa của các dòng lệnh này: LẬP TRÌNH AJAX 18 1 function... mobiles.add(nokia1()); mobiles.add(nokia2()); mobiles.add(nokia3()); } LẬP TRÌNH AJAX 22  if(brands[j].equalsIgnoreCase("samsung")){ mobiles.add(samsung1()); mobiles.add(samsung2()); mobiles.add(samsung3()); } if(brands[j].equalsIgnoreCase("motorola")){ mobiles.add(moto1()); mobiles.add(moto2()); mobiles.add(moto3()); } } LẬP TRÌNH AJAX 23  String html = " . KỸ THUẬT LẬP TRÌNH AJAX KỸ THUẬT LẬP TRÌNH AJAX GiỚI THIỆU AJAX AJAX LÀ GÌ ? LẬP TRÌNH AJAX. CÁC ỨNG DỤNG SỬ DỤNG AJAX DEMO KẾT LUẬN 1LẬP TRÌNH AJAX LẬP TRÌNH AJAX 2 LẬP TRÌNH AJAX 3 LẬP TRÌNH. hoàn toàn rõ ràng và dễ hiểu với người dùng. LẬP TRÌNH AJAX 10 LẬP TRÌNH AJAX 11 LẬP TRÌNH AJAX 12 Bây giờ hãy thử một ứng dụng đơn giản sử dụng AJAX: Mobile Phone Catalog tại liên kết này:      . quyết kĩ thuật đứng đằng sau các ứng dụng lớn thuộc Google: Flickr, GMail, Google Suggest, Google Maps.  Ajax đang tạo nên cuộc cách mạng trong thế giới web. 5LẬP TRÌNH AJAX LẬP TRÌNH AJAX 6 Công