Object doesn't support this property or method jquery ie8 - ajax

Question

I have two variables in my script view page, one called products and the other sites.
I have declared them like that.
Add.cshtml View:
$(function () {
products;
sites;
GetProductsAndSites(productsURL, sitesURL, '#Model.Key', false);
});
I call an ajax function, in another .js file.
People.js
function GetProductsAndSites(productsURL, sitesURL, secondLevelSiteKey, flag) {
$.ajax({
type: "POST",
url: productsURL,
async: false,
success: function (returndata) {
if (returndata.ok) {
**products = returndata.dataNames;**
//var tempProducts = returndata.dataNames;
$('#select-product').autocomplete({
delay: 0,
minLength: 1,
source: returndata.dataNames,
select: function (event, ui)
{
$.ajax({
type: "POST",
url: sitesURL,
data: { "productID": selectedProductID, "siteID": secondLevelSiteKey },
async: false,
success: function (returndata) {
if (returndata.ok) {
//products = tempProducts ;
**sites = returndata.dataNames;**
$('#select-site').autocomplete({
delay: 0,
minLength: 1,
source: returndata.dataNames,
select: function (event, ui) {
$("#select-site").val(ui.item.label);
});
}
});
}
}
});
}
it throws "Object doesn't support this property or method" exception at (products = returndata.dataNames;) line...at first I thought it can not see the products vairalble, but then I realized that it can see the "sites" variable, so I commented the products line and expected that it would throw the same exception at the sites line, but it works just fine.
I have tried creating a local variable and store the returndata.dataNames in it instead of products vairalbe and then set products value before the sites line, but still it throws an exception. I tried to put the products line after the sites lines it threw the same exception at the products line also.
Help!

Answer 1

After searching and searching, I finally found my solution. Tested with IE8.
Override
if ('XDomainRequest' in window && window.XDomainRequest !== null) {
jQuery.ajaxSettings.xhr = function() {
try {
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e) { }
jQuery.support.cors = true;
}
}
Make the ajax request
$.ajax({
type: 'GET',
url: "your-url",
async: true,
cache: false,
crossDomain: true,
contentType: 'application/json; charset=utf-8',
dataType: 'json'
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log('ERROR: ' + errorThrown);
})
.always(function() {
// Do stuff
});

Answer 2

For me this answer helped, where I detect the IE browser and if its lower than 7 or so then set ActiveXObject else XMLHttpRequest.
jQuery.ajaxSettings.xhr: function() {
// detect if IE and older versions of IE
if (jQuery.browser.msie && jQuery.browser.version.substr(0, 1) <= 7)
return new ActiveXObject("Microsoft.XMLHTTP");
else
return new XMLHttpRequest();
}
Reference:
Detect IE 7 or lower.
Difference between ActiveXObject and XMLHttpRequest.