viết hàm java load kéo xuống đến đâu mới thực hiện hàm js load trang

Để tạo hiệu ứng tải nội dung khi người dùng kéo xuống cuối trang, bạn có thể sử dụng JavaScript để lắng nghe sự kiện cuộn trang (scroll event). Khi người dùng cuộn đến gần cuối trang, một hàm Java sẽ được kích hoạt (nếu bạn đang sử dụng một ứng dụng Java kết hợp JavaScript qua API hoặc AJAX).

1. Tạo Hàm JavaScript để Phát Hiện Cuộn Xuống Cuối Trang#

Dưới đây là mã JavaScript để lắng nghe sự kiện cuộn và gọi một hàm AJAX tới server (Java) để tải thêm dữ liệu.

` window.addEventListener("scroll", function() { if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 100) { // Gọi hàm JavaScript để tải thêm nội dung khi gần chạm đáy trang loadMoreContent(); } });

function loadMoreContent() { // Kiểm tra xem có đang tải nội dung hay không if (window.isLoading) return; window.isLoading = true;

// Thực hiện yêu cầu AJAX tới server
fetch('/loadMoreData')  // URL này là endpoint bạn định nghĩa trong Java để lấy dữ liệu
    .then(response => response.json())
    .then(data => {
        // Xử lý dữ liệu và chèn vào trang
        appendDataToPage(data);
        window.isLoading = false; // Kết thúc tải
    })
    .catch(error => {
        console.error("Error loading more content:", error);
        window.isLoading = false;
    });

}

function appendDataToPage(data) { const container = document.getElementById("content"); // ID của phần tử chứa nội dung data.forEach(item => { const newItem = document.createElement("div"); newItem.className = "item"; newItem.innerText = item.text; // Gán nội dung từ dữ liệu container.appendChild(newItem); }); } `

2. Tạo Servlet Java Để Phục Vụ Nội Dung Mới#

Trong phần backend (Java), bạn có thể tạo một servlet để phục vụ dữ liệu khi nhận được yêu cầu từ AJAX.

Ví dụ về Servlet Java:

` import java.io.IOException; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson;

@WebServlet("/loadMoreData") public class LoadMoreDataServlet extends HttpServlet { private static final long serialVersionUID = 1L;

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // Thiết lập kiểu nội dung là JSON
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");

    // Lấy dữ liệu từ database hoặc tạo dữ liệu mẫu
    List<DataItem> dataItems = loadMoreData();

    // Chuyển đổi dữ liệu sang JSON và gửi về client
    Gson gson = new Gson();
    String jsonData = gson.toJson(dataItems);
    response.getWriter().write(jsonData);
}

private List<DataItem> loadMoreData() {
    List<DataItem> dataItems = new ArrayList<>();
    for (int i = 1; i <= 10; i++) { // Ví dụ tạo 10 mục mới
        dataItems.add(new DataItem("Nội dung mới " + i));
    }
    return dataItems;
}

// Lớp đại diện cho một mục dữ liệu
class DataItem {
    private String text;
    public DataItem(String text) {
        this.text = text;
    }
    public String getText() {
        return text;
    }
}

} `

Giải thích các bước:#

• JavaScript Lắng Nghe Cuộn: Hàm loadMoreContent() sẽ gọi API khi người dùng cuộn xuống cuối trang.

• Tạo Servlet Java Để Tải Thêm Dữ Liệu: Servlet /loadMoreData sẽ gửi dữ liệu dưới dạng JSON. Phần này sử dụng thư viện Gson để chuyển đối tượng Java sang JSON.

• Chèn Nội Dung Vào Trang: Hàm appendDataToPage(data) sẽ thêm nội dung mới vào trang từ dữ liệu JSON nhận được.