AJAX sync/async test

Demonstrate no UI when using Sync requests

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="visible: DivVisible">
    <b>The request is executing</b>
</div>
<p data-bind="text: Message"></p>
<button data-bind="click: Request, enable: !DivVisible()">Request</button>

JavaScript

var viewModel = function() {
    var self= this;
    
    self.DivVisible = ko.observable(false);
    
    self.Message = ko.observable("Waiting");
    
    self.Request = function() {
        self.Message("Running");
        self.DivVisible(true);
        
        // make sync query
        $.ajax({
            url: "/echo/html/",
            async: true,
            data: { html: "test worked", delay: 2 },
            success: function(data) {
                self.DivVisible(false);
                self.Message("Result: " + data);
            }});
        // request completed
        
    };
}

ko.applyBindings(new viewModel());