How to make XMLHttpRequest work over HTTPS on google chrome? - ajax

Question

I researched about this a lot, but couldn't find the magic.
Actually I want to populate a list of city pin code no. using JQuery autocomplete UI. It's a https page. It's working in Firefox but not in Google Chrome. Can anyone help me to resolve this issue. Thanks in Advance.
In the following is my code:
function zipAutoCompletet(prefix) {
jQuery("#" + prefix + "_zip").autocomplete({
source: function(request, response) {
jQuery.ajax({
url: "http://ws.geonames.org/postalCodeSearchJSON",
dataType: "jsonp",
data: {
style: "full",
maxRows: 12,
postalcode_startsWith: request.term
},
success: function(data) {
response(
jQuery.map(data.postalCodes, function(item) {
return {
label:
item.placeName +
(item.adminCode1
? ", " + item.adminCode1
: "") +
", " +
item.postalCode +
", " +
item.countryCode,
value: item.postalCode
};
})
);
jQuery(".ui-autocomplete").css("width", "188px");
}
});
},
minLength: 2,
select: function(event, ui) {
var myString = new String(ui.item.label);
var address = myString.split(",");
jQuery("#" + prefix + "_city").val(address[0]);
jQuery("#" + prefix + "_city").addClass("activated");
jQuery("#" + prefix + "_city").trigger("change");
jQuery("#" + prefix + "_city")
.parents(".row")
.removeClass("error-row");
jQuery("#" + prefix + "_city")
.parents(".row")
.addClass("ok-row");
var countryCode = address[3] ? address[3] : address[2];
countryCode = jQuery.trim(countryCode);
var countryName = jQuery(
"#" +
prefix +
'_country option[value="' +
jQuery.trim(countryCode) +
'"]'
).text();
jQuery("#countryContainer .jqTransformSelectWrapper span").html(
countryName
);
jQuery("#countryContainer .jqTransformSelectWrapper").addClass(
"selected-jqtranform"
);
jQuery("#" + prefix + "_country")
.parents(".row")
.addClass("ok-row");
jQuery("#" + prefix + "_country")
.parents(".row")
.removeClass("error-row");
jQuery("#" + prefix + "_country").val(jQuery.trim(countryCode));
var stateCode = address[2] ? address[1] : "";
stateCode = jQuery.trim(stateCode);
if (countryCode == "US") {
var base = base_url;
base = base.replace("https", "http");
jQuery.ajax({
url: base + "/getStateName",
dataType: "jsonp",
data: { stateCode: stateCode },
success: function(data) {
stateName = data;
jQuery("#jc_state").val(stateName);
jQuery("#jc_state").addClass("activated");
jQuery("#jc_state")
.parents(".row")
.removeClass("error-row");
jQuery("#jc_state")
.parents(".row")
.addClass("ok-row");
jQuery("#jc_state").trigger("change");
formValidate();
}
});
} else {
stateName = stateCode;
jQuery("#jc_state").val(stateName);
jQuery("#jc_state").addClass("activated");
jQuery("#jc_state")
.parents(".row")
.removeClass("error-row");
jQuery("#jc_state")
.parents(".row")
.addClass("ok-row");
jQuery("#jc_state").trigger("change");
formValidate();
}
jQuery("#" + prefix + "_zip")
.parents(".row")
.addClass("ok-row");
jQuery("#" + prefix + "_zip")
.parents(".row")
.removeClass("error-row");
},
open: function() {
jQuery(this)
.removeClass("ui-corner-all")
.addClass("ui-corner-top");
},
close: function() {
jQuery(this)
.removeClass("ui-corner-top")
.addClass("ui-corner-all");
},
change: function(event, ui) {
if (ui.item === null) {
jQuery("#" + prefix + "_zip")
.parents(".row")
.removeClass("ok-row");
jQuery("#" + prefix + "_zip")
.parents(".row")
.addClass("error-row");
$("#" + prefix + "_zip").val("");
}
}
});
}

Answer 1

If you are on https page, browser will block requests to non-secure resources (http).
Regularly you should see some notification about that. Looks like other browsers does not block non secure AJAX requests on secured pages by default, but google chrome does.
In your code, you have hardcoded URL:
url: "http://ws.geonames.org/postalCodeSearchJSON",
If that is cross domain request and it supports HTTPS, you can change it like this:
url: "//ws.geonames.org/postalCodeSearchJSON",
As you can see, protocol is not specified there. Browser will take page default protocol (http or https) and use it to request data.