[英]Javascript XMLHttpRequest won't send with IE 8 or 9 but works with IE 10
I am currently having a lot of troubles making ajax works with IE versions inferior to 10 while I have no problem with Firefox, Chrome, Safari, Opera and even IE 10. My website just shows 3 select menus linked together, 2 of which get filled with data coming from a mysql database whenever something is selected in the first one and then in the second one. 我目前在使ajax适用于IE 10以下的IE版本时遇到很多麻烦,而对于Firefox,Chrome,Safari,Opera甚至IE 10都没有问题。我的网站仅显示3个选择菜单链接在一起,其中2个被填充每当第一个然后在第二个中选择某个内容时,数据就会来自mysql数据库。 Apache logs don't show any POST request being done when using IE 8 or 9 and my select menus won't get filled with data.
使用IE 8或9时,Apache日志不显示正在执行的任何POST请求,并且我的选择菜单不会充满数据。
This is my javascript code: 这是我的JavaScript代码:
function getXMLHttpRequest() {
var xhr = null;
if (window.XMLHttpRequest || window.ActiveXObject) {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
} else {
xhr = new XMLHttpRequest();
}
} else {
alert("Your browser doesn't support XMLHTTPRequest...");
return null;
}
return xhr;
}
function request(oSelect) {
var value = oSelect.options[oSelect.selectedIndex].value;
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
displayOptions(xhr.responseText, oSelect);
}
}
xhr.open("POST", "ajax.pl", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(oSelect.name + "=" + value);
}
function displayOptions(oData, oSelect) {
if (oSelect.name == "genus") {
document.getElementsByName("species")[0].disabled = false;
document.getElementsByName("species")[0].innerHTML = oData;
document.getElementsByName("subspecies")[0].disabled = true;
document.getElementsByName("subspecies")[0].innerHTML = "";
}
if (oSelect.name == "species") {
document.getElementsByName("subspecies")[0].disabled = false;
document.getElementsByName("subspecies")[0].innerHTML = oData;
}
}
So far I have tried to change the xhr.open command from POST to GET, but without any luck. 到目前为止,我已经尝试将xhr.open命令从POST更改为GET,但是没有任何运气。 I also tried to put the absolute path to the perl cgi in the xhr.send command, but without any effect on IE 8 at all.
我还尝试在xhr.send命令中将perl cgi的绝对路径放入,但对IE 8完全没有影响。
I have also tried the following thing: 我还尝试了以下操作:
xhr.onreadystatechange = function() {
if(xhr.readyState == 0) {
alert("zero");
}
if(xhr.readyState == 1) {
alert("one");
}
if(xhr.readyState == 2) {
alert("two");
}
if(xhr.readyState == 3) {
alert("three");
}
if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
alert("four");
displayOptions(xhr.responseText, oSelect);
}
}
This gives me the following output with Chrome: 这给了我Chrome的以下输出:
one
two
three
four
While I have this one with IE 8: 虽然我在IE 8上有这个:
one
one
four
Since I'm a newbie I fail to find what could cause this problem. 由于我是新手,因此无法找到可能导致此问题的原因。 I've been wandering the web for answers but still haven't found one.
我一直在网上寻找答案,但仍然没有找到答案。
Any would then be much much appreciated as I start to be desperate. 当我开始绝望时,任何人都将不胜感激。
I found a workaround by using jQuery as Oscar suggested. 我通过使用Oscar建议的jQuery找到了解决方法。
Here is the code I wrote that replaced the js functions in my above post, it works like a charm: 这是我写的代码,替换了我上面的帖子中的js函数,它的工作原理很吸引人:
$(document).ready(function() {
var $genus = $('#genus');
var $species = $('#species');
var $subspecies = $('#subspecies');
$genus.on('change', function() {
var value = $(this).val();
$species.empty();
$subspecies.empty();
if(value != '') {
$species.removeAttr('disabled');
$subspecies.attr('disabled', 'disabled');
$.ajax({
url: 'ajax.pl',
data: 'genus=' + value,
dataType: 'html',
success: function(code_html) {
$(code_html).appendTo('#species');
}
});
} else {
$species.attr('disabled', 'disabled');
$subspecies.attr('disabled', 'disabled');
}
});
$species.on('change', function() {
var value = $(this).val();
$subspecies.empty();
if (value != '') {
$subspecies.removeAttr('disabled');
$.ajax({
url: 'ajax.pl',
data: 'species=' + value,
dataType: 'html',
success: function(code_html) {
$(code_html).appendTo('#subspecies');
}
});
} else {
$subspecies.attr('disabled', 'disabled');
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.