要求:我有一段类似于下面代码的代码。单击保存按钮后,我想在叠加层中显示进度条。一旦我得到来自 ajax 调用的响应,我会显示一个警报,显示操作成功。
问题:覆盖(进度条)仅在我们从 ajax 调用得到响应并显示警报后才可见。在处理 ajax 调用时它是不可见的。
我在这里做错了什么还是这是预期的行为?我正在使用纯javascript。我不能使用任何外部库来做到这一点。
<script>
function save(){
document.getElementById('overlaydiv').style.display = 'block';
document.getElementById('progressBarDiv ').style.display = 'block';
var URL = 'some url';
ajaxFunction(URL, false);
}
function ajaxFunction(URL, isAsynchronousCall){
var xmlHttp;
var callTypeFlag = true; // is an Asynchronous Call
if(isAsynchronousCall != null){
callTypeFlag = isAsynchronousCall;
}
try{
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}catch (e){
alert("Your browser does not support AJAX!");
return false;
}
xmlHttp.open("GET", URL, callTypeFlag);
xmlHttp.onreadystatechange = function(){responseProcessor(xmlHttp)};
xmlHttp.send(null);
}
function responseProcessor(xmlHttp){
//If the readystate is 4 then check for the request status.
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
alert('Settings saved successfully');
window.close();
opener.location.href='new URL';
}
}
}
</script>
<div id="overlaydiv" style="display:none"/>
<div id="progressBarDiv" style="display:none">
<img border="0" src="progressBar.gif"/>
</div>
<div>
<table>
<tr>
<td>
<input type="button" onclick="save()"/>
</td>
</tr>
</table>
</div>