Dynamically loading pages with ajax

This is my javascript code for a webpage to dynamically load the main contents, but the content snippet is not loading, and the loading icon is running forever, the console gives - "Uncaught TypeError: $ajaxUtils.sendGetRequest is not a function at HTMLDocument."

$(function () { // Same as document.addEventListener("DOMContentLoaded"...
    
      // Same as document.querySelector("#navbarToggle").addEventListener("blur",...
      $("#navbarToggle").blur(function (event) {
        var screenWidth = window.innerWidth;
        if (screenWidth < 768) {
          $("#collapsable-nav").collapse('hide');
        }
      });
    });
    
    
    (function (global) {
    
    var dc = {};
    
    var homeHtml = "snip/home-snippet.html";
    
    var insertHtml = function(selector, html) {
        var targetElem = document.querySelector(selector);
        targetElem.innerHTML = html;
        };
    
    var showLoading = function (selector) {
        var html = "<div class='text-center'>";
        html += "<img src='load.gif'></div>";
        insertHtml(selector, html);
    };
    
    document.addEventListener("DOMContentLoaded", function (event) {
    
     showLoading("#main-content");
     $ajaxUtils.sendGetRequest(
        homeHtml,
        function (responseText) {
            document.querySelector("#main-content")
              .innerHTML = responseText;
        },
        false); 
    });
    
    global.$dc = dc;
    
    })(window);