Hiện nay, Ajax được ứng dụng nhiều trong lĩnh vực ph&aacute;t triển web động hay c&aacute;c ứng dụng gi&agrave;u t&iacute;nh Internet. Thuật ngữ n&atilde;y đ&atilde; được ph&aacute;t triển bởi Jesse James Garrett từ năm th&aacute;ng 02 năm 2005. Vậy Ajax l&agrave; g&igrave;, c&aacute;ch thức hoạt động v&agrave; c&aacute;c tr&igrave;nh duyệt hỗ trợ Ajax l&agrave; g&igrave;? H&atilde;y c&ugrave;ng <a href="https://tek4.vn/">tek4.vn</a> t&igrave;m hiểu chi tiết qua b&agrave;i viết dưới đ&acirc;y!&nbsp;
<h2 style="text-align: justify;">Ajax l&agrave; g&igrave;?</h2>
<a href="https://tek4.vn/ajax-la-gi">Ajax</a> l&agrave; dạng viết tắt của thuật ngữ c&ocirc;ng nghệ Asynchronous JavaScript and XML, bộ kỹ thuật thiết kế web gi&uacute;p cho c&aacute;c ứng dụng web hoạt động kh&ocirc;ng đồng bộ. Bộ kỹ thuật n&agrave;y c&oacute; nhiệm vụ xử l&yacute; to&agrave;n bộ y&ecirc;u cầu tới m&aacute;y chủ (server) từ ph&iacute;a sau. Thay v&igrave; phải tải đi reload to&agrave;n bộ trang web, Ajax cho ph&eacute;p tăng tốc độ ứng dụng web bằng c&aacute;ch cắt nhỏ dữ liệu v&agrave; hiển thị những g&igrave; cần thiết.&nbsp;
Ajax được viết bằng ng&ocirc;n ngữ JavaScript chạy tr&ecirc;n m&aacute;y kh&aacute;ch (client), trong đ&oacute;, mỗi browser sẽ chạy độc lập ho&agrave;n to&agrave;n kh&ocirc;ng bị ảnh hưởng lẫn nhau. X&eacute;t về mặt kỹ thuật, Ajax đề cập tới những tương t&aacute;c giữa c&aacute;c đối tượng XmlHttpRequest với một m&aacute;y chủ web th&ocirc;ng qua JavaScript. Nhiều người thường lầm tưởng Ajax l&agrave; một l&agrave; một hệ thống c&ocirc;ng nghệ đơn lẻ nhưng tr&ecirc;n thực tế, n&oacute; l&agrave; sự kết hợp của một nh&oacute;m c&ocirc;ng nghệ lại với nhau. Trong đ&oacute; c&oacute;:&nbsp;
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">HTML hay c&ograve;n được gọi l&agrave; XHTML v&agrave; CSS c&oacute; vai tr&ograve; hiển thị dữ liệu, th&ocirc;ng tin. M&ocirc; h&igrave;nh Document Object Model (DOM) được thực hiện qua JavaScript, tương t&aacute;c với những th&ocirc;ng tin v&agrave; hiển thị th&ocirc;ng tin động.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">XMLHttpRequest d&ugrave;ng để trao đổi dữ liệu kh&ocirc;ng đồng bộ với m&aacute;y chủ web v&agrave; việc trao đổi thường diễn ra tr&ecirc;n nhiều định dạng kh&aacute;c nhau. Điển h&igrave;nh l&agrave; XML, HTML, văn bản th&ocirc;ng thường, JSON, EBML,...</li>
<li style="font-weight: 400;" aria-level="1">XML l&agrave; định dạng ng&ocirc;n ngữ markup tương tự như HTML, t&ecirc;n đầy đủ l&agrave; eXtensible Markup Language, được sử dụng để chứa dữ liệu.&nbsp;</li>
</ul>
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" title="Ajax l&agrave; một c&ocirc;ng nghệ gi&uacute;p chung ta tạo ra những Web động m&agrave; ho&agrave;n to&agrave;n kh&ocirc;ng reload lại trang" src="https://tek4.vn/public_files/3c252842-34db-4596-8410-1d2b9976ecaf" alt="ajax l&agrave; g&igrave;" />
<h2 style="text-align: justify;">Ajax l&agrave; một phần trong javascript?</h2>
Ajax l&agrave; một phần của JavaScript, mang đến cho người d&ugrave;ng trải nghiệm tốt nhất:&nbsp;
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Ajax được sử dụng để thực hiện một callback, truy xuất hoặc lưu trữ dữ liệu m&agrave; kh&ocirc;ng cần tải lại to&agrave;n bộ trang web nhiều lần. B&ecirc;n cạnh đ&oacute;, n&oacute; cũng gi&uacute;p tiết kiệm chi ph&iacute; băng th&ocirc;ng cho người d&ugrave;ng đối với những server nhỏ.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Sử dụng Ajax gi&uacute;p người d&ugrave;ng chỉ cần gửi dữ liệu cần thiết, tải lại một phần nhỏ trang để cập nhật th&ocirc;ng tin. Nhờ đ&oacute;, n&oacute; gi&uacute;p giảm thiểu tốc độ tải trang v&agrave; giảm lượng lớn băng th&ocirc;ng gi&uacute;p người d&ugrave;ng c&oacute; trải nghiệm tuyệt vời hơn.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">C&aacute;c trang web được tạo ra trở n&ecirc;n v&ocirc; c&ugrave;ng đa dạng, tăng t&iacute;nh tương t&aacute;c của website với người d&ugrave;ng v&agrave; tăng t&iacute;nh động cho trang web nhiều hơn.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Giảm kết nối tới server bởi c&aacute;c m&atilde; Script v&agrave; c&aacute;c style sheet chỉ được y&ecirc;u cầu một lần.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Hơn nữa, Ajax cũng được hỗ trợ trong c&aacute;c tr&igrave;nh duyệt phổ biến v&agrave; l&agrave; c&ocirc;ng cụ dễ học, dễ sử dụng nhất hiện nay.&nbsp;</li>
</ul>
<h2 style="text-align: justify;">Ajax hoạt động như thế n&agrave;o?</h2>
Như đ&atilde; đề cập ở tr&ecirc;n, Ajax kh&ocirc;ng phải l&agrave; một c&ocirc;ng nghệ duy nhất v&agrave; kh&ocirc;ng phải ng&ocirc;n ngữ lập tr&igrave;nh m&agrave; chỉ đơn giản l&agrave; một bộ phận kỹ thuật ph&aacute;t triển web. C&aacute;ch thức hoạt động của Ajax như sau:&nbsp;
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Trong tr&igrave;nh duyệt của m&aacute;y kh&aacute;ch (client) c&oacute; một sự kiện để gọi Ajax. L&uacute;c n&agrave;y, JavaScript sẽ tạo ra một đối tượng gọi l&agrave; XMLHttpRequest, l&agrave;m nhiệm vụ gửi request tới server. Lấy một v&iacute; dụ đơn giản, nếu người d&ugrave;ng k&iacute;ch chuột v&agrave;o &ocirc; Input v&agrave; chọn skill t&igrave;m việc l&agrave;m của người d&ugrave;ng, to&agrave;n bộ th&ocirc;ng tin sẽ được lấy v&agrave; chuyển tới server. Cuối c&ugrave;ng, n&oacute; sẽ trả về c&aacute;c việc l&agrave;m ph&ugrave; hợp với người d&ugrave;ng.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Sau khi Server đ&atilde; nhận được HttpRequest, to&agrave;n bộ request sẽ được xử l&yacute; v&agrave; trả về response cho web. C&aacute;c m&aacute;y chủ (server) sẽ xử l&yacute;, lấy ra c&aacute;c việc l&agrave;m JavaScript thuộc skill m&agrave; người d&ugrave;ng cần v&agrave; trả về dữ liệu của c&aacute;c việc l&agrave;m.</li>
<li style="font-weight: 400;" aria-level="1">JavaScript xử l&yacute; v&agrave; cập nhật v&agrave;o trang web cho người d&ugrave;ng một response từ m&aacute;y chủ (server).&nbsp;</li>
</ul>
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" title="Ajax gi&uacute;p bạn tạo ra những ứng dụng web động m&agrave; kh&ocirc;ng cần reload lại trang, tạo sự thuận tiện, bớt cồng kềnh, mượt m&agrave; trong trải nghiệm." src="https://tek4.vn/public_files/4deeec5c-2387-4a59-99ab-57558d03aef6" alt="Ajax hoạt động như thế n&agrave;o" />
<h2 style="text-align: justify;">V&iacute; dụ thực tế khi triển khai Ajax</h2>
V&iacute; dụ, khi đăng nhập t&agrave;i khoản v&agrave;o một trang web, nếu th&ocirc;ng tin đăng nhập bị sai th&igrave; sẽ c&oacute; 2 c&aacute;ch trả kết quả t&ugrave;y thuộc v&agrave;o việc c&oacute; sử dụng Ajax hay kh&ocirc;ng.&nbsp;
Trường hợp 1: Khi kh&ocirc;ng sử dụng Ajax, server sẽ phải trả về to&agrave;n bộ trang (m&atilde; html v&agrave; css) đăng nhập bao gồm cả th&ocirc;ng b&aacute;o lỗi. Tức l&agrave;, trang web phải load lại.&nbsp;
Trường hợp 2: Khi sử dụng Ajax, server chỉ c&oacute; nhiệm vụ trả về lỗi hay kh&ocirc;ng lỗi, việc hiện th&ocirc;ng b&aacute;o lỗi l&agrave; nhiệm vụ của Ajax. L&uacute;c n&agrave;y, server kh&ocirc;ng cần trả về to&agrave;n bộ trang.&nbsp;
Ảnh minh họa: Khi trang kh&ocirc;ng lỗi: <a href="https://prnt.sc/UoA9nfVLrnEO">https://prnt.sc/UoA9nfVLrnEO</a>&nbsp;
Khi trang lỗi: <a href="https://prnt.sc/FHW6qW47VanC">https://prnt.sc/FHW6qW47VanC</a>
Dưới đ&acirc;y l&agrave; v&iacute; dụ về đoạn code c&oacute; sử dụng Ajax:
<code>&lt;!DOCTYPE html&gt;</code>
<code>&lt;html&gt;</code>
<code>&lt;body&gt;</code>
&nbsp;
<code>&lt;div id="demo"&gt;</code>
<code>&lt;h1&gt;The XMLHttpRequest Object&lt;/h1&gt;</code>
<code>&lt;button type="button" onclick="loadDoc()"&gt;Change Content&lt;/button&gt;</code>
<code>&lt;/div&gt;</code>
&nbsp;
<code>&lt;script&gt;</code>
<code>function loadDoc() {</code>
<code>var xhttp = new XMLHttpRequest();</code>
<code>xhttp.onreadystatechange = function() {</code>
<code>if (this.readyState == 4 &amp;&amp; this.status == 200) {</code>
<code>document.getElementById("demo").innerHTML =</code>
<code>this.responseText;</code>
<code>}</code>
<code>};</code>
<code>xhttp.open("GET", "ajax_info.txt", true);</code>
<code>xhttp.send();</code>
<code>}</code>
<code>&lt;/script&gt;</code>
&nbsp;
<code>&lt;/body&gt;</code>
<code>&lt;/html&gt;</code>
Khi chạy đoạn code n&agrave;y sẽ ra nội dung:&nbsp;
The XMLHttpRequest Object v&agrave; một button "change content".&nbsp;
Khi ấn v&agrave;o button n&agrave;y, nội dung kh&aacute;c sẽ được hiện ra do Ajax thực hiện m&agrave; kh&ocirc;ng phải do server trả về.
<h2 style="text-align: justify;">Ajax chạy tr&ecirc;n c&aacute;c tr&igrave;nh duyệt n&agrave;o?</h2>
Ajax được hỗ trợ tr&ecirc;n c&aacute;c tr&igrave;nh duyệt mới, hiện đại dưới đ&acirc;y:&nbsp;
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Microsoft Internet Explorer 5.0 trở l&ecirc;n.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">C&aacute;c tr&igrave;nh duyệt dựa v&agrave;o Gecko như Mozilla, Firefox, seaMonkey, Epiphany, Galeon v&agrave; Netscape 7.1.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">Google Chrome ở mọi phi&ecirc;n bản.&nbsp;</li>
<li style="font-weight: 400;" aria-level="1">C&aacute;c tr&igrave;nh duyệt chứa KHTML API từ 3.2 trở l&ecirc;n như Apple Safari, Konqueror,...&nbsp;</li>
</ul>
<img style="width: 700px; display: block; margin-left: auto; margin-right: auto;" title="Ajax được viết bằng Javascript chạy tr&ecirc;n client, tức l&agrave; mỗi browser sẽ chạy độc lập ho&agrave;n to&agrave;n kh&ocirc;ng ảnh hưởng lẫn nhau." src="https://tek4.vn/public_files/fe81dafe-9f59-4946-ad3a-1cff62ccd934" alt="ajax chạy tr&ecirc;n tr&igrave;nh duyệt n&agrave;o" />
Kết&nbsp;
Như vậy, b&agrave;i viết đ&atilde; gi&uacute;p bạn đọc giải đ&aacute;p thắc mắc về Ajax l&agrave; g&igrave;, c&aacute;ch thức hoạt động v&agrave; c&aacute;c tr&igrave;nh duyệt m&agrave; Ajax được hỗ trợ. B&ecirc;n cạnh đ&oacute;, tek4.vn cũng đưa ra cho bạn đọc một v&iacute; dụ rails c&oacute; sử dụng Ajax đơn giản. Sử dụng Ajax mang đến những trải nghiệm mới, đ&aacute;p ứng nhu cầu truy cập v&agrave; tải th&ocirc;ng tin nhanh cho kh&aacute;ch h&agrave;ng.&nbsp;
&nbsp;

Admin

Ajax là gì? Tìm hiểu cách hoạt động khi triển khai trên website

Cùng tác giả

Admin

Có liên quan