VnTim™<> AJAX là gì?
AJAX, viết tắt của cụm từ "Asynchronous JavaScript And XML", là sự kết hợp của các công nghệ: CSS , DOM, XMLHttpRequest, JavaScript.
Với mô hình web truyền thống, client gửi một HTTP request lên server, server tiếp nhận request, tiến hành các tác vụ xử lý nào đó như insert, update, delete, retrive ... rồi sau đó trả lại một trang HTML hoàn toàn mới. Vấn đề của mô hình này là ở chỗ trong thời gian server tính toán, xử lý, tất cả những việc mà người dùng có thể làm là chờ và chờ. Trong trường hợp đường truyền mạng chậm thì tốt nhất là nên bỏ ra ngoài làm một tách cafe để khỏi sốt ruột.
Với AJAX, ta có thể submit một request lên server (ví dụ các thông tin trong một form chẳng hạn), server nhận request và đáp trả gần như ngay tức khắc cho client mà không cần phải nạp lại trang. Có thể xem việc submit dữ liệu từ client lên server như là một tác vụ “chạy nền” bên dưới mà người dùng không nhận thấy. Điều này làm cho các ứng dụng web ngày càng gần với các ứng dụng desktop hơn về độ thân thiện cũng như tốc độ và sự tiện dụng.
Hình 1: Mô hình ứng dụng web truyền thống (bên trái) so với mô hình ứng dụng AJAX (bên phải)
AJAX đã làm điều đó như thế nào?
AJAX sử dụng AJAX engine – một dịch vụ web được viết bằng java script, nằm ở giữa client và server, thường được giấu trong một frame ẩn. Thay vì phải nạp lại cả trang, vào thời điểm khởi động session, trình duyệt nạp AJAX engine. Engine này có nhiệm vụ đảm trách việc trả lại kết xuất cho người dùng thấy và đóng vai trò thông tin liên lạc với server. AJAX engine cho phép người dùng tương tác với ứng dụng bất đồng bộ – độc lập trong việc liên lạc với server. Do đó, người dùng không bao giờ phải chờ đợi server xử lý một tác vụ nào đó.
Mọi tác động của người dùng thông thường đều sinh ra một HTTP request nắm giữ form của một lời gọi JavaScript đến AJAX engine. Bất cứ một đáp trả nào đến người dùng đều không đòi hỏi một sự kế nối nào ngược lại với server – ví dụ như việc validation dữ liệu, hiệu chỉnh dữ liệu bên trong bộ nhớ... Nếu như engine cần một cái gì đó ở server để có thể đáp trả cho client – nếu như trong trường nó submit dữ liệu để xử lý, nạp các mã giao diện khác hay là tải về dữ liệu mới – engine tạo các yêu cầu này bất đồng bộ, thông thường sử dụng XML mà không cần thông qua một sự tương tác của người dùng với ứng dụng.
AJAX là gì làm quen với Ajax alt="" src="http://my.opera.com/dangngocgiao/homes/acticles/what_is_ajax/ajax-fig2.png" />
Hình 2: Tương tác đồng bộ (trên) so với tương tác bất đồng bộ (dưới)
Vai trò của các công nghệ khác nhau trong AJAX
JavaScript: JavaScript trong một trang được gọi khi một sự kiện nào đó phát sinh trong trang
DOM: DOM cung cấp API cho phép truy xuất và thao tác động trên các tài liệu có cấu trúc thể hiện cấu trúc của XML và HTML
CSS: CSS cho phép tách bạch việc thể hiện presentation và nội dung, có thể thay thay đổi động bằng cách dùng JavaScript
XMLHttpRequest: XMLRequest là thành phần quan trọng nhất trong AJAX, nó cho phép gửi dữ liệu bất đồng bộ lên server. Một điểm cần lưu ý là với IE, đối tượng XMLRequest được hiện thực như là một phần của ActiveXObject. Điều này là quan trọng khi ta muốn xây dựng các các ứng dụng web cross platform, với mỗi trình duyệt cụ thể thì cách thức ta khởi tạo đối tượng này cũng khác nhau. Tại sao W3C chưa approve XMLHttpRequest nhỉ? Nhưng dù sao cũng đáng mừng thì với IE 7, ta có thể khởi tạo đối tượng XMLRequest giống như với việc khởi tạo đối tượng này trong FireFox, Safari …
Ứng dụng AJAX trên Internet
Google map (http://maps.google.com), Gmail (http://gmail.com) … là các ví dụ hoành tráng nhất về việc sử dụng AJAX cho các ứng dụng web
Đặc tính của XMLHttpRequest
+ Tài liệu trả về phải là text/xml
+ Trang web hiện hành vẫn tiếp tục phát sinh các sự hiện trong khi đối tượng XMLHttpRequest chạy nền bên dưới
+ Chỉ có phép một số lượng giới hạn request được gửi lên
+ Cho phép ta chỉ định một hàm xử lý ứng với trạng thái thay đổi, hàm xử lý được kích hoạt khi request ở các trạng thái: khởi tạo, bắt đầu, đang trả về, hoàn tất
Các hàm, thuộc tính thông dụng của XMLHttpRequest
onreadystatechange: hàm nắm giữ xử lý sự kiện, được kích hoạt mỗi khi trang thái thay đổi, ta phải tự hiện thực các hàm xử lý sự kiện cho mình
readyState: trạng thái hiện hành của request, có giá trị là 0 - chưa được khởi tạo, 1 - đang nạp, 2 - đã nạp xong, 3 – đang trong tiến trình đáp trả, 4 – hoàn tất
status: Trạng thái của HTTP trả lại từ server – 200 = OK
responseText: Dữ liệu trả về từ server dưới dạng chuỗi
responseXML: Dữ liệu trả về từ server dưới dạng tài liệu XML
statusText: Trạng thái text trả về từ server
Xây dựng một demo nho nhỏ với AJAX
Để kết thúc bài viết này, ta sẽ xây dựng ứng dụng demo “Tìm kiếm thông tin sách”. Giả sử ta có một cơ sở dữ liệu chứa thông tin về sách, với đơn giản chỉ có 2 trường là NAME và AUTHOR. Ứng dụng của chúng ta đơn giản chỉ với một màn hình cho phép người dùng nhập tiêu chí tìm kiếm theo tên sách và tên tác giả. Khi người dùng nhập truy vấn, ứng dụng trả về ngay kết quả khớp với truy vấn đã nhập vào mà không cần phải vẽ lại trang mới. Để đơn giản, dễ hiểu và có thể chạy ứng dụng này một cách dễ dàng cho những người mới, ta hard-code cơ sở dữ liệu ngay trong code Java.
Hình 3: Ứng dụng demo
Đáng lẽ phải viết vài dòng giải thích source code chương trình ở đây cho phải đạo nhưng vì … buồn ngủ rồi nên để khi nào rảnh bổ sung sau. Với lại source được viết đơn giản đến mức tối đa và rõ ràng, nên chắc cũng chẳng khó hiểu, hehehe. Có thể download file war hoặc source code về tham khảo theo các link dưới.
File war: http://my.opera.com/dangngocgiao/homes/acticles/what_is_ajax/BookSearchDemo.war
File source: http://my.opera.com/dangngocgiao/homes/acticles/what_is_ajax/BookSearchDemo_SRC.zip
Tài liệu tham khảo
Manning Ajax In Action – Dave Crane, Eric Pascarello and Darren James
Foundations of AJAX – Ryan Asleson and Nathaniel T. Schutta
Tác giả: Đặng Ngọc Giao
Mobile: 0988848223
Email: giaodn@gmail.com, giao_dn@yahoo.com
AJAX, viết tắt của cụm từ "Asynchronous JavaScript And XML", là sự kết hợp của các công nghệ: CSS , DOM, XMLHttpRequest, JavaScript.
Với mô hình web truyền thống, client gửi một HTTP request lên server, server tiếp nhận request, tiến hành các tác vụ xử lý nào đó như insert, update, delete, retrive ... rồi sau đó trả lại một trang HTML hoàn toàn mới. Vấn đề của mô hình này là ở chỗ trong thời gian server tính toán, xử lý, tất cả những việc mà người dùng có thể làm là chờ và chờ. Trong trường hợp đường truyền mạng chậm thì tốt nhất là nên bỏ ra ngoài làm một tách cafe để khỏi sốt ruột.
Với AJAX, ta có thể submit một request lên server (ví dụ các thông tin trong một form chẳng hạn), server nhận request và đáp trả gần như ngay tức khắc cho client mà không cần phải nạp lại trang. Có thể xem việc submit dữ liệu từ client lên server như là một tác vụ “chạy nền” bên dưới mà người dùng không nhận thấy. Điều này làm cho các ứng dụng web ngày càng gần với các ứng dụng desktop hơn về độ thân thiện cũng như tốc độ và sự tiện dụng.
Hình 1: Mô hình ứng dụng web truyền thống (bên trái) so với mô hình ứng dụng AJAX (bên phải)AJAX đã làm điều đó như thế nào?
AJAX sử dụng AJAX engine – một dịch vụ web được viết bằng java script, nằm ở giữa client và server, thường được giấu trong một frame ẩn. Thay vì phải nạp lại cả trang, vào thời điểm khởi động session, trình duyệt nạp AJAX engine. Engine này có nhiệm vụ đảm trách việc trả lại kết xuất cho người dùng thấy và đóng vai trò thông tin liên lạc với server. AJAX engine cho phép người dùng tương tác với ứng dụng bất đồng bộ – độc lập trong việc liên lạc với server. Do đó, người dùng không bao giờ phải chờ đợi server xử lý một tác vụ nào đó.
Mọi tác động của người dùng thông thường đều sinh ra một HTTP request nắm giữ form của một lời gọi JavaScript đến AJAX engine. Bất cứ một đáp trả nào đến người dùng đều không đòi hỏi một sự kế nối nào ngược lại với server – ví dụ như việc validation dữ liệu, hiệu chỉnh dữ liệu bên trong bộ nhớ... Nếu như engine cần một cái gì đó ở server để có thể đáp trả cho client – nếu như trong trường nó submit dữ liệu để xử lý, nạp các mã giao diện khác hay là tải về dữ liệu mới – engine tạo các yêu cầu này bất đồng bộ, thông thường sử dụng XML mà không cần thông qua một sự tương tác của người dùng với ứng dụng.
AJAX là gì làm quen với Ajax alt="" src="http://my.opera.com/dangngocgiao/homes/acticles/what_is_ajax/ajax-fig2.png" />
Hình 2: Tương tác đồng bộ (trên) so với tương tác bất đồng bộ (dưới)
Vai trò của các công nghệ khác nhau trong AJAX
JavaScript: JavaScript trong một trang được gọi khi một sự kiện nào đó phát sinh trong trang
DOM: DOM cung cấp API cho phép truy xuất và thao tác động trên các tài liệu có cấu trúc thể hiện cấu trúc của XML và HTML
CSS: CSS cho phép tách bạch việc thể hiện presentation và nội dung, có thể thay thay đổi động bằng cách dùng JavaScript
XMLHttpRequest: XMLRequest là thành phần quan trọng nhất trong AJAX, nó cho phép gửi dữ liệu bất đồng bộ lên server. Một điểm cần lưu ý là với IE, đối tượng XMLRequest được hiện thực như là một phần của ActiveXObject. Điều này là quan trọng khi ta muốn xây dựng các các ứng dụng web cross platform, với mỗi trình duyệt cụ thể thì cách thức ta khởi tạo đối tượng này cũng khác nhau. Tại sao W3C chưa approve XMLHttpRequest nhỉ? Nhưng dù sao cũng đáng mừng thì với IE 7, ta có thể khởi tạo đối tượng XMLRequest giống như với việc khởi tạo đối tượng này trong FireFox, Safari …
Ứng dụng AJAX trên Internet
Google map (http://maps.google.com), Gmail (http://gmail.com) … là các ví dụ hoành tráng nhất về việc sử dụng AJAX cho các ứng dụng web
Đặc tính của XMLHttpRequest
+ Tài liệu trả về phải là text/xml
+ Trang web hiện hành vẫn tiếp tục phát sinh các sự hiện trong khi đối tượng XMLHttpRequest chạy nền bên dưới
+ Chỉ có phép một số lượng giới hạn request được gửi lên
+ Cho phép ta chỉ định một hàm xử lý ứng với trạng thái thay đổi, hàm xử lý được kích hoạt khi request ở các trạng thái: khởi tạo, bắt đầu, đang trả về, hoàn tất
Các hàm, thuộc tính thông dụng của XMLHttpRequest
onreadystatechange: hàm nắm giữ xử lý sự kiện, được kích hoạt mỗi khi trang thái thay đổi, ta phải tự hiện thực các hàm xử lý sự kiện cho mình
readyState: trạng thái hiện hành của request, có giá trị là 0 - chưa được khởi tạo, 1 - đang nạp, 2 - đã nạp xong, 3 – đang trong tiến trình đáp trả, 4 – hoàn tất
status: Trạng thái của HTTP trả lại từ server – 200 = OK
responseText: Dữ liệu trả về từ server dưới dạng chuỗi
responseXML: Dữ liệu trả về từ server dưới dạng tài liệu XML
statusText: Trạng thái text trả về từ server
Xây dựng một demo nho nhỏ với AJAX
Để kết thúc bài viết này, ta sẽ xây dựng ứng dụng demo “Tìm kiếm thông tin sách”. Giả sử ta có một cơ sở dữ liệu chứa thông tin về sách, với đơn giản chỉ có 2 trường là NAME và AUTHOR. Ứng dụng của chúng ta đơn giản chỉ với một màn hình cho phép người dùng nhập tiêu chí tìm kiếm theo tên sách và tên tác giả. Khi người dùng nhập truy vấn, ứng dụng trả về ngay kết quả khớp với truy vấn đã nhập vào mà không cần phải vẽ lại trang mới. Để đơn giản, dễ hiểu và có thể chạy ứng dụng này một cách dễ dàng cho những người mới, ta hard-code cơ sở dữ liệu ngay trong code Java.
Hình 3: Ứng dụng demo
Đáng lẽ phải viết vài dòng giải thích source code chương trình ở đây cho phải đạo nhưng vì … buồn ngủ rồi nên để khi nào rảnh bổ sung sau. Với lại source được viết đơn giản đến mức tối đa và rõ ràng, nên chắc cũng chẳng khó hiểu, hehehe. Có thể download file war hoặc source code về tham khảo theo các link dưới.
File war: http://my.opera.com/dangngocgiao/homes/acticles/what_is_ajax/BookSearchDemo.war
File source: http://my.opera.com/dangngocgiao/homes/acticles/what_is_ajax/BookSearchDemo_SRC.zip
Tài liệu tham khảo
Manning Ajax In Action – Dave Crane, Eric Pascarello and Darren James
Foundations of AJAX – Ryan Asleson and Nathaniel T. Schutta
Tác giả: Đặng Ngọc Giao
Mobile: 0988848223
Email: giaodn@gmail.com, giao_dn@yahoo.com
