Công ty thiết kế website chuẩn SEO Web Mới
Tìm kiếm
Công ty thiết kế website chuẩn SEO Web Mới

AJAX là gì? Tìm hiểu chi tiết về AJAX

AJAX là gì? Đó là hành động yêu cầu dữ liệu từ máy chủ để thay đổi nội dung của một hay nhiều phần trên trang web mà không cần tải lại trang, được viết bằng Javascript chạy trên client.

AJAX là gì? Tìm hiểu chi tiết về AJAX

AJAX là gì? Tìm hiểu chi tiết về AJAX

Mục Lục [Ẩn]


AJAX là gì?

AJAX (viết tắt của Asynchronous JavaScript and XML) là hành động yêu cầu dữ liệu từ máy chủ để thay đổi nội dung của một hay nhiều phần trên trang web mà không cần tải lại trang. XML nhận chuyển dữ liệu giữa trình duyệt và máy chủ web.

Ajax được viết bằng Javascript chạy trên client, tức là mỗi browser sẽ chạy độc lập hoàn toàn không ảnh hưởng lẫn nhau. Về mặt kỹ thuật, nó đề cập đến việc sử dụng các đối tượng XmlHttpRequest để tương tác với một máy chủ web thông qua Javascript.

Xem thêm bài viết Website là gì?

Các thuật ngữ công nghệ trong AJAX là gì?

Sau khi đã hiểu định nghĩa AJAX là gì và trước khi tiến đến tìm hiểu sâu hơn về khái niệm này, bạn cần phải hiểu những thuật ngữ thường gặp khi nói về AJAX:

Asynchronous là gì?

Asynchronous là tính không đồng bộ, nghĩa là web có thể gửi và nhận dữ liệu nền từ máy chủ, đồng thời cập nhật các thành phần trên trang web mà không cần tải lại trang.

JavaScript là gì?

JavaScript là ngôn ngữ lập trình phổ biến để làm web tương tác.

XML là gì?

XML là viết tắt của Extensible Markup Language – Ngôn ngữ đánh dấu có thể mở rộng dùng để lưu trữ và vận chuyển dữ liệu từ máy chủ web.

XMLHttpRequest là gì?

XMLHttpRequest là một đối tượng JavaScript được sử dụng để giao tiếp không đồng bộ giữa máy khách và máy chủ.

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 dùng để xác định cấu trúc của ứng dụng web và hiển thị dữ liệu.

CSS là gì?

CSS là Cascading Style Sheet, được dùng để tạo giao diện và kiểu dáng cho web.

DOM là gì?

DOM là một API hiển thị các trang web và tương tác với dữ liệu.

Quy trình hoạt động của AJAX

AJAX không phải là một ngôn ngữ lập trình, mà là một mô hình sử dụng kết hợp các công nghệ hiện có, bao gồm HTML hoặc XHTML, CSS, JavaScript, DOM, XML, XSLT và quan trọng nhất là đối tượng XMLHttpRequest.  Cụ thể, mô hình AJAX sử dụng:

XMLHttpRequest Object (một API ở dạng đối tượng tích hợp trong trình duyệt) để yêu cầu dữ liệu từ máy chủ.

XHTML để làm định dạng để nhận dữ liệu từ máy chủ

CSS để trình bày

JavaScript/ HTML DOM để hiển thị nội dung động

Quy trình hoạt động của AJAX

Quy trình hoạt động của AJAX

Một quy trình hoạt động của AJAX có thể được mô tả như sau:

Môt sự kiện xảy ra trên web, do người dùng gửi yêu cầu từ UI (ví dụ: tải trang, nhấp vào một button,…).

JavaScript tạo một đối tượng XMLHttpRequest.

Trình duyệt gửi đối tượng XMLHttpRequest đến máy chủ web.

Máy chủ xử lý yêu cầu bằng cách tương tác với cơ sở dữ liệu thông qua JSP, PHP, Servlet, ASP.net,..

Máy chủ tạo phản hồi và gửi lại cho trình duyệt web.

Phản hồi trả về được xử lý trong trình duyệt bằng JavaScript.

JavaScript thực hiện hành động thích hợp (ví dụ: cập nhật nội dung 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 thiết lập chat room tích hợp này trên trang chính của họ, để bạn có thể nói chuyện trực tiếp với nhân viên hỗ trợ. Nhưng bạn không phải lo việc bạn cần tải trang mỗi lần chat. AJAX không tải lại trang mỗi khi bạn gửi và nhận một tin nhắn mới.

Thông báo trending của Twitter

Twitter đã từng sử dụng AJAX cho các cập nhật mới. Mỗi lần có tweet mới trong các chủ đề nóng, Twitter sẽ cập nhật thông tin mới mà không ảnh hưởng đến trang chính.

Tóm lại, AJAX hoạt động đa nhiệm. Nếu bạn từng gặp trường hợp 2 tác vụ hoạt động đồng thời, một cái chạy và một cái tĩnh, có thể đó chính là sản phẩm của AJAX.

Các ứng dụng thực tế của Ajax

Ajax là một kỹ thuật lập trình web cho phép gửi và nhận dữ liệu từ máy chủ mà không cần tải lại trang web hoàn toàn. Dưới đây là một số ví dụ thực tế của Ajax:

Google Maps: Google Maps sử dụng Ajax để cho phép người dùng tương tác với bản đồ mà không cần tải lại trang web.

Facebook: Khi bạn trò chuyện với bạn bè trên Facebook, các tin nhắn mới sẽ được tải và hiển thị trực tiếp mà không cần tải lại trang web.

Amazon: Khi bạn thêm sản phẩm vào giỏ hàng trên Amazon, các thông tin giỏ hàng của bạn sẽ được cập nhật bằng Ajax mà không cần tải lại trang web.

Twitter: Khi bạn gửi một tweet trên Twitter, các tweet mới nhất của bạn bè và người theo dõi của bạn sẽ được hiển thị trực tiếp bằng Ajax mà không cần tải lại trang web.

Gmail: Gmail sử dụng Ajax để cho phép người dùng gửi và nhận email mà không cần tải lại trang web hoàn toàn.

Khi nào nên sử dụng Ajax?

Người dùng có thể sử dụng Ajax ở bất kỳ trang web nào. Tại đó, một lượng nhỏ dữ liệu có thể được trích xuất và phản hồi theo yêu cầu của người dùng mà không cần phải reload lại trang web.

Chẳng hạn, khi tìm kiếm thông tin việc làm tại thành phố Đà Nẵng, người dùng chỉ cần click vào hộp thoại drop down để chọn Đà Nẵng. Kết quả là, toàn bộ thông tin về vị trí tuyển dụng ở các quận, huyện trên thành phố Đà Nẵng sẽ được hiển thị mà không cần load lại trang.

Một số trình duyệt hỗ trợ cho Ajax

Dưới đây là một số trình duyệt được sử dụng phổ biến để hỗ trợ cho Ajax

- Mozilla Firefox 1.0 trở lên

- Apple Safari 1.2 trở lên

- Netscape phiên bản 7.1 trở lên

- Konqueror

- Microsoft Internet Explorer 5 trở lên

- Google Chrome mọi phiên bản

- Opera 7.6 trở lên

Ưu điểm và Nhược điểm của AJAX

Ưu điểm của AJAX:

Xu hướng ứng dụng Ajax trong phát triển website ngày càng nhiều và trở thành công cụ đắc lực của các lập trình viên. Dưới đây là các ưu điểm nổi bật khi sử dụng Ajax, bao gồm:

Sử dụng tối ưu băng thông

AJAX tối ưu hóa băng thông máy chủ của bạn bằng cách định vị nội dung cụ thể thay vì phân luồng toàn bộ nội dung của trang. Điều này rất hữu ích với các trang web có băng thông hạn chế, giúp cải thiện tốc độ tải và hiệu suất ứng dụng web.

Thực hiện Callbacks

Ajax có thể thực hiện callbacks (các cuộc gọi lại) một cách linh hoạt. Quá trình này được thực hiện bằng cách truy xuất và lưu trữ lại nguồn tài nguyên mà không gửi ngược thông tin về máy chủ (Server). Điều này đặc biệt hiệu quả trong trường hợp website có nguồn băng thông hạn chế, và có tốc độ tải chậm.

Thực hiện cuộc gọi không đồng bộ

Ajax hỗ trợ người dùng thực hiện cuộc gọi không đồng bộ đến Server, cho phép người dùng xử lý dữ liệu ngay lập tức mà không phải chờ đợi tất cả thông tin được tải lên đầy đủ. Nhờ vậy, quá trình phân tích và giao tiếp với máy chủ sẽ diễn ra nhanh hơn.

Thân thiện với người dùng

Đặc trưng của Ajax là không reload trang, do đó, mọi thao tác với website luôn diễn ra nhanh và hiệu quả hơn. Đó là cơ hội để gia tăng thời gian on-site của người xem, và mang đến trải nghiệm tốt nhất cho người dùng.

Xử lý dữ liệu nhanh chóng

Mục đích cuối cùng khi tạo ra Ajax là cải thiện hiệu suất và khả năng ứng dụng linh hoạt của một website. Chẳng hạn, khi đánh giá một bộ phim trên Vieton, người dùng chỉ cần xếp hạng phim trên bảng đánh giá có sẵn, và thông tin sẽ được lưu trữ trực tiếp vào cơ sở dữ liệu ngay lập tức.

Tăng tính tương tác với người dùng

Trước đây, người dùng phải chờ đợi máy chủ hoàn thành lệnh, dữ liệu cập nhật được tải lên trang web, sau đó reload trang để thực hiện lệnh khác hoặc thấy kết quả. Do AJAX sử dụng các yêu cầu không đồng bộ, việc trao đổi dữ liệu giữa máy chủ và bản hiển thị có thể hoạt động độc lập. Khi đó, người dùng có thể nhận phản hồi ngay lập tức khi thực hiện một thao tác trên web mà không gặp bất kỳ sự chậm trễ nào.

Nhược điểm của AJAX:

Không được ghi vào lịch sử Web của trình duyệt

Website được tạo động hầu hết không được ghi vào bộ lưu lịch sử web của trình duyệt. Chính vì vậy, nút “back” của trình duyệt sẽ không phát huy được tác dụng quay lại trạng thái trước đó. Để khắc phục tình trạng này thì bạn có thể dùng các Iframe không hiển thị để gây ra được sự thay đổi trong lịch sử của trình duyệt. Từ đó thay đổi được phần neo của URL khi bạn chạy Ajax và theo dõi được hết sự thay đổi của chính nó

Phụ thuộc vào JavaScript

Các công nghệ AJAX ngày càng phức tạp, đòi hỏi các web developer cần thường xuyên trau dồi, đạt được chuyên môn cao về JavaScript để có thể làm việc với nó.

Bookmark trạng thái của ứng dụng gặp nhiều khó khăn

Việc thực hiện cập nhật cho các trang Web động cũng sẽ gây ra nhiều khó khăn cho những người dùng trong việc bookmark một số trạng thái của ứng dụng. Nó cũng có cách khắc phục cho vấn đề này và một số trong đó là định dạng cho mã xác định đoạn URL. Điều này sẽ giúp lưu vết và cho phép người sử dụng có thể đánh dấu rồi quay lại trang web trạng thái nào đó của ứng dụng

Vấn đề bảo mật và quyền riêng tư của người dùng

Các công nghệ AJAX sử dụng biện pháp bảo mật phía máy chủ giống như các ứng dụng web thông thường. Do đó, nó dễ bị tin tặc khai thác theo cách tương tự.  Ngoài ra, AJAX sử dụng JavaScript để mã hoá nên có thể dễ dàng bị hacker truy cập. Hacker có thể khai thác các lỗ hổng phía máy chủ, chèn mã độc vào hệ thống, lừa đảo người dùng, hoặc theo dõi lưu lượng duyệt web của người dùng để điều hướng.

Không hỗ trợ Ajax

Những người dùng có trình duyệt không hỗ trợ Ajax hoặc Javascript kể cả trường hợp đã vô hiệu hóa Javascript thì đều không thể sử dụng được Ajax

Khó bảo trì và debug

Hiện nay còn thiếu các hướng dẫn để debug và bảo trì các web AJAX đúng cách. JavaScript phía máy khách yêu cầu can thiệp thủ công để bảo trì. Lỗi của bất kỳ một yêu cầu nào có thể khiến toàn bộ trang không tải được.

Không tương thích với mọi trình duyệt

AJAX chỉ hỗ trợ một số lượng hạn chế các trình duyệt, bao gồm: Mozilla Firefox 1.0 trở lên Konqueror Opera 7.6 trở lên Microsoft Internet Explorer 5 trở lên Apple Safari 1.2 trở lên Netscape 7.1 trở lên

AJAX không hỗ trợ mọi trình duyệt là do: Các trình duyệt khác nhau sử dụng các phương thức khác nhau để tạo đối tượng JavaScript tích hợp sẵn. Người dùng nào có trình duyệt không hỗ trợ JavaScript hoặc đối tượng XMLHttpRequest, hoặc đã tắt chức năng này có thể sẽ không dùng được các trang web AJAX đúng cách. Vì vậy, bạn nên kiểm tra vấn đề trình duyệt trước khi viết ứng dụng web AJAX.

Vấn đề về dấu trang và điều hướng

Vì AJAX được sử dụng để tải không đồng bộ nội dung vào một trang hiện có, nên một số thông tin của trang trước đó có thể không tương ứng với trang mới được tải. Lịch sử trình duyệt và dấu trang có thể bị ảnh hưởng và không hoạt động đúng, do URL không thay đổi trong khi các thành phần của trang lại được đổi mới.

jQuery Ajax là gì?

Tương tự Ajax, jQuery Ajax cũng là một định nghĩa vô cùng thông dụng trong lập trình. Vậy cụ thể Ajax jQuery là gì? Đây được hiểu là công cụ có khả năng hỗ trợ một số phương thức để thực hiện chức năng cho Ajax. Người dùng có thể gửi yêu cầu cho các text, XML, HTML và JSON từ máy chủ để gắn dữ liệu bên ngoài vào các phần tử được chọn.

Hàm của jQuery gọi là $.ajax, được dùng để thực hiện các request HTTP bất đồng bộ. Người dùng thường tích hợp các 3 hàm cơ bản là $.get(), $.load() và $.post() vào hàm $.ajax() để tiết kiệm thời gian. Dưới đây là cú pháp tổng quát:

Cú pháp 1: $.ajax(url[, options])

Cú pháp 2: $.ajax([options])

Trong đó:

URL: là một chuỗi chứa URL mà người dùng cần sử dụng Ajax để thực hiện lệnh Request.

Options: là một đối tượng thuần, được thiết lập sẵn các yếu tố để request được Ajax đó.

Người lập trình có thể căn cứ vào đối tượng có sẵn hoặc yêu cầu từ client mà sử dụng cú pháp cho phù hợp. Ngoài ra, người dùng nên ưu tiên lựa chọn cú pháp đã thành thạo để tiết kiệm tối đa thời gian làm việc.

Phương thức cơ bản của jQuery Ajax

Phương thức “load()”

Sau đây là cú pháp đơn giản cho phương thức load() trong jQuery: [selector].load( URL, [data], [callback] );

Miêu tả chi tiết về các tham số: URL − URL của ngồn Server-Side để Yêu cầu (Request) được gửi tới. Nó có thể là CGI, ASP, JSP, hoặc PHP script mà tạo dữ liệu động hoặc ra khỏi database

Data − tham số tùy ý này biểu diễn một đối tượng mà các thuộc tính của nó được xếp theo thứ tự vào trong các tham số được mã hóa một cách thích hợp để được truyền tới Yêu cầu (Request). Nếu được xác định, Request được tạo bởi sử dụng phương thức POST. Nếu bị bỏ qua, phương thức GET được sử dụng.

Callback − Một hàm callback được gọi sau dữ liệu phản hồi đã được tải vào trong các phần tử của tập hợp đã kết nối. tham số đầu tiên được truyền tới hàm này là văn bản phản hồi từ Server và tham số thứ hai là mã hóa trạng thái.

Ví dụ

    <html>
       <head>
          <title>The jQuery Example</title>
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
          <script type="text/javascript" language="javascript">
             $(document).ready(function() {
                $("https://webmoi.vn/ajax-la-gi-tim-hieu-chi-tiet-ve-ajax/#driver").click(function(event){
                   $('#stage').load('./result.html');
                });
             });
          </script>
       </head>
       <body>
          <div id="stage">
             STAGE
          </div>
          <input type="button" id="driver" value="Load Data" />
       </body>
    </html>

Ở đây, load() khởi tạo một AJAX request tới URL file đã xác định là ./result.html. Sau khi tải file này, tất cả nội dung sẽ được đưa đến vào trong phần tử được tag với ID là stage.

Phương thức “get()”

	$(document).ready(function() {
		$('#load-du-lieu').click(function(e) {
			e.preventDefault();
			$.get('vidu1.html', function(ketqua) {
				$('#noidung').html(ketqua);
				$('#noidung').html($('#chuoi-can-lay').html());
			});
			
		});
	});

Đoạn code này cho bạn thấy rằng để sử dụng được phương thức “ get() ”, các bạn cần dùng đến biến “ $ ” (hay “ jQuery ”) sau đó sử dụng thẳng phương thức “ get()

Đối số truyền vào không thể tách lọc được dữ liệu trả về thẳng trong đường dẫn như phương thức “ load() ”.

Kết quả trả về sẽ thông qua đối số thứ 2 của phương thức “ get() ” là một Anonymous Function có đối số mặc định trả về là “ ketqua ”

Để tách lọc dữ liệu từ “ ketqua ” chúng ta cần phải ghi nó vào “DOM” hay một nơi nào đó trong cặp thẻ “ <body> ” của chúng ta. Sau đó chúng ta dùng tiếp “ $(‘#id-can-lay’).html() ” để tách lọc dữ liệu

Ngoài ra “ get() ” còn hỗ trợ bạn truyền dữ liệu sang file lấy dữ liệu.

Phương Thức “post()”

Cách dùng của phương thức “ post() ” sẽ giống với “ get() ” nhưng khác về kĩ thuật truyền dữ liệu mà thôi.

$(document).ready(function() {
        $('#load-du-lieu').click(function(e) {
            e.preventDefault();
            $.post('vidu2.php', {
                a: "content abc",
                b: "content bcd"
            },function(ketqua) {
                $('#noidung').html(ketqua);
            });
            
        });
    });

Nội dung của file “vidu2.php“:

<?php 
echo '<pre>' .print_r($_POST,true). '</pre>';
?>

Ở ví dụ phương thức “ post() ” này, ở đối số thứ 2 thay vì là Anonymous Function như ở ví dụ “ get() ” mà chúng ta đã xem trước đó, thì đây là “một đối tượng” (Object) chứa những dữ liệu mà chúng ta cần truyền qua đường dẫn “vidu2.php” để nhận và trả về dữ liệu. Kết quả trả về sẽ được đưa vào đối số thứ 3 cho chúng ta.

Phương thức “ajax()”

Ngoài các hàm trên mà chúng ta thường hay dùng, jQuery còn cung cấp thêm cho ta một hàm ajax() tổng quát. Với hàm này, ta có thể tùy chỉnh cấu hình, thêm bớt các thông số chứ không bị bó hẹp như hai hàm trên.Chỉ cần sử dụng 1 hàm này có thể đáp ứng các yêu cầu về thực thi ajax.

 $(document).ready(function() {
        $('#load-du-lieu').click(function(e) {
            e.preventDefault();
            $.ajax({
                url: 'vidu2.php',
                type: 'POST',
                dataType: 'html',
                data: {
                    a: "content abc",
                    b: "content bcd"
                }
            }).done(function(ketqua) {
                $('#noidung').html(ketqua);
            });
            
        });
    });

Đối số đầu tiên chúng ta truyền vào cho phương thức “ ajax() ” chính là một đối tượng (Object) gồm các thuộc tính cấu hình để kĩ thuật AJAX của chúng ta có thể thực thi. Trong đó:

url : chuỗi chứa đường dẫn tới file cần lấy và trả về dữ liệu

type : phương thức gửi đi tương tự như của “ <form> ”, mặc định là “GET” nếu như các bạn không truyền vào.

dataType : xác định dữ liệu trả về thuộc dạng nào? Nếu các bạn không truyền thì jQuery tự động nhận biết kiểu dữ liệu (script, html, json…). Tuy nhiên, tôi khuyến cáo các bạn nên truyền vào đầy đủ để nhận dữ liệu chính xác nhất. Và thông dụng nhất chính là “html”.

data : truyền dữ liệu sang đường dẫn chỉ định để thực hiện xử lý và trả về dữ liệu. Tương tự như cách truyền dữ liệu của phương thức “ post() ”. “

done() ” : ở loạt các bài viết hướng dẫn các bài viết về kĩ thuật Ajax với phương thức “ ajax() ” trước đây trên Internet. Thay vì dùng “done()” chúng ta sẽ dùng thuộc tính “success” trong đối tượng truyền vào “ ajax() ” nhưng từ các phiên bản mới hơn của jQuery. Họ khuyến cáo chúng ta nên sử dụng các phương thức như “ done() , fail() , always() ” (Tương ứng: Hoàn thành, thất bại và luôn luôn thực hiện). Nên tùy vào nhu cầu mà bạn xài phương thức tương ứng. Và nên nhớ là đi kèm với phương thức “ ajax() ” hoặc lưu vào một tên biến rồi dùng sau để nhận kết quả trả về.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết về AJAX

  • 0 Bình luận
CEO Bùi Tấn Lực
Bùi Tấn Lực
CEO Bùi Tấn Lực người sáng lập ra Web Mới, là một lập trình viên, người viết content, chuyên tư vấn các vấn đề về website và SEO website, quý khách hãy liên hệ để trao đổi thiết kế website
  • Zalo
Chia sẻ nội dung đánh giá của bạn về AJAX là gì? Tìm hiểu chi tiết về AJAX
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
Đánh giá của bạn
Tên *
Email
Số điện thoại *
Bình luận, Hỏi đáp
Đăng ký tư vấn miễn phí
Tìm hiểu 1 năm không bằng lắng nghe 1 câu tư vấn
Tỉnh thành
0398.259.259