加载内容并逐个显示php ajax

<script>
    function getfilter(str){
        if (str==""){
            document.getElementById("result").innerHTML="";
            return;
        }

        $.ajax({
            url: "Views/pfolioresult.php?q="+str,
            type: "GET",
            //  data: serializedData,
            success: function ( responseText ) {
                $("#result").html(responseText); 
            }
        });
    }
</script>

This code works correctly. But suppose I have 10,000 data in database. This code show all data at once after loading. How is it possible to show data one by one depending on load time. That means when one item is loaded then show it, and other continuously show.

Some idea, on how this could be done:

function show(skip)
{
    $.ajax({
        url: "Views/pfolioresult.php?skip=" + skip + "q="+str,
        type: "GET",
    //  data: serializedData,
        success: function ( responseText ) {
    $("#result").html(responseText); 
            skip++;
            show(skip);
        }
    });
}

show(0);

and your query in php should look like:

SELECT *
FROM a
LIMIT $skip, 1

You should use pagination and then load content on some event like scrolling or clicking of a lable saying "load more". It is not a good idea to load all records at once.

url: "Views/pfolioresult.php?q="+str+"&page=0&limit=10",

And then in your query you can use page and limit like

$sql = "SELECT ....";

$limit = $_POST['page'] * $_POST['limit']; // get offset records

$sql .= " limit {$limit}, {$_POST['limit']}";

When loading more records like page 2 you can set page=1 in ajax url.

If you have to show that way, you should split the response and show one by one or batch by batch, but this will lead to confusion. which is not a good idea. Better to use plugins like jscroll or inifinite scroll with paging system which will reduce the response time, so that app will work faster and you can achieve what you wanted.