KỸ THUẬT LẬP TRÌNH AJAX

Chia sẻ: Tran Thanh | Ngày: | Loại File: PPT | Số trang:49

Thêm vào BST

Báo xấu

168
lượt xem 51
download

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

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.

Chủ đề:

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

Lưu

Nội dung Text: 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 LẬP TRÌNH AJAX 1
LẬP TRÌNH AJAX 2
LẬP TRÌNH AJAX 3
•Cờ Ca-rô (Gomoku) ứng dụng AJAX http://myjavaserver.com/~quangvhg/GomokuBoard.jsp?lang=vi LẬP TRÌNH AJAX 4
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. LẬP TRÌNH AJAX 5
CÔNG NGHỆ WEB 2.0 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: LẬP TRÌNH AJAX 6
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. 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ỳ. LẬP TRÌNH AJAX 7
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. LẬP TRÌNH AJAX 8
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. 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ủ. LẬP TRÌNH AJAX 9
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
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 thoai 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 ở bảng phía dưới mà không cần tải lại cả trang Web. So với cách thông 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í 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 15
Rõ ràng điểm khác biệt là thay vì phải tải cả trang Web thì với AJAX bạn chỉ cần tải về phần của trang Web mà bạn muốn thay đổi. Điều này giúp cho ứng dụng Web của bạn 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) – bất đồng bộ – tức là bạn 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 bạn, nó sẽ báo hiệu và bạn có thể “bắt 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? Chúng ta sẽ xem có gì trong source TRÌNHcủa ví dụ Mobile Phone Catalog. LẬP code AJAX 16
Digging into source code Thông thường một ứng dụng AJAX cần có hai thành phần (hay nhiều hơn): tạm gọi là front-end và back-end. Front-end dùng để thể gửi các XMLHttpRequest và thể hiện các thay đổi, còn back-end để xử lý các request và trả lại kết quả thay đổi cho front-end. Trong Mobile Phone Catalog, trang front-end (MobileCatalog.jsp ) rất đơn giản và không có gì thú vị ngoại trừ đoạn mã JavaScript. Mỗi khi người dùng ch ọn/bỏ ch ọn một hộp kiểm sẽ kích hoạt hàm displayItems(): function displayItems() { var params = "brands="; // check to see which checkboxes are checked and append them to the string. if (document.getElementById('checkBox1').checked == true) { params += ",Nokia" } // more here ... retrieveURL("MobileCatalogRender.jsp?" + 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 retrieveURL(url) { 2. if (window.XMLHttpRequest) { // Non-IE browsers 3. req = new XMLHttpRequest(); 4. req.onreadystatechange = processStateChange; 5. try { 6. req.open("GET", url, true); 7. } catch (e) { 8. alert(e); 9. } 10. req.send(null); 11. } else if (window.ActiveXObject) { // IE 12. req = new ActiveXObject("Microsoft.XMLHTTP"); 13. if (req) { 14. req.onreadystatechange = processStateChange; 15. req.open("GET", url, true); 16. req.send(); 17. } 18. } 19. } LẬP TRÌNH AJAX 19
- Dòng 2/dòng 11: Kiểm tra xem trình duyệt có hỗ trợ XMLHttpRequest hay không. Trong đó dòng 11 dùng cho trình duyệt của Microsoft - Internet Explorer (như các bạn thấy chúng ta phải tạo một ActiveX) còn dòng 2 dùng cho các trình duyệt khác (Mozilla, Safari, Opera). - Dòng 3/dòng 12: khời tạo đối tượng XMLHttpRequest. - Dòng 4/dòng 14: Gán event handler khi có phản hồi. Đây là dòng lệnh có ý nghĩa đặc biệt, nó cho phép chúng ta nhận phản hồi của back-end và cập nhật các thay đổi trên front-end. - Dòng 6/dòng 15+16: Gửi request từ front-end tới back-end dưới dạng một HTTP request. Ở đây chuỗi request là “MobileCatalogRender.jsp? brands=,Nokia,Samsung”. Sau khi gửi request đi, nếu có bất kỳ phản hồi gì từ back-end hàm processStateChange() sẽ được kích hoạt. Trong trường hợp lý tưởng back-end sẽ trả về một bảng danh sách các model điện thoại di động của hai hãng Nokia và Samsung. Hàm processStateChange() sẽ gán đoạn HTML trả về này vào div “theTable”, ngược lại sẽ hiện lên một thông báo lỗi: LẬP TRÌNH AJAX 20