Requerimento de AJAX

E ai pessoal, tudo bem?

Terminei o curso de Javascript e quis botar em pratica outro projeto para treinar e fixar bem o conhecimento.

Aqui está o projeto caso queiram ver: Projeto

Bom, o problema é que o meu projeto é de Quotes e eu não consigo fazer esse requerimento porque da um erro que eu realmente não sei o motivo, provavelmente há algo a mais e AJAX que ainda nao foi abordado e por isso ficou a duvida.

Tentei isso:

url = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1";

   var xhr = new XMLHttpRequest();
   xhr.open("GET", url);

  xhr.addEventListener("load", function(){
    console.log(xhr.responseText);
  });

  xhr.send();

Que deveria me retornar algo como:

[{"ID":1332,"title":"James Goldsmith","content":"<p>If you pay peanuts, you get monkeys.  <\/p>\n","link":"https:\/\/quotesondesign.com\/james-goldsmith\/"}]

Mas não da e da, no console, o erro: pen.js:93 Mixed Content: The page at 'https://codepen.io/pedrobslisboa/pen/PRJBQJ' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1'. This request has been blocked; the content must be served over HTTPS.

Realmente não sei qual é o problema, gostaria muito de entender BEM e não queria deixar passa.

Desde ja agradeço a todos que tentarem me ajudar.