Bootstrap KnockoutJS random cats gallery

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <title>Cats gallery</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
    .modal-body {text-align: center; }
    .modal-body img {max-width: 100%;}
    </style>
</head>

<body>

    <div class="container">
        <div class="jumbotron">
            <h1>Cats gallery</h1>
            <p>Bootstrap and KnockoutJS based gallery of cats based on <a href="http://thecatapi.com">http://thecatapi.com</a></p>
        </div>
        <div class="row flex" data-bind="foreach: listItems">
            <div class="col-lg-4 col-sm-6">
                <a data-bind="attr: {href: '#' + $data.id}" class="thumbnail" data-toggle="modal">
                    <img data-bind="attr: {src: $data.url}" alt="Random cat">
                </a>
                <div class="modal" data-bind="attr: {id: $data.id}">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-body">
                                <img data-bind="attr: {src: $data.url}" alt="Random cat">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/x2js/1.2.0/xml2json.js"></script>

    <script>
        var ViewModel = function()
        {
            var self = this;
            self.listItems = ko.observableArray();

            self.loadMore = function()
            {
                self.ajax("http://thecatapi.com/api/images/get?format=xml&results_per_page=4", "GET", {})
                    .done(function(data) {
                        var x2js = new X2JS();
                        var response = x2js.xml2json(data);
                        var images = response.response.data.images.image;
                        for(var i = 0; i < images.length; i++)
                        {
                            self.listItems.push({
                                "id": images[i].id,
                                "url": images[i].url
                            });
                        }

                    })
                    .fail(function() {
                        alert('Somethings went wrong!');
                    })
            }

            self.ajax = function (url, method, data)
            {
                var request = {
                    url: url,
                    type: method,
                    data: data,
                    dataType: 'xml'
                };
                return $.ajax(request);
            }

        }

        var viewModel = new ViewModel();
        ko.applyBindings(viewModel);

        $(document).ready(function() {
            viewModel.loadMore();
        });

        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                viewModel.loadMore();
            }
        });

    </script>
</body>

</html>