AJAX: Giải thích
AJAX là viết tắt của Asynchronous Javascript and XML. AJAX là một phương 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 phải tải lại toàn bộ trang.
AJAX được viết bằng Javascript chạy trên trình duyệt, điều này có nghĩa là mỗi trình duyệt hoạt động độc lập và không ảnh hưởng lẫn nhau. Kỹ thuật này sử dụng đối tượng XmlHttpRequest để tương tác 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 nâng cao trải nghiệm người dùng trên website. Thay vì phải tải lại cả trang web khi có những thay đổi nhỏ, AJAX giúp chúng ta chỉ cần tải lại một phần nhỏ để cập nhật thông tin cần thiết, giúp tiết kiệm thời gian và băng thông.
Dưới đây là một số lợi ích mà AJAX mang lại:
- AJAX cho phép thực hiện một callback, tức là truy xuất hoặc lưu trữ dữ liệu mà không cần tải lại toàn bộ trang, điều này có thể giúp tiết kiệm băng thông đối với các server nhỏ.
- AJAX chỉ gửi dữ liệu phần cần thiết và tải lại một phần nhỏ để cập nhật thông tin, giúp giảm thời gian tải trang và nâng cao trải nghiệm người dùng.
- Sử dụng AJAX cũng giúp tạo ra các trang web đa dạng và động hơn.
Có thể bạn quan tâm đến LADEC.
Cách thức hoạt động của AJAX
- Trình duyệt gửi một sự kiện gọi AJAX đến máy chủ. Bằng Javascript, một đối tượng XMLHttpRequest sẽ được tạo ra và gửi một 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 làm của mình, yêu cầu sẽ được gửi đến máy chủ để trả về các việc làm phù hợp với kỹ năng đó.
- Máy chủ nhận yêu cầu và xử lý, sau đó trả về một phản hồi cho website. Máy chủ xử lý yêu cầu để lấy thông tin về các việc làm liên quan đến kỹ năng được yêu cầu và trả về dữ liệu của các việc làm đó.
- Khi nhận được phản hồi từ máy chủ, Javascript sẽ xử lý và cập nhật thông tin lên trang web.
Ví dụ ứng dụng AJAX đơn giản bằng jQuery
Có thể bạn quan tâm đến:
- Instant AJAX Search với Laravel và Vuejs
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 giao thức HTTP GET và POST.
Phương thức load()
Phương thức load() được sử dụng để lấy dữ liệu từ máy chủ và cung cấp dữ liệu cho phần tử được chọn.
Cú pháp:
$(selector).load(URL,data,callback);URL: Đường dẫn tới tập tin chứa dữ liệu.data: Dữ liệu được gửi cùng với yêu cầu.callback: Tên của hàm sẽ được thực thi sau khi phương thứcload()hoàn thành.
Ví dụ: Lấy nội dung của tập tin “demo.html” và hiển thị trong một thẻ div có 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 REQUEST.
Cú pháp:
$(selector).post(URL,data,function(data,status,xhr),dataType)URL: Đường dẫn tới tập tin cần lấy thông tin.data: Đối tượng chứa các cặp key/value sẽ gửi lên máy chủ.function(data, status , xhr): Hàm xử lý khi yêu cầu thành công với các tham số:data– dữ liệu trả về 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.dataType: Dạng dữ liệu trả về (text, json, script, xml, html, jsonp).
Phương thức get() trong jQuery
Phương thức get() dùng để lấy dữ liệu từ máy chủ bằng phương thức HTTP GET.
Cú pháp tương tự phương thức post(), ví dụ:
$.get(URL,data,function(data,status,xhr),dataType)AJAX là một công nghệ quan trọng trong phát triển web, cho phép chúng ta tạo ra các trang web động và nâng cao trải nghiệm người dùng. Hy vọng bài viết này giúp bạn hiểu rõ hơn về AJAX và cách sử dụng nó trong phát triển web.
Có thể bạn quan tâm đến LADEC.