Как правильно сделать запрос POST в XMLHttpRequest, что бы получить ответ от сервера?

Question

[LB777]

Зада: серверу отправить логин, пароль и от него получить ответ 200 и сообщение.

Написал:

function getXmlHttp(){
    var xmlhttp;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
        }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}

function httpRequestPost(){
    var xmlhttp = getXmlHttp();
    xmlhttp.open("POST",  "http://site.ru/request", true);
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
    xmlhttp.send("user=user_user&data=15685418");
    xmlhttp.onreadystatechange = function(){ 
            if (xmlhttp.readyState == 4) {
                if(xmlhttp.status == 200) {
                    alert(xmlhttp.responseText);
                } else {
                    alert(xmlhttp.status );
                }
            }
        };
}

В итоге данные на сервер отправляются, а ответ (xmlhttp.status) ловит со статусом 0. Но фидлер показывает, что ответ на этот запрос был со статусом 200 и данными (сообщением) пришли.

Как сделать так, что бы можно было в этом же скрипте отловить ответ от сервера на мой запрос?

Answer 1

[Сергей Мельников]

youmightnotneedjquery.com

IE8+

var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.onreadystatechange = function() {
  if (this.readyState === 4) {
    if (this.status >= 200 && this.status < 400) {
      // Success!
      var resp = this.responseText;
    } else {
      // Error :(
    }
  }
};
request.send(data);

Comments

[LB777]

Сергей Мельников спасибо, но как только что выяснил этого не совсем то. Получается, что когда пришел ответ 4 у readyState , то у сервера ещё не готов ни какой ответ. Поэтому мне надо как-то подписаться на событие от сервера и ждать когда он мне вернёт какой-нибудь ответ.

Answer 2

[Александр]

Выше Сергей Мельников ответил Вам....
readyState - это не код, а статус запроса - он принимает 5 состояний, 0,1,2,3 и 4
Код ответа лежит в "status"
для readyState следующие состояния - это для асинхронных запросов
0 - Unitialized
1 - Loading
2 - Loaded
3 - Interactive
4 - Complete

Comments

[LB777]

shendel окей, после статуса запроса мне надо дождаться ответа от "status", который, на момент статуса запроса 4, отдает 0

[Александр]

LB777: точно НОЛЬ? - может не туда смотрите?
[CODE]
var request = new XMLHttpRequest();
request.open('POST', '/my/url', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.onreadystatechange = function() {
console.log(this.readyState,this.status);
if (this.readyState === 4) {
console.log(this.status);
if (this.status >= 200 && this.status < 400) {
console.log(this.status);
var resp = this.responseText;
} else {
// Error :(
}
}
};
request.send({});
[/CODE]
в консоле пишет
2 404
3 404
4 404
404

если путь с "/my/url/" поменять на "/" - где точно есть данные с кодом 200 - то в консоле пишет

2 200
3 200
4 200
200
200

[Евгений Петров]

LB777: Скажите, вы как статус смотрите? Как только вы создали XMLHttpRequest, статус уже 1.

[Александр]

в коде console.log..... - непосредственно в кэл-беке onreadystatechange

[Александр]

Евгений Петров: https://learn.javascript.ru/xhr-crossdomain

[Александр]

Евгений Петров: вам выше написали рабочую реализацию - и намекнули про последовательность действий - вы делаете send, когда еще не назначен кэлл-бек

[Александр]

Евгений Петров: и mlhttp.send("user=user_user&data=15685418"); это тоже не верно - в статье написано - у вас крос-домен - только асинхронный запрос - а у вас синхронный

[Евгений Петров]

shendel: Зачем вы мне это пишете?) Я — не автор вопроса.

[Евгений Петров]

shendel: И кстати, хоть не мне адресовано, запрос асинхронный, открыт верно и данные отправлены тоже верно. Не вводите в заблуждение автора.

[Александр]

Евгений Петров: да - что-то промазал

[Александр]

LB777: поменяй местами xmlhttp.send("user=user_user&data=15685418"); и
xmlhttp.onreadystatechange ....

[Евгений Петров]

shendel: Вы считаете, что поменять местами принципиально? Вы уверены, что знаете про асинхронный и синхронный код?

[LB777]

shendel: пересоздал вопрос Как в XMLHttpRequest readyState и status получать одновременно? после анализа проблемы