Ajax là gì? Vì sao nên sử dụng Ajax cho web app?
Có bao giờ bạn thắc mắc tại sao khi tương tác, submit form... mà trang web đó không reload không? Cùng mình tìm hiểu lý do nhé!
#Ajax là gì?
Ajax (Asynchronous JavaScript and XML) là một kỹ thuật giúp cho ứng dụng web bất đồng bộ.
Kỹ thuật này giúp bạn có thể tạo ra trang web động với nội dung có thể thay đổi mà không cần phải reload trang. Chính vì không reload trang, nên giúp người dùng sẽ cảm thấy website mượt mà hơn, ngoài ra Ajax còn giúp tiết kiệm tài nguyên mạng.
*Asynchronous: Dịch lại là bất đồng bộ. Kỹ thuật bất đồng bộ tức là chương trình sẽ xử lý các hàm không theo một trình tự từ trên xuống. Chương trình cho tất cả các hàm được gọi vào một stack. Hàm nào xong trước thì trả kết quả trước, không ai phải chờ ai cả.
*JavaScript: một ngôn ngữ lập trình nổi tiếng. Dùng để viết ra kỹ thuật Ajax.
*XML: Là định dạng dữ liệu theo kiểu tag, giống như HTML. Hiện nay có 2 kiểu dịnh dạng dữ liệu là JSON và XML.
Sơ đồ hoạt động:
Với mô hình thông thường ( Normal HTTP Request ) :
- HTTP được gửi từ trình duyệt lên máy chủ.
- Máy chủ nhận, sau đó phản truy xuất thông tin.
- Server gửi dữ liệu được yêu cầu lại cho trình duyệt.
- Trình duyệt nhận dữ liệu và tải lại trang để hiển thị dữ liệu lên.
Với mô hình AJAX:
- Từ trình duyệt của client, ta có một sự kiện để gọi ajax. Khi đó javascript sẽ tạo nên một đối tượng XMLHttpRequest. Ở dưới nền, trình duyệt tạo một yêu cầu HTTP gửi lên server.
- Khi server nhận được HttpRequest từ đó sẽ xử lý request và trả về response cho web.
- Trình duyệt nhận dữ liệu và tải lại trang để hiển thị dữ liệu lên. Không cần tải lại toàn bộ trang..
Ajax là một bộ kỹ thuật chứ không phải ngôn ngữ lập trình, nó bao gồm:
- HTML/XHTML làm ngôn ngữ chính và CSS để tạo phong cách.
- The Document Object Model (DOM) để hiển thị dữ liệu động và tạo tương tác.
- XML để trao đổi dự liệu nội bộ và XSLT để xử lý nó. Nhiều lập trình viên đã thay thế bằng JSON vì nó gần với JavaScript hơn.
- XMLHttpRequest object để giao tiếp bất đồng bộ.
- Cuối cùng, JavaScript làm ngôn ngữ lập trình để kết nối toàn bộ các công nghệ trên lại.
Lợi ích của Ajax:
- AJAX được sử dụng để thực hiện một callback. Được dùng để thực hiện việc truy xuất dữ liệu hoặc lưu trữ dữ liệu mà không cần phải reload lại toàn bộ trang web. Với những server nhỏ thì việc này cũng tiết kiệm được băng thông cho chúng ta hơn.
- Cần gì thì chỉ gửi dữ liệu phần đó, load lại 1 phần nhỏ để cập nhật thông tin chứ không load cả trang. Bằng cách này thì có thể giảm thiểu được tốc độ tải trang giúp người dùng có trải nghiệm tốt hơn.
- Trang web bạn tạo ra cũng sẽ đa dạng và động hơn.
Ví dụ thực tế của AJAX:
Đánh giá xếp hạng:
Chắc hẳn ai trong các bạn cũng từng mua hàng online qua các website shopee, lazada...vv..Vậy có khi nào bạn từng đánh giá sản phẩm (rate star) hoặc bình luận sản phẩm chưa? Cả 2 hoạt động đó chắc hẳn sử dụng Ajax. Khi bạn click vào nút đánh giá hay bình luận, website sẽ nhận kết quả nhưng toàn trang web vẫn không đổi.
Loading newsfeed trên Facebook
Nếu các bạn để ý, mỗi lần có bài viết mới hay tin tức mới, facebook sẽ tự cập nhật news mà không load lại toàn bộ trang. Hoặc nếu bạn refresh thì nó chỉ load lại mỗi phần tin tức ở center chứ không phải toàn bộ.
-------------------------------------------------------------------------------------------------------------------------
AJAX tuy mang lại cho ta nhiều lợi ích nhưng không phải cái gì ta cũng sử dụng AJAX được. Bên cạnh đó nó cũng có mặt hạn chế nhất định của nó. Vì vậy chúng ta cũng nên cân nhắc xem sử dụng thế nào? Nên sử dụng ở đâu cho hợp lý. Một trang web dùng quá nhiều AJAX quá cũng không tốt, khi có nhiều người dùng như thế sẽ làm cho server nhận được quá nhiều request có thể gây chết server. Ta nên sử dụng ở những chức năng nhỏ như là ví dụ trên, vote bài viết, comment, rate, ...
Cảm ơn các bạn đã đọc bài viết.
