jQuery Ajax を使って「もっと見る」ボタンの処理を行う。

まず、クライアント側。

<!DOCTYPE html>
<head>
    <title>jQuery Ajax でコンテンツをロードする</title>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function (){
            $(document).on("click", "#more", function () {
                var next_id = $("#content").children("div").length + 1;
                $("#more").html("<img src='ajax-loader.gif'/>");
                $.ajax({
                    type:"GET",
                    url:"more.php",
                    data: "next_id=" + next_id,
                    timeout: 3000,      //milisec
                    success: function(data) {
                        $("#more").remove();
                        $("#content").append(data);
                    },
                    error: function(request, status, err) {
                        if(status == "timeout") {
                            $("#content").html("timeout error.");
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
<div id="content">
    <div id="content-1">最初のコンテンツ1</div>
    <div id="content-2">最初のコンテンツ2</div>
    <div id="content-3">最初のコンテンツ3</div>
    <div id="content-4">最初のコンテンツ4</div>
    <div id="content-5">最初のコンテンツ5</div>
    <button id="more">もっと見る(6~)</div>
</div>
</body>
</html>

つづいて、サーバー側。

<?php
    $next_id = $_GET['next_id'];

    usleep(200000); // 0.2秒スリープ

    for ($i = $next_id; $i < $next_id + 5; $i++) {
        if ($i >= 18) {
            break;
        }
?>
        <div id="content-<?php echo $i; ?>">新しいコンテンツ<?php echo $i; ?></div>
<?php
    }

    if ($i >= 18) {
?>
        <div>これで終わり</div>
<?php
    } else {
?>
        <button id="more">もっと見る(<?php echo $i; ?>~)</div>
<?php
    }
?>
以上。