AJAX Là gì?


AJAX là gì?

AJAX là viết tắt của cụm từ Asynchronous Javascript and XML. Nó là một phương thức cho phép trao đổi dữ liệu với máy chủ và cập nhật một hoặc nhiều phần của trang web mà không cần tải lại trang hoàn toàn.

Ajax được viết bằng Javascript chạy trên client, có nghĩa là mỗi trình duyệt sẽ chạy độc lập và không ảnh hưởng lẫn nhau. Nó sử dụng đối tượng XmlHttpRequest để giao tiếp với máy chủ web thông qua Javascript.

Tại sao sử dụng AJAX?

AJAX là một công cụ giúp cải thiện trải nghiệm người dùng. Khi cần thay đổi nhỏ trên trang web, chúng ta không cần tải lại toàn bộ trang, điều này giúp tiết kiệm thời gian và tài nguyên không cần thiết.

Các lợi ích của AJAX:
  • Thực hiện các yêu cầu callback mà không cần tải lại toàn bộ trang web. Điều này tiết kiệm băng thông đặc biệt đối với các server nhỏ.
  • Cập nhật chỉ phần dữ liệu cần thiết mà không cần tải lại toàn bộ trang web. Điều này giúp giảm thời gian tải trang và tạo trải nghiệm tốt hơn cho người dùng.
  • Tạo ra trang web đa dạng và động hơn.
Có Thể Bạn Quan Tâm :   8 LỢI ÍCH BẤT NGỜ CỦA CÀ PHÊ COLD BREW

Bạn có thể quan tâm:

Cách hoạt động của AJAX

AJAX Là gì? Cách hoạt động và lợi ích mà nó mang lại

  1. Từ trình duyệt của client, một sự kiện được kích hoạt để gọi AJAX. Khi đó, Javascript sẽ tạo một đối tượng XMLHttpRequest và gửi yêu cầu đến máy chủ. Ví dụ, khi người dùng click vào ô input và chọn kỹ năng tìm việc, ta sẽ gửi thông tin đó đến server và server sẽ trả về các việc làm phù hợp với kỹ năng của người dùng.
  2. Khi máy chủ nhận được yêu cầu từ XMLHttpRequest, nó xử lý yêu cầu và trả về phản hồi cho trang web. Máy chủ có thể lấy các việc làm dựa trên kỹ năng của người dùng và trả về dữ liệu của các việc làm đó.
  3. Sau khi nhận được phản hồi từ máy chủ, Javascript tiếp tục xử lý và cập nhật trang web.
Có Thể Bạn Quan Tâm :   Cấu Trúc Và Cách Dùng Until Now Là Gì ? Until Now Nghĩa Là Gì Trong Tiếng Việt

Ví dụ về ứng dụng đơn giản sử dụng AJAX bằng jQuery

Bạn có thể quan tâm:

  • Instant AJAX Search với Laravel và Vuejs

Thư viện jQuery cung cấp một số phương thức để thực hiện AJAX. Chúng ta có thể yêu cầu dữ liệu, HTML, XML và JSON từ máy chủ sử dụng phương thức truyền thông HTTP như GET và POST.

load()

Phương thức load() giúp lấy dữ liệu từ máy chủ và gán vào các phần tử được chọn.

Cú pháp:

$(selector).load(URL,data,callback);

  • URL: đường dẫn tới dữ liệu bạn muốn lấy.
  • Data: dữ liệu gửi cùng yêu cầu, dưới dạng cặp key/value.
  • Callback: tên hàm sẽ được thực thi sau khi phương thức load hoàn thành.

Ví dụ: Giả sử có file demo.html

<h2>TopDev is Awesome!</h2>
<p id=”p1″>This is some text in a paragraph.</p>

Có Thể Bạn Quan Tâm :   Bảng cân đối số phát sinh là gì? Lập bảng như thế nào?

Load nội dung của file “demo.html” vào một phần tử div với id = div-1

<!DOCTYPE html>
<html>
<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.14.4/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div-1”).load(“demo.html”);
});
});
</script>
</head>
<body>
<div id=”div-1″><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>

Phương thức POST trong jQuery

Phương thức POST được sử dụng để lấy dữ liệu từ máy chủ bằng phương thức HTTP POST.

Cú pháp:

$(selector).post(URL,data,function(data,status,xhr),dataType)

  • URL: bắt buộc, đường dẫn đến tập tin chứa thông tin cần lấy.
  • Data: không bắt buộc, đối tượng object chứa các cặp key/value sẽ gửi lên máy chủ.
  • function(data, status, xhr): hàm xử lý kết quả khi yêu cầu được thực hiện thành công. Các tham số:
    • data: dữ liệu nhận được từ yêu cầu.
    • status: trạng thái của yêu cầu (“success”, “notmodified”, “error”, “timeout”, hoặc “parsererror”).
    • xhr: đối tượng XMLHttpRequest.

Phương thức GET trong jQuery

Phương thức GET được sử dụng để lấy dữ liệu từ máy chủ bằng phương thức HTTP GET.

Phương thức GET có cú pháp tương tự phương thức POST:

$.get(URL,data,function(data,status,xhr),dataType)

Back to top button