How to implement infinite scrolling with AJAX and jQuery?

To implement infinite scrolling with AJAX and jQuery, you can follow these steps:

Create an HTML structure for displaying the content that will be loaded dynamically. For example, you can have a container element (e.g., <div id="content">) where the loaded items will be appended.
Initialize a variable for tracking the current page or offset. This variable will be used to determine which data to load next.
Attach a scroll event handler to the window object using jQuery's .scroll() method. Inside the event handler, check if the user has reached the bottom of the page by comparing the window scroll position with the document height ($(document).height() - $(window).height()). If the user has reached the bottom, trigger an AJAX request to fetch more data.
In the AJAX request, provide the required parameters (such as the current page or offset) to the server. Use the returned data to generate HTML content, and then append it to the container element.
Increment the page or offset variable to prepare for the next request.

Here's an example implementation:

var currentPage = 1;

function loadMoreData() {
  // Check if the user has reached the bottom of the page
  if ($(window).scrollTop() == $(document).height() - $(window).height()) {
    // Trigger an AJAX request
    $.ajax({
      url: 'data.php',
      method: 'GET',
      data: { page: currentPage },
      success: function(response) {
        // Generate HTML content from the response data
        var html = '';
        for (var i = 0; i < response.length; i++) {
          html += '<div class="item">' + response[i] + '</div>';
        }

        // Append the HTML content to the container element
        $('#content').append(html);

        // Increment the current page
        currentPage++;
      }
    });
  }
}

$(window).scroll(loadMoreData);

In this example, assume that the server returns an array of data in JSON format. The server-side script (e.g., 'data.php') should handle the requested page or offset to determine which data to fetch and return.