title: How to work with HTTPS request in JQuery
body: <p>I am using JQuery ajax for authenticating username and password, however due to security reason I need to call HTTPS request.</p>
  
  <p>Below is my <strong>JQuery Code:</strong> where I need to implement the HTTPS call.</p>
  
  <pre><code> //Submitting the form
  $("#loginDetails &gt; 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!='' &amp;&amp; access!='undefined') // LOGIN OK?
                   { 
                       $('.validateTips').hide();
                      var login_response = '&lt;div id="logged_in"&gt;' +
                       '&lt;div style="width: 350px; float: left; margin-left: 80px;"&gt;' + 
                       '&lt;div style="width: 40px; float: left;"&gt;' +
                       '&lt;img style="margin: 22px 0px 10px 0px;" align="absmiddle" src="system/images/ajax-loader.gif"&gt;' +
                       '&lt;/div&gt;' +
                       '&lt;div style="margin: 24px 0px 0px 10px; float: right; width: 300px;"&gt;'+ 
                       "You are successfully logged in! &lt;br /&gt; Please wait while you're redirected...&lt;/div&gt;&lt;/div&gt;";  
  
                      $('#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; 
  });  
  </code></pre>
  
  <p>The above code works perfect, but due to security issues, I need to change my call call to <strong>HTTPS</strong>, so my ajax call will not be <strong>"Login.aspx"</strong> it will be <strong>"https://login.aspx"</strong></p>
  
  <p>Please suggest how to achieve this, so that my security is maintained and there will not be any security conflict.</p>