How to access the JSON on HTTP from an HTTPS page?

Question

Here is my code I am trying to access the content on HTTP page from an HTTPS page it is giving me an error in browser console that it is an insecure content, following is an error ' Loading mixed (insecure) active content on a secure page "http://pnrbuddy.com/api/station_by_code/code/cnb/format/json/pbapikey/539ff0f815ca697c681fe01d32ba52e3/pbapisign/906544ca31f9c0048e80bde8127556af828e313b" ' , it is showing Json inbrowser console but unable to read it. How can I read that JSON?

'use strict';

var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();

(function () {

    // This code runs when the DOM is ready and creates a context object which is 
    // needed to use the SharePoint object model
    $(document).ready(function () 
    {
        getUserName();

        $("#button1").click(function()
        {
                paraupdate();   
        });

    });

    // This function prepares, loads, and then executes a SharePoint query to get 
    // the current users information

    function paraupdate()
    {

        var str=""+$("#textbox1").val();
        alert(""+str);
        var message = str+"json539ff0f815ca697c681fe01d32ba52e3";
        var secret = "<my private key>";
        var crypto = CryptoJS.HmacSHA1(message, secret).toString();
        alert("crypto answer is " + crypto);
        var siteurl="http://pnrbuddy.com/api/station_by_code/code/"+str+"/format/json/pbapikey/539ff0f815ca697c681fe01d32ba52e3/pbapisign/"+crypto;


        //////////////////////////////////////////////
         $.ajax({
            url: siteurl,
            type: "GET",
            dataType: 'json',
    /*  headers: {
                "accept": "application/json;odata=verbose",
            },   */
            success: function (data) {
                alert("Success");
                alert(data.Station);
            /*  $.each(data.d.results, function (index, item) 
                {     

                   alert("My ID"+index);
                    alert("Item"+item);
                });

                //var str=JSON.parse(data);

                 var myResults = [];
            $.each(data, function (index, item) {
                alert("dsfsd"+item.station_by_code)
                myResults.push({
                    id: item.id,  

                    //text: item.first_name + " " + item.last_name
                }); 
            });     */

            },
            error: function (error) {
                alert("IN Error");
                alert(JSON.stringify(error));
            }
        });
        /////////////////////////////////////////////

    }

    function getUserName() 
    {
        context.load(user);
        context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
    }

    // This function is executed if the above call is successful
    // It replaces the contents of the 'message' element with the user name
    function onGetUserNameSuccess() 
    {
        $("#label1").html("Enter Station Code : ");
        $("#button1").val("CLICK");

    }

    // This function is executed if the above call fails
    function onGetUserNameFail(sender, args) {
        alert('Failed to get user name. Error:' + args.get_message());
    }



})();

Answer 1

'use strict';

var context = SP.ClientContext.get_current(); var user = context.get_web().get_currentUser();

(function () {

// This code runs when the DOM is ready and creates a context object which is 
// needed to use the SharePoint object model
$(document).ready(function () 
{
    getUserName();

    $("#button1").click(function()
    {
            paraupdate();   
    });

});

// This function prepares, loads, and then executes a SharePoint query to get 
// the current users information

function paraupdate()
{

    var str=""+$("#textbox1").val();
    alert(""+str);
    var message = str+"json539ff0f815ca697c681fe01d32ba52e3";
    var secret = "<my private key>";
    var crypto = CryptoJS.HmacSHA1(message, secret).toString();
    alert("crypto answer is " + crypto);
    var siteurl="http://pnrbuddy.com/api/station_by_code/code/"+str+"/format/json/pbapikey/539ff0f815ca697c681fe01d32ba52e3/pbapisign/"+crypto;


    //////////////////////////////////////////////
     $.ajax({
        url: siteurl,
        type: "GET",
        dataType: 'json',
        success: function (data) {
            alert("Success");
            alert(" Code : "data.stations[0].code+" Name : "+data.stations[0].name);

        },
        error: function (error) {
            alert("IN Error");
            alert(JSON.stringify(error));
        }
    });
    /////////////////////////////////////////////

}

function getUserName() 
{
    context.load(user);
    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}

// This function is executed if the above call is successful
// It replaces the contents of the 'message' element with the user name
function onGetUserNameSuccess() 
{
    $("#label1").html("Enter Station Code : ");
    $("#button1").val("CLICK");

}

// This function is executed if the above call fails
function onGetUserNameFail(sender, args) {
    alert('Failed to get user name. Error:' + args.get_message());
}

})();