AJAX là gì? Cách sử dụng AJAX để tối ưu hoá hiệu suất website

AJAX là gì?

AJAX là chữ viết tắt của Asynchronous JavaScript and XML. Đây là công nghệ  hỗ trợ cho các website Web động, không cần tải lại trang (reload) nên khiến website đẹp và mượt mà. Vậy Asynchronous, JavaScript, XML trong từ AJAX là gì?

Asynchronous trong AJAX là gì?

Trong AJAX (Asynchronous JavaScript and XML), khái niệm “asynchronous” (bất đồng bộ) ám chỉ việc thực hiện các yêu cầu HTTP mà không chặn hoặc tạm dừng thực thi các tác vụ khác trong trang web. Điều này cho phép trang web tiếp tục tương tác với người dùng mà không bị treo đợi phản hồi từ máy chủ.

Khi sử dụng các yêu cầu bất đồng bộ trong AJAX, trình duyệt gửi yêu cầu HTTP đến máy chủ và tiếp tục thực thi các tác vụ khác mà không chờ đợi phản hồi từ máy chủ. Khi máy chủ trả về kết quả, trình duyệt sẽ xử lý phản hồi đó thông qua một hàm callback được xác định trước.

Việc sử dụng các yêu cầu bất đồng bộ cho phép trang web thực hiện các hoạt động như tải dữ liệu từ máy chủ, gửi dữ liệu lên máy chủ và cập nhật giao diện người dùng mà không gây gián đoạn hoạt động của trang web.

Thông qua việc sử dụng kỹ thuật bất đồng bộ, AJAX cung cấp một cách tiếp cận linh hoạt để tạo ra trải nghiệm tương tác người dùng tốt hơn trong các ứng dụng web.

JavaScript là gì?

JavaScript là một ngôn ngữ lập trình phía máy khách (client-side) phổ biến và mạnh mẽ. Ban đầu được phát triển để cung cấp khả năng tương tác động trên các trang web, JavaScript đã phát triển thành một ngôn ngữ chuyên nghiệp và linh hoạt, được sử dụng rộng rãi không chỉ trong việc phát triển ứng dụng web mà còn trong nhiều lĩnh vực khác như ứng dụng di động, game, máy tính cá nhân và cả máy chủ.

JavaScript có thể chạy trực tiếp trên trình duyệt web của người dùng mà không cần bất kỳ công cụ hoặc máy chủ nào khác. Nó cho phép các nhà phát triển web thêm các tương tác động vào trang web bằng cách điều khiển các phần tử HTML, thay đổi nội dung và kiểu dáng của trang, gửi và nhận dữ liệu từ máy chủ mà không cần phải tải lại trang.

JavaScript cung cấp nền tảng để thực hiện các tính năng như kiểm tra và xử lý dữ liệu đầu vào của người dùng, thay đổi nội dung trang web dựa trên sự kiện người dùng, tạo ra hiệu ứng động, gửi yêu cầu dữ liệu qua mạng và nhiều tính năng khác.

Ngoài ra, JavaScript có cú pháp đơn giản và linh hoạt, hỗ trợ hướng đối tượng và có một loạt các thư viện và framework phổ biến như React, Angular và Vue.js để giúp phát triển ứng dụng web một cách dễ dàng và hiệu quả.

XML là gì?

XML (eXtensible Markup Language) là một ngôn ngữ đánh dấu dựa trên văn bản được sử dụng để lưu trữ và truyền dữ liệu. Nó được thiết kế để đảm bảo tính dễ đọc, dễ hiểu và dễ dùng cho con người và các hệ thống máy tính.

XML sử dụng các thẻ để đánh dấu các phần tử trong dữ liệu. Mỗi phần tử được bao bọc bởi một cặp thẻ mở và thẻ đóng, và có thể chứa nội dung và/hoặc các thuộc tính. Ví dụ:

XML cho phép định nghĩa các cấu trúc dữ liệu tùy chỉnh bằng cách sử dụng các tập tin DTD (Document Type Definition) hoặc các tập tin Schema. Điều này cho phép đảm bảo tính nhất quán và kiểm tra hợp lệ của dữ liệu.

XML được sử dụng rộng rãi trong nhiều lĩnh vực và ứng dụng khác nhau, bao gồm việc truyền tải dữ liệu giữa các hệ thống, lưu trữ cấu hình, giao tiếp giữa các ứng dụng và nền tảng khác nhau, cũng như trong việc tạo dữ liệu động trên các trang web thông qua AJAX (Asynchronous JavaScript and XML).

Cùng với JSON (JavaScript Object Notation), XML là một trong những định dạng phổ biến để truyền và lưu trữ dữ liệu có cấu trúc.

Cả JavaScript và XML đều hoạt động bất đồng bộ trong AJAX. Kết quả là, nhiều ứng dụng web có thể sử dụng AJAX để gửi và nhận data từ server mà không phải toàn bộ trang.

Ví dụ thực tế của AJAX

AJAX trước đây

Bạn hãy nhớ đến tính năng tự động hoàn thiện của Google. Nó giúp bạn dự đoán và hoàn thiện từ khóa trong quá trình gõ. Từ khóa thay đổi theo thời gian thực nhưng trang web của Google vẫn giữ nguyên như cũ. Trong thập niên 90s, khi internet vẫn chưa phát triển, tính năng này cần Google phải cho tải trang lại mỗi lần có đề nghị mới hiện lên màn hình. AJAX giúp việc trao đổi dữ liệu nội bộ và presentation layer hoạt động đồng thời. Tuy nhiên không ảnh hưởng đến chức năng của nhau.

Ý tưởng của AJAX đã thực sự có từ giữ thập kỷ 90. Nhờ Google, nó đã được công nhận rộng rãi hơn khi mà Google triển khai ý tưởng này lên Google Mail và Google Maps năm 2004. Ngày nay, nó đã được dùng khắp các ứng dụng web để tinh giản quá trình giao tiếp với server.

AJAX ngày nay

Hệ thống đánh giá và xếp hạng

Bạn đã từng bao giờ đưa đánh giá về sản phẩm bạn mua online chưa? Đã bao giờ thử điền form bầu chọn online chưa? Cả 2 hoạt động này chắc hẳn đều sử dụng AJAX. Khi bạn click vào nút đánh giá hay bình chọn, website sẽ nhận kết quả nhưng toàn trang web vẫn không đổi.

Chat rooms

Một số Website tích hợp chatroom (phòng chat) để khách hàng có thể nói chuyện trực tiếp (chat) với nhân viên hỗ trợ. Nếu mỗi lần gửi đi một câu chat mà web phải tải lại thì đúng là “tra tấn khách hàng!”. Lúc này AJAX thể hiện vai trò “chiến thuật” của nó khi giúp website không phải tại lại mặc dù khách hàng và nhân viên công ty chat hàng nghìn dòng ^^.

Thông báo trending của Twitter

Twitter đã từng sử dụng AJAX: Mỗi lần có Tweet mới trong các Hot Topícs, Twitter sẽ cập nhật thông tin mới mà không ảnh hưởng gì đến trang chính.

Tóm lại

AJAX hoạt động một cách đa nhiệm. Cách nhân biết web có sử dụng AJAX không nhanh nhất là để ý các tác vụ đồng thời, nếu có những tác vụ động bên cạnh các tác vụ tĩnh, đó có thể là AJAX đang được thực thi.

Cách thức AJAX hoạt động

AJAX không phải là một ngôn ngữ lập trình và cũng không phải là một công nghệ chạy độc lập. Nó là một bộ kỹ thuật dùng để phát triển web vô cùng phức tạp, bao gồm:

HTML/XHTML

• Mục đích: Làm ngôn ngữ chính và tạo ra các phong cách (style) thông qua Css.
• HTML là gì? HTML là viết tắt của HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản). Đây là một ngôn ngữ lập trình sử dụng để xây dựng và biểu diễn các trang web. HTML được sử dụng để cấu trúc và định dạng nội dung trên trang web bằng cách sử dụng các thẻ và các thành phần khác nhau. Mỗi thành phần trong HTML được đóng gói trong các thẻ, và thông qua việc sắp xếp, định dạng, và gắn kết các thẻ này lại với nhau, người dùng có thể tạo ra các trang web với các tiêu đề, đoạn văn bản, hình ảnh, liên kết, bảng, biểu đồ và nhiều thành phần khác. HTML cung cấp một cấu trúc cơ bản cho trang web, và các trình duyệt web đọc và hiển thị nội dung của các tệp HTML để người dùng có thể xem và tương tác với nó trên Internet.

• XHTML là gì? XHTML là viết tắt của Extensible HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản mở rộng). Nó là một phiên bản nghiêm ngặt hơn và tiêu chuẩn hóa hơn của HTML. XHTML được thiết kế để tuân thủ các quy tắc XML, là một ngôn ngữ đánh dấu được sử dụng để định dạng và cấu trúc dữ liệu. XHTML sử dụng các quy tắc cú pháp XML, đảm bảo tính nhất quán và đúng đắn của cú pháp. Điều này đồng nghĩa rằng XHTML yêu cầu các thẻ phải được đóng và xếp chồng lên nhau theo thứ tự đúng và phải sử dụng các thuộc tính trong cặp dấu nháy kép. Ngoài ra, XHTML yêu cầu sử dụng các ký tự đặc biệt và các thẻ phải được định nghĩa trong một tệp tin DTD (Document Type Definition) riêng biệt. Mục tiêu của XHTML là làm cho các trang web tương thích với các tiêu chuẩn XML, đảm bảo tính nhất quán và tương thích giữa các trình duyệt, cũng như làm cho việc phân tích và xử lý dữ liệu trên trang web dễ dàng hơn. Tuy nhiên, trong những năm gần đây, HTML5 đã trở thành tiêu chuẩn chính cho việc phát triển web, và việc sử dụng XHTML đã giảm đi đáng kể.

• Css là gì? CSS (Cascading Style Sheets) là một ngôn ngữ đánh dấu được sử dụng để mô tả và định dạng giao diện của một trang web. Nó là một phần quan trọng của các công nghệ web và được sử dụng để xác định kiểu dáng, màu sắc, kích thước, vị trí và các thuộc tính khác của các phần tử trên trang web. CSS giúp tách biệt phần nội dung (HTML) và phần kiểu dáng (CSS) trong một trang web. Thay vì đặt các thông tin kiểu dáng trực tiếp trong mã HTML, ta có thể sử dụng CSS để xác định các quy tắc và thuộc tính cho các phần tử HTML. Như vậy, ta có thể thay đổi toàn bộ kiểu dáng của một trang web chỉ bằng cách chỉnh sửa mã CSS mà không làm ảnh hưởng đến nội dung HTML. CSS sử dụng các lựa chọn và cú pháp đơn giản để chọn và xác định kiểu dáng cho các phần tử HTML. Nó cung cấp một loạt các thuộc tính và giá trị để tùy chỉnh màu sắc, phông chữ, đường viền, kích thước, độ rộng, vị trí và hiệu ứng của các phần tử trên trang web. Với CSS, người phát triển web có thể tạo ra các trang web có kiểu dáng linh hoạt, hấp dẫn và thân thiện với người dùng. CSS cũng hỗ trợ việc tạo ra các trang web đáp ứng (responsive), tức là có thể tự động thay đổi kiểu dáng và bố cục dựa trên kích thước màn hình của thiết bị người dùng.

The Document Object Model (DOM)

• Mục đích: Để hiển thị dữ liệu động và tạo tương tác.
• The Document Object Model (DOM) là gì? The Document Object Model (DOM) là một giao diện lập trình ứng dụng (API) cho HTML và XML, cho phép truy cập và thay đổi cấu trúc, nội dung và kiểu dáng của một trang web. Khi một trang web được tải lên trong trình duyệt, trình duyệt sẽ tạo ra một biểu diễn nội bộ của trang đó, gọi là DOM. DOM biểu diễn trang web dưới dạng một cấu trúc cây, trong đó mỗi phần tử HTML trên trang được biểu diễn bởi một nút trong cây. Những nút này có thể được truy cập, thay đổi và tương tác thông qua JavaScript hoặc bất kỳ ngôn ngữ lập trình nào hỗ trợ DOM API. DOM cho phép các nhà phát triển web tương tác với các phần tử HTML trên trang, thêm hoặc xóa phần tử, thay đổi nội dung và kiểu dáng, bắt sự kiện và thực hiện các hành động động dựa trên sự tương tác của người dùng. Các thao tác trên DOM có thể được sử dụng để tạo ra các trang web tương tác và động, cập nhật nội dung trang mà không cần tải lại trang hoặc tương tác với người dùng. DOM cung cấp một tập hợp các phương thức và thuộc tính để truy cập và thay đổi DOM. Các phần tử trên trang web có thể được tìm kiếm bằng cách sử dụng các phương thức như getElementById, querySelector hoặc getElementsByClassName. Sau đó, các thuộc tính và phương thức như innerHTML, setAttribute, appendChild có thể được sử dụng để thay đổi nội dung và cấu trúc của các phần tử. Tổng quan, DOM là một phần quan trọng của việc phát triển web tương tác, cho phép truy cập và thay đổi cấu trúc và nội dung của một trang web thông qua mã lập trình.

XML

• Mục đích: 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.
• XML là gì? Xem ở trên ạ.

XMLHttpRequest object

• Mục đích: XMLHttpRequest object để giao tiếp bất đồng bộ.
• XMLHttpRequest object là gì? XMLHttpRequest object (đối tượng XMLHttpRequest) là một API trong JavaScript cho phép tạo và gửi các yêu cầu HTTP đến một máy chủ và nhận phản hồi từ máy chủ đó mà không cần tải lại trang web. Nó cho phép trao đổi dữ liệu giữa trình duyệt và máy chủ một cách bất đồng bộ (asynchronously). Với đối tượng XMLHttpRequest, bạn có thể gửi các yêu cầu HTTP như GET, POST, PUT, DELETE và nhận phản hồi từ máy chủ. Bằng cách sử dụng các sự kiện và phương thức của đối tượng này, bạn có thể xử lý dữ liệu nhận được từ máy chủ và cập nhật giao diện người dùng mà không làm tải lại toàn bộ trang web.

JavaScript

• Mục đích: Javascript được dùng làm ngôn ngữ lập trình để kết nối toàn bộ các công nghệ trên thành một bộ thống nhất.
• JavaScript là gì? JavaScript là một ngôn ngữ lập trình thông dịch (interpreted) và đa nền tảng. Nó được sử dụng chủ yếu trong việc phát triển ứng dụng web, cho phép tương tác với người dùng và thay đổi nội dung động của trang web. JavaScript ban đầu được tạo ra để thực hiện các tác vụ đơn giản trên trình duyệt web, như kiểm tra biểu mẫu, kiểm tra dữ liệu đầu vào và thực hiện các hiệu ứng đơn giản trên trang. Tuy nhiên, ngôn ngữ này đã phát triển rất nhanh và trở thành một ngôn ngữ lập trình phổ biến và mạnh mẽ. JavaScript không chỉ chạy trong môi trường trình duyệt web, mà còn được sử dụng trong các ứng dụng máy chủ (server-side) thông qua các framework như Node.js. Điều này cho phép xây dựng các ứng dụng web đa nền tảng hoặc ứng dụng back-end. JavaScript có cú pháp giống với các ngôn ngữ lập trình khác như C, Java, và C++, nhưng có một số đặc điểm riêng. Nó hỗ trợ các kiểu dữ liệu như số, chuỗi, mảng, đối tượng và boolean. JavaScript cũng cung cấp các cấu trúc điều khiển như điều kiện if-else, vòng lặp for và while, và hỗ trợ các hàm để tái sử dụng mã. JavaScript có thể tương tác với các phần tử HTML và CSS trên trang web thông qua Document Object Model (DOM) và Cascading Style Sheets (CSS). Nó cung cấp các API và thư viện để thao tác với DOM, gửi yêu cầu HTTP, xử lý dữ liệu JSON, và thực hiện nhiều tác vụ khác. Với sự phát triển mạnh mẽ của JavaScript và sự xuất hiện của các framework và thư viện như React, Angular và Vue.js, JavaScript đã trở thành một ngôn ngữ lập trình quan trọng trong việc xây dựng các ứng dụng web phức tạp và tương tác.

Sơ đồ hoạt động

Bảng so sánh

Lý do nên dùng AJAX?

Có 4 lợi ích chính của việc sử dụng Ajax, cụ thể là:

1. Callbacks: Ajax cho phép thực hiện các cuộc gọi lại (callbacks). Nó thực hiện việc truy xuất và/hoặc lưu trữ dữ liệu mà không cần gửi lại toàn bộ trang web lên máy chủ. Bằng cách chỉ gửi một phần trang web đến máy chủ, việc sử dụng mạng được giảm thiểu và hoạt động diễn ra nhanh chóng. Điều này có thể cải thiện đáng kể hiệu suất mạng, đặc biệt là trên các trang web có băng thông hạn chế. Dữ liệu được gửi và nhận từ máy chủ chỉ là tối thiểu.
2. Thực hiện các cuộc gọi không đồng bộ: Ajax cho phép thực hiện các cuộc gọi không đồng bộ tới máy chủ web. Điều này cho phép trình duyệt của người dùng tránh việc phải chờ đợi cho tất cả dữ liệu được tải về trước khi cho phép người dùng tương tác tiếp. Thay vào đó, người dùng có thể tiếp tục tương tác với trang web trong khi dữ liệu đang được truy xuất.
3. Thân thiện với người dùng: Vì không cần phải gửi lại toàn bộ trang web lên máy chủ, các ứng dụng sử dụng Ajax thường nhanh hơn và tạo trải nghiệm thân thiện với người dùng. Người dùng không phải chờ đợi để trang web làm mới hoặc tải lại, mà có thể tiếp tục tương tác một cách liền mạch.
4. Tăng tốc độ: Mục tiêu chính của Ajax là cải thiện tốc độ, hiệu suất và khả năng sử dụng của ứng dụng web. Một ví dụ điển hình của Ajax là tính năng xếp hạng phim trên Netflix. Người dùng có thể đánh giá và xếp hạng một bộ phim, và xếp hạng cá nhân của họ được lưu trữ vào cơ sở dữ liệu mà không cần chờ đợi trang web làm mới hoặc tải lại.

Nên sử dụng Ajax ở đâu?

Ajax nên được sử dụng trong ứng dụng web ở nhiều vị trí khác nhau, đặc biệt là trong các trường hợp mà chỉ cần lấy hoặc lưu một lượng nhỏ thông tin từ máy chủ mà không cần tải lại toàn bộ trang web.

Một ví dụ cụ thể để minh họa việc sử dụng Ajax trong một trang web bán hàng có thể là khi người dùng chọn thành phố giao hàng. Thay vì tải lại toàn bộ trang web sau khi người dùng chọn thành phố, Ajax cho phép chỉ cần tải lại một phần của trang để cập nhật thông tin.

Ví dụ này có thể được hiểu như sau: Khi người dùng chọn thành phố trong một hộp thoại dropdown, Ajax có thể được sử dụng để gửi yêu cầu đến máy chủ và lấy danh sách các huyện của thành phố đã được chọn. Thông tin này được nhận từ máy chủ và được hiển thị lại trên trang web mà không cần tải lại toàn bộ trang. Thay vì tải lại trang, Ajax chỉ làm tải lại một phần nhỏ chứa danh sách các huyện, giúp cung cấp thông tin cập nhật một cách nhanh chóng và trải nghiệm tương tác liền mạch cho người dùng.

Việc sử dụng Ajax trong trường hợp như trên có nhiều lợi ích. Thứ nhất, nó giúp giảm lượng dữ liệu cần truyền giữa trình duyệt và máy chủ, vì chỉ có thông tin cần thiết được truyền đi và nhận về. Điều này giúp tiết kiệm băng thông và tăng tốc độ truyền dữ liệu. Thứ hai, việc tải lại một phần trang thay vì toàn bộ trang giúp tiết kiệm thời gian và tạo trải nghiệm người dùng tốt hơn, vì người dùng không phải chờ đợi toàn bộ trang tải lại. Cuối cùng, việc sử dụng Ajax trong các tác vụ như này giúp tối ưu hóa hiệu suất và khả năng sử dụng của ứng dụng web, cung cấp trải nghiệm tốt hơn cho người dùng.

jQuery Ajax là gì?

jQuery Ajax là một phần của thư viện jQuery, một thư viện JavaScript phổ biến và mạnh mẽ, giúp đơn giản hóa việc tương tác với trang web và các yêu cầu gửi đi và nhận về thông qua Ajax.

jQuery Ajax cung cấp một giao diện đơn giản và thuận tiện để thực hiện các yêu cầu Ajax. Nó ẩn đi sự phức tạp của việc sử dụng XMLHttpRequest và cung cấp các phương thức và thuộc tính tiện ích để thực hiện các yêu cầu HTTP một cách dễ dàng và mạnh mẽ.

Với jQuery Ajax, bạn có thể thực hiện các yêu cầu GET, POST, PUT, DELETE và các phương thức khác một cách đơn giản. Nó cung cấp các phương thức như $.ajax(), $.get(), $.post(), $.getJSON() để tạo và gửi các yêu cầu Ajax. Ví dụ, đoạn mã sau sử dụng jQuery Ajax để gửi một yêu cầu GET và xử lý phản hồi từ máy chủ:

$.ajax({
url: 'https://example.com/api/data',
method: 'GET',
success: function(responseData) {
// Xử lý dữ liệu phản hồi ở đây
},
error: function(error) {
// Xử lý lỗi ở đây
}
});

Trong ví dụ trên, chúng ta sử dụng phương thức $.ajax() để tạo một yêu cầu Ajax. Chúng ta chỉ định URL của máy chủ và phương thức yêu cầu là GET. Trong các đối số khác, chúng ta có thể định nghĩa các hàm xử lý thành công (success) và xử lý lỗi (error) để thực hiện các hành động tương ứng với kết quả yêu cầu.

jQuery Ajax cung cấp nhiều tùy chọn và cấu hình để tùy chỉnh yêu cầu Ajax và xử lý phản hồi. Nó là một công cụ hữu ích trong việc tương tác với máy chủ và truyền thông dữ liệu trong các ứng dụng web.

Các phương thức cơ bản của jQuery Ajax

jQuery Ajax cung cấp một số phương thức tiện ích để thực hiện các yêu cầu Ajax. Dưới đây là một số phương thức quan trọng:

$.ajax()

Đây là phương thức cơ bản để tạo và gửi yêu cầu Ajax. Nó cho phép bạn tùy chỉnh các cài đặt như URL, phương thức yêu cầu, dữ liệu gửi đi, xử lý phản hồi và các tùy chọn khác. Ví dụ:

$.ajax({
url: 'https://example.com/api/data',
method: 'GET',
success: function(responseData) {
// Xử lý dữ liệu phản hồi ở đây
},
error: function(error) {
// Xử lý lỗi ở đây
}
});

$.get()

Đây là phương thức rút gọn để gửi yêu cầu GET Ajax. Nó chỉ định URL và cho phép bạn xử lý dữ liệu phản hồi. Ví dụ:

$.get('https://example.com/api/data', function(responseData) {
// Xử lý dữ liệu phản hồi ở đây
});

$.post()

Đây là phương thức rút gọn để gửi yêu cầu POST Ajax. Nó chỉ định URL, dữ liệu gửi đi và cho phép bạn xử lý dữ liệu phản hồi. Ví dụ:

$.post('https://example.com/api/data', { name: 'John', age: 30 }, function(responseData) {
// Xử lý dữ liệu phản hồi ở đây
});

$.getJSON()

Đây là phương thức rút gọn để gửi yêu cầu GET Ajax và tự động phân tích dữ liệu JSON trả về. Nó chỉ định URL và cho phép bạn xử lý dữ liệu phản hồi. Ví dụ:

$.getJSON('https://example.com/api/data', function(responseData) {
// Xử lý dữ liệu JSON phản hồi ở đây
});

Ngoài ra, jQuery Ajax còn cung cấp các phương thức như $.ajaxSetup() để thiết lập các cấu hình mặc định cho yêu cầu Ajax, $.ajaxPrefilter() để thay đổi hoặc mở rộng yêu cầu Ajax trước khi gửi đi, và các phương thức khác để xử lý dữ liệu và các sự kiện Ajax.

Hy vọng bài viết này giúp cho cả nhà hiểu thêm về AJAX, một khái niệm quan trọng trong code, thiết kế web và SEO ạ!

Seo Nông Dân chúc anh chị em một ngày thật nhiều niềm vui ^^! (#dungcaxinh biên tập vào 1 ngày mát trời sau một đêm mưa như trút nước, 21/06/2023)

Dũng Cá Xinh

#WeMadeIt
#dcgr
#100billions
#1stMCN
#dcmedia

See author's posts