response.Text не определен при возврате переменной

Question

Не уверен, что проблема связана с Ajax или чем-то глупым в JavaScript, который я вообще пропускаю, но у меня есть следующий скрипт, где fox.html - это просто простой текст, который читает: Лентяй." :

function loadXMLDoc()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.open("GET","fox.html",true);
xmlhttp.send();

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    fox = xmlhttp.responseText;
    alert(fox);
    }
  }

}

onload = loadXMLDoc;

Приведенный выше скрипт просто предупреждает содержимое файла onx.html onload. Однако, если я изменю сценарий так:

{
fox = xmlhttp.responseText;
alert(fox);
}

становится:

{
fox = xmlhttp.responseText;
return fox;
}

и оповещение (loadXMLDoc ()); при загрузке я получаю 'undefined'.

Мне интересно, почему это так.

Answer 1

AJAX является асинхронным. Поэтому ваш вызов alert (loadXMLDoc ()) фактически ничего не возвращает.

xmlhttp.onreadystatechange=function()
  {
  ...
  }

Это создает новую функцию и присоединяет ее к объекту xmlHTTP. Когда состояние изменяется (событие запускается), эта функция выполняется. Это НЕ выполняется во время выполнения loadXMLDoc (), но вместо этого в какой-то момент в будущем. Это сделано для поддержания удобства использования в вашем веб-приложении (вещи не ждут, пока что-то завершится).

Данные, которые возвращаются из вашего AJAX-запроса, должны обрабатываться в этой новой функции, которую вы создали. Вы должны обновить необходимые части вашей страницы с возвращенной информацией. Он не может вернуть никаких данных, на самом деле он может вернуть все, что хочет, но с этой информацией ничего не будет сделано.

Вы также можете определить новую функцию где-нибудь еще и присоединить ее к обработчику событий onreadystatechange, выполнив:

function handler() { ... }

xhmlhttp.onreadystatechange = handler;

Answer 2

Поскольку возвращаемое значение находится в области действия функции xmlhttp.onreadystatechange, а не в вашей функции loadXML. Вот как работают асинхронные запросы: они выполняются в фоновом режиме, а код уже продолжается. Когда запрос завершается, он вызывает функцию, которая обычно устанавливается на onreadystatechange.

Итак, быстрый пример; в FunctionA вы запускаете запрос XMLHTTP, который по завершении вызывает функцию onreadystatechange, которая вызывает FunctionB с responseText.

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