How to work with HTTPS request in JQuery

I am using JQuery ajax for authenticating username and password, however due to security reason I need to call HTTPS request.

Below is my JQuery Code: where I need to implement the HTTPS call.

 //Submitting the form
$("#loginDetails > form").submit(function()
{  
    //Hiding the Login button
    $("#loginButton").hide();

    //Showing the ajax loading image
    $("#ajaxloading").show();

    // 'this' refers to the current submitted form  
    var str = $(this).serialize();   
    // -- Start AJAX Call --

    $.ajax({  
        type: "POST",
        url: "Login.aspx",  // Send the login info to this page
        data: str,  
        success: function(result)
        {  

            $("#loginDetails").ajaxComplete(function(event, request, settings)
            {  

             // Show 'Submit' Button
            $('#loginButton').show();

            // Hide Gif Spinning Rotator
            $('#ajaxloading').hide();  

            var resLength = result.trim().length;

            if(resLength!=0)
            {
                var arr = result.split(",");
                var fname = arr[0];
                var lname = arr[1];
                var activeCardNo = arr[2];
                var multipleTier = arr[3];
                var activeStatus = arr[4];
                var access = arr[5];

                 if(access!='' && access!='undefined') // LOGIN OK?
                 { 
                     $('.validateTips').hide();
                    var login_response = '<div id="logged_in">' +
                     '<div style="width: 350px; float: left; margin-left: 80px;">' + 
                     '<div style="width: 40px; float: left;">' +
                     '<img style="margin: 22px 0px 10px 0px;" align="absmiddle" src="system/images/ajax-loader.gif">' +
                     '</div>' +
                     '<div style="margin: 24px 0px 0px 10px; float: right; width: 300px;">'+ 
                     "You are successfully logged in! <br /> Please wait while you're redirected...</div></div>";  

                    $('#loginButton').hide();
                    $('#closeBtn').hide();
                    $('#divMember').text(fname +' '+ lname);
                    $('#spnSkywardsNo').text(activeCardNo);
                    $('#spnTierStatus').text(multipleTier);
                    $("#ui-dialog-title-skywardsLogin").text(getDataFromResourceFile('pleaseWait'));

                    $('#divSuccessLogin').html(login_response);
                    $('#divSuccessLogin').show();
                    $('#loginDetails').hide();
                    //$(this).html(login_response); // Refers to 'status'

                    // After 3 seconds redirect the 
                    setTimeout(closeDialog, 3000); 

                 }  
              }
            else// ERROR?
             {  
                 var login_response = getDataFromResourceFile('InvalidUsername');
                 $('.validateTips').html(login_response);
             }

     });  

     }  

    });  

    // -- End AJAX Call --

    return false; 
});  

The above code works perfect, but due to security issues, I need to change my call call to HTTPS, so my ajax call w开发者_StackOverflowill not be "Login.aspx" it will be "https://login.aspx"

Please suggest how to achieve this, so that my security is maintained and there will not be any security conflict.

This will happen by default if the page is https://, this has to be the case...you can't make an AJAX request from an http:// page to an https:// destination, and vice-versa. When you try this, it's seen as a different protocol, and in violating of the same origin policy, so you'll be prevented from seeing the response.