Чего мне не хватает в XMLHttpRequest?

Question

Я совершенно новичок в мире javascript и ajax, но пытаюсь учиться.

Сейчас я тестирую XMLHttpRequest и не могу заставить работать даже самый простой пример. Это код, который я пытаюсь запустить

    <script type="text/javascript">
        function test() {
            xhr = new XMLHttpRequest();

            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200){
                    var container = document.getElementById('line');
                    container.innerHTML = xhr.responseText;
                } else {
                    alert(xhr.status);
                }
            }  

            xhr.open('GET', 'http://www.google.com', true);                  
            xhr.send(null); 
        }
    </script>

И я всегда получаю предупреждение со статусом 0. Я прочитал об этом тонны сетей и не знаю, что мне не хватает. Буду признателен за любую помощь, спасибо!

Answer 1

Вы работаете с той же политикой происхождения .

Если ваш код на самом деле не работает на www.google.com (что маловероятно), это приведет к ошибке.

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

Сделать переменную xhr локальной для функции

var xhr = new XMLHttpRequest();

И обратиться к нему с помощью this в методе onreadstatechange.

if (this.readyState == 4 && this.status == 200){
// etc etc

Answer 2

Исходя из Ответ Дэвида :

Вы должны использовать относительный путь, чтобы остаться в рамках той же политики происхождения. В противном случае большинство браузеров просто вернут пустые responseText и status == 0.

В качестве одного из возможных обходных путей вы можете установить очень простой обратный прокси (с mod_proxy , если вы используете Apache). Это позволит вам использовать относительные пути в вашем AJAX-запросе, в то время как HTTP-сервер будет действовать как прокси для любого «удаленного» местоположения.

Основной директивой конфигурации для настройки обратного прокси в mod_proxy является ProxyPass. Обычно вы используете его следующим образом:

ProxyPass     /ajax/     http://google.com/

В этом случае браузер будет запрашивать /ajax/search?q=stack+overflow, но сервер будет обслуживать это, выступая в качестве прокси для http://google.com/search?q=stack+overflow.

Answer 3

В дополнение к той же проблеме политики происхождения ваш alert находится в нелогичном месте. Когда вы используете XMLHttpRequest, функция, присвоенная xhr.onreadystatechange, будет вызываться при каждом изменении readyState. readyState должно измениться (теоретически) с 0 (инициализировано) до 1 (отправлено) до 2 (загрузка) до 3 (интерактивно) до 4 (завершено).

Ваш код проверяет readyState и проверяет, завершен ли запрос (if (xhr.readyState == 4)), а если нет, alert код состояния HTTP . Поскольку запрос еще не отправлен (или только что отправлен), статус HTTP еще не должен быть.

В идеале вы должны переместить alert внутри блока if, чтобы он знал, когда он закончится.