title: How to deal with insecure XMLHttpRequest endpoint
body: <p>I am very new to coding, and have a problem with my site. I am getting an error message that says:</p>
  
  <blockquote>
    <p>Mixed Content: The page at 'ajax-utils.js:34 Mixed Content: The page at '<a href="https://daringtrifles.github.io/courserahtmlcssjavascript/module5realsol/index.html" rel="nofollow noreferrer">https://daringtrifles.github.io/courserahtmlcssjavascript/module5realsol/index.html</a>' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '<a href="http://davids-restaurant.herokuapp.com/categories.json" rel="nofollow noreferrer">http://davids-restaurant.herokuapp.com/categories.json</a>'. This request has been blocked; the content must be served over HTTPS</p>
  </blockquote>
  
  <p>Here is my AJAX code. Could you guys please tell me where my mistakes are and how I could solve them?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function(global) {
  
    // Set up a namespace for our utility
    var ajaxUtils = {};
  
  
    // Returns an HTTP request object
    function getRequestObject() {
      if (window.XMLHttpRequest) {
        return (new XMLHttpRequest());
      } else if (window.ActiveXObject) {
        // For very old IE browsers (optional)
        return (new ActiveXObject("Microsoft.XMLHTTP"));
      } else {
        global.alert("Ajax is not supported!");
        return (null);
      }
    }
  
  
    // Makes an Ajax GET request to 'requestUrl'
    ajaxUtils.sendGetRequest =
      function(requestUrl, responseHandler, isJsonResponse) {
        var request = getRequestObject();
        request.onreadystatechange =
          function() {
            handleResponse(request,
              responseHandler,
              isJsonResponse);
          };
        request.open("GET", requestUrl, true);
        request.send(null); // for POST only
      };
  
  
    // Only calls user provided 'responseHandler'
    // function if response is ready
    // and not an error
    function handleResponse(request,
      responseHandler,
      isJsonResponse) {
      if ((request.readyState == 4) &amp;&amp;
        (request.status == 200)) {
  
        // Default to isJsonResponse = true
        if (isJsonResponse == undefined) {
          isJsonResponse = true;
        }
  
        if (isJsonResponse) {
          responseHandler(JSON.parse(request.responseText));
        } else {
          responseHandler(request.responseText);
        }
      }
    }
  
  
    // Expose utility to the global object
    global.$ajaxUtils = ajaxUtils;
  
  
  })(window);</code></pre>
  </div>
  </div>
  </p>