Bài 1: Giới thiệu về Trình quản lý quảng cáo

BÀI GIẢNG: AJAX TRONG JQUERY

1. Giới thiệu về AJAX

1.1 AJAX là gì?

AJAX (Asynchronous JavaScript and XML) là một kỹ thuật giúp trang web có thể gửi và nhận dữ liệu từ máy chủ mà không cần tải lại toàn bộ trang.

1.2 Lợi ích của AJAX

Tăng tốc độ tải trang.
Cải thiện trải nghiệm người dùng.
Giảm tải cho server.
Dữ liệu được cập nhật mà không cần refresh trang.

2. Cách sử dụng AJAX trong jQuery

jQuery cung cấp phương thức .ajax(), cùng với các phương thức tiện lợi như $.get(), $.post(), và $.getJSON().

2.1 Sử dụng $.ajax()

Cú pháp:

$.ajax({
    url: "URL của API hoặc tài nguyên",
    method: "GET hoặc POST hoặc PUT hoặc DELETE",
    data: { key1: "value1", key2: "value2" }, // Dữ liệu gửi đi (tùy chọn)
    dataType: "json", // Kiểu dữ liệu mong muốn trả về (json, xml, text, html)
    success: function(response) {
        console.log("Dữ liệu nhận được:", response);
    },
    error: function(xhr, status, error) {
        console.log("Lỗi AJAX:", error);
    }
});

Ví dụ cụ thể:

$.ajax({
    url: "https://jsonplaceholder.typicode.com/posts/1",
    method: "GET",
    success: function(data) {
        console.log("Dữ liệu nhận được:", data);
    },
    error: function(xhr, status, error) {
        console.log("Lỗi AJAX:", error);
    }
});

2.2 Sử dụng $.get() và $.post()

Cú pháp của $.get()

$.get(url, data, callback, dataType)

Ví dụ:

$.get("https://jsonplaceholder.typicode.com/posts/1", function(data) {
    console.log("Dữ liệu nhận được:", data);
});

Cú pháp của $.post()

$.post(url, data, callback, dataType)

Ví dụ:

$.post("https://jsonplaceholder.typicode.com/posts", { title: "Tiêu đề mới" }, function(data) {
    console.log("Dữ liệu trả về:", data);
});

3. Các sự kiện AJAX trong jQuery

jQuery cung cấp các sự kiện AJAX để theo dõi trạng thái của các yêu cầu AJAX.

3.1 ajaxStart: Kích hoạt khi AJAX đầu tiên bắt đầu

$(document).ajaxStart(function() {
    console.log("AJAX bắt đầu!");
    $("#loading").show();
});

3.2 ajaxStop: Kích hoạt khi tất cả AJAX đã hoàn thành

$(document).ajaxStop(function() {
    console.log("Tất cả AJAX đã hoàn thành!");
    $("#loading").hide();
});

3.3 ajaxSend: Kích hoạt trước khi gửi request

$(document).ajaxSend(function(event, jqxhr, settings) {
    console.log("Đang gửi AJAX đến: " + settings.url);
});

3.4 ajaxComplete: Kích hoạt khi một AJAX hoàn thành

$(document).ajaxComplete(function(event, jqxhr, settings) {
    console.log("Yêu cầu AJAX đến " + settings.url + " đã hoàn thành!");
});

3.5 ajaxSuccess: Kích hoạt khi AJAX thành công

$(document).ajaxSuccess(function(event, jqxhr, settings) {
    console.log("Yêu cầu AJAX đến " + settings.url + " thành công!");
});

3.6 ajaxError: Kích hoạt khi AJAX thất bại

$(document).ajaxError(function(event, jqxhr, settings, thrownError) {
    console.log("Lỗi AJAX: " + thrownError);
});

4. Ví dụ thực tế

4.1 Ví dụ AJAX với Loader

<div id="loading" style="display: none;">Đang tải...</div>
<button id="loadData">Tải dữ liệu</button>
<div id="result"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ajaxStart(function() {
        $("#loading").show();
    }).ajaxStop(function() {
        $("#loading").hide();
    });

    $("#loadData").click(function() {
        $.ajax({
            url: "https://jsonplaceholder.typicode.com/posts/1",
            method: "GET",
            success: function(data) {
                $("#result").html("<p>" + data.title + "</p>");
            }
        });
    });
</script>

5. Tổng kết

AJAX giúp gửi và nhận dữ liệu mà không cần tải lại trang.
jQuery hỗ trợ AJAX với các phương thức như $.ajax(), $.get(), $.post().
jQuery cung cấp các sự kiện như ajaxStart, ajaxStop, ajaxSuccess, ajaxError để theo dõi trạng thái AJAX.
Hiểu và sử dụng tốt AJAX giúp cải thiện hiệu suất và trải nghiệm người dùng.

Checklist các mục cần chuẩn bị PDF · 1.2MB

Tải xuống
Tài nguyên chính thức của Facebook Link ngoài

Mở link

Bài tập về nhà: Quản lý danh sách sản phẩm bằng AJAX

Yêu cầu:

Tạo một danh sách sản phẩm, mỗi sản phẩm có:
- Tên sản phẩm
- Giá sản phẩm
- Nút "Xóa" để xóa sản phẩm khỏi danh sách
Thêm sản phẩm mới vào danh sách:
- Có ô nhập tên sản phẩm và giá sản phẩm
- Khi nhấn "Thêm sản phẩm", dữ liệu sẽ được gửi bằng AJAX mà không tải lại trang
- Lưu ý: Không cần url nhận ajax thực tế. Chỉ cần viết hàm add sản phẩm và hiển thị lên giao diện khi nhấn nút là được
Xóa sản phẩm khỏi danh sách:
- Khi nhấn "Xóa", sản phẩm sẽ bị xóa bằng AJAX và danh sách cập nhật lại
Thêm hiệu ứng loading:
- Khi AJAX đang gửi yêu cầu, hiển thị div#loading
- Khi nhận phản hồi, ẩn div#loading
- Sử dụng sự kiện ajaxStart và ajaxStop

HTML MẪU

<h2>Danh sách sản phẩm</h2>
<ul id="productList">
    <!-- Danh sách sản phẩm sẽ được thêm ở đây -->
</ul>

<h3>Thêm sản phẩm mới</h3>
<input type="text" id="productName" placeholder="Tên sản phẩm">
<input type="number" id="productPrice" placeholder="Giá sản phẩm">
<button id="addProduct">Thêm sản phẩm</button>

<div id="loading" style="display:none;">Đang xử lý...</div>
<p id="statusMessage"></p>

JavaScript (jQuery)

$(document).ready(function() {
    $(document).ajaxStart(function() {
        $("#loading").show();
    }); 
    $(document).ajaxStop(function() {
        $("#loading").hide();
    });

    // Thêm sản phẩm
    $("#addProduct").click(function() {
         
    });

    // Xóa sản phẩm
    $(document).on("click", ".deleteProduct", function() {
        
    });
});