Công nghệ AJAX

1. AJAX là gì?

AJAX là tập hợp của nhiều công nghệ với thế mạnh của riêng mình để tạp thành sức mạnh mới. AJAX bao gồm:
- Thể hiện web theo tiêu chuẩn XHTML và CSS, các chuẩn của W3C.
- Nâng tính năng động và phản hồi bằng DOM (Document object Model)
- Trao đổi và xử lí dữ liệu bằng XML.
- Truy cập dữ liệu bất đồng bộ bằng XMLHttpRequest.
- JavaScrip làm nhiệm vụ liên kết các công nghê trên.

2. So sánh AJAX với các ứng dụng công nghệ WEB truyền thống:

- Khi các công cụ web bùng nổ, người ta đã nghĩ đến một ngày nó sẽ thay thế các phân mềm chạy độc lập trên Client. Tuy nhiên, điều đó vẫn còn quá xa vời bởi những giới hạn của nó. Đầu tiên phải nói đến, đó là cách thức tương tác với người dùng. Mọi hoạt động đều phải thông qua phương thức giao dịch HTTP(HyperText Transport Photocol - Giao thức truyền tải siêu liên kết). Ví dụ: Khi bạn login trên blog của thèn bạn tui (http://congthinh.info). Trước tiên. nó sẽ lấy thông tin User + Pass và mã lệnh login gửi đến Server qua một siêu liên kết. Server nhận được data và mã lệnh thực thi xong gửi kết quả về dưới dạng HTML _CSS, trình duyệt reload trang để hiển thị kết quả.Nếu như ngày xưa, cái thời tôi còn học phổ thông, đọc được email của cô bạn phải mất gần 5-7 phút. TT.
Bạn thử login trên blog của thèn bạn tui chưa? Xong rồi bạn quay lại login cái blog tui thử. :)) (pro hơn )
Nó không gửi yêu cầu trực tiếp lên Server như trên mà gửi yêu cầu cho Ajax Engine, Ajax Engine đảm nhận cả 2 nhiệm vụ gửi và nhận. Thay vì gửi trả dữ liệu dạng HTML và CSS trực tiếp cho trình duyệt, web server gửi trả dữ liệu dạng XML cho Ajax Engine, Ajax Engine tiếp nhận và phân tích chuyển hóa thành XHTML + CSS cho trình duyệt hiển thị. Chính vì vậy khi bạn login trên blog này,trang không cần load lại.
Chung qui lại một điều là: Ajax chỉ tải về phần trang web muốn thay đổi, còn web truyền thống tải về tất cả, kể cả những phần không có thay đổi.

Giới thiệu sơ qua về các công nghệ trong AJAX

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 trú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.
XMLHttpRequest.
Đây có thể gọi là “trái tim” của Ajax. Là công cụ chủ yếu dùng để máy client tương tác với server. Như gửi, nhận các gói yêu cầu đến server. Ngoài ra nó còn nhiều thuôc tính nữa. Tuy nhiên mình không thể liệt kê hết ra đây. Bạn có thể tham khảo trong cuốn ebook đi kèm theo bài viết này. Nếu bạn muốn nghiên cứu sâu về AJAX, thì đây là phần không thể thiếu. Trong cuốn ebook trên cũng nói khá kỹ về đối tượng này. Hy vọng nó sẽ cung cấp cho bạn một cái nhìn toàn diện về AJAX.
Bài viết trên chỉ mang tính giới thiệu. Mình cũng muốn entry một bài đi sâu vào khai thác Ajax, nhưng vì kiến thức có hạn mình xin dừng ở đây.
——————————-
Sau đây là một ví dụ đơn giản sử dụng AJAX do mình viết. Bạn có thể tham khảo để hiểu hơn về AJAX.
Trong ví dụ mình viết một form đăng nhập cho user. Thay vì submit dữ liệu qua form lên cho server xử lí. Mình dùng hàm processReqChange() để giao tiếp với server(gửi và nhận dữ liệu). Nó sẽ làm nhiệm vụ đợi cho đến khi máy chủ phản hồi đã làm xong công việc,và bước tiếp theo là phân tích kết quả trả về từ file XML. Trong ví dụ trên, nó gửi yêu cầu gọi file process.php với các tham số là user và password. File process.php được gọi, thực hiện việc kiểm tra user và pass có hợp lệ hay không và sẽ trả về kết quả qua file XML là 0(nếu sai) hoặc 1(nếu đúng). Hàm processReqChange() nhận được phản hồi phân tích kết quả, gọi lại hàm Login để cập nhật giao diện. Bạn ngừng ở đây cho mình phân tích một tí. Bạn đã nhận thấy sự khác biệt giữa 2 công nghệ web truyền thống và AJAX rồi chứ! Web truyền thống chỉ đưa user +pass lên cho server làm rồi chờ server trả về nguyên trang ->load lại. AJAX chỉ hỏi server hai cái tham số này(user +pass) có hợp lệ hay không? Và ông(server ) chỉ cần trả lời 0 hoặc 1(false or true), sau đó nó cập nhật giao diện ngay trên form đăng nhập thôi. Một sự khác biệt khá lớn về tính linh hoạt của AJAX.

Theo Viettut.info

This entry was posted on Thứ tư, Tháng bảy 16th, 2008 at 10:22 sáng and is filed under Công nghệ. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply