Добавление AJAX загрузки GIF для скрипта

Question

Спасибо за просмотр, у меня есть скрипт ниже, который обновляет ряд выпадающих окон, заполняемых в зависимости от предыдущего ответа пользователя. Данные поступают из таблиц SQL. Мне было интересно, как я могу добавить GIF-загрузку Ajax в каждый выпадающий список во время загрузки данных. Я надеюсь, что это имеет смысл, если нет, пожалуйста, спросите.

<script language="javascript">
var xmlhttp

function selectmanu()
{

xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Your browser does not support XMLHTTP!");
  return;
  }
 document.form1.mtype.style.background = "#FFFFFF"
 var id=document.form1.mtype.value;


var url="selectmanu.php";
url=url+"?id="+id;
/*url=url+"&sid="+Math.random();*/
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged()
{

if (xmlhttp.readyState==4)
  {
  document.getElementById("abc").innerHTML=xmlhttp.responseText;
  }
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}


function selectmodel()
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Your browser does not support XMLHTTP!");
  return;
  }
  document.form1.manu.style.background = "#FFFFFF"
 var id=document.form1.manu.value;
var url="selectmodel.php";
url=url+"?id="+id;
xmlhttp.onreadystatechange=stateChanged1;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged1()
{

if (xmlhttp.readyState==4)
  {
  document.getElementById("modspan").innerHTML=xmlhttp.responseText;
  }
}

function validate()
{

if(document.form1.mtype.value=='0')
{
document.form1.mtype.style.background = "#FF0000"
return false;
}
else if(document.form1.manu.value=='0')
{
document.form1.manu.style.background = "#FF0000"
return false;
}
else if(document.form1.model.value=='0')
{
document.form1.model.style.background = "#FF0000"
return false;
}
return true;
}
function mset()
{
if(document.form1.model.value!='0')
{
document.form1.model.style.background = "#FFFFFF"
}

}

</script>

Ура, B.

Answer 1

Вместо изображений вы можете отключить «выбрать» и поставить один «вариант» с сообщением о загрузке. Вы делаете это до вызова XHR.

<select disabled="">
  <option>Loading...</option>
</select>

Как только вы получите свои данные, замените эту «опцию» на реальные и удалите атрибут «отключен».

Визуально это нормально, и пользователям нечего гадать.

Answer 2

Я думаю, что вы можете иметь изображения в некоторых опциях, но я слишком уверен. Не цитируйте меня об этом.

Тем не менее, это просто случай использования JavaScript-функции onChange, которая заменяет следующий элемент select загрузочным изображением при запросе базы данных о ваших параметрах. Когда параметры были получены AJAX, замените загружаемое изображение полем выбора, прокрутите ответ AJAX и добавьте тег option для каждого параметра, полученного из базы данных.

Как уже упоминалось выше, такие библиотеки, как jQuery, упрощают написание таких функций, но для этого вам нужно хорошее знание написания JavaScript с нуля.