Chain

by Jennifer Piccione

HTML

<ul id="result"></ul>
<button id="go">Start</button>

JavaScript

$(function () {
    var result = $("#result");

    var appendLi = function (str) {
        $("<li/>", {
            html: str
        }).appendTo(result);
    };

    $("#go").on("click", function () {
        appendLi("Starting...");

        $.post("/echo/html/", {
            html: "First Response",
            delay: 1
        })
            .then(function (result) {
            appendLi(result);
            return $.post("/echo/html/", {
                html: "Second Response",
                delay: 1
            });
        }).then(function (result) {
            appendLi(result);
            return $.post("/echo/html/", {
                html: "Third Response",
                delay: 1
            });
        }).done(function (result) {
            appendLi(result);
            appendLi("Done");
        });
    });
});