Javascript HTTP-запрос

Question

У меня есть эта функция, и когда я запускаю ее в консоли, она дает мне неопределенное значение:

function myRequest(url) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200 && xhr.contentType == "json") {
            console.log("Type", xhr.getResponseHeader("Content-Type"));
            console.log("Text", xhr.responseText);
        } else {
            console.log("This is not a Json file");
        }
    };


    xhr.send();
}

URL-адрес, с которого я пытаюсь получить данные: https://hotell.difi.no/api/json/bergen/dokart?

Мне действительно нужна помощь, чтобы понять, почему это не работает, большое спасибо.

Answer 1

Установите ожидаемый responseType после метода open. xhr.responseType = 'json';

Во-вторых, вы должны изменить свои условия так, чтобы он проверял состояние ReadyState === 4 / * Закончено * /, а затем установить статус 200 или else. Это из-за того, что условие else будет срабатывать на readyState 2, 3 (или что нет).

Попробуйте это:

function myRequest(url) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = 'json';
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if ( xhr.status === 200 ) {
                console.log("Type", xhr.getResponseHeader("Content-Type"));
                console.log("Text", xhr.response);
            } else {
                console.log("This is not a Json file");
            }
        }
    };
    xhr.send();
}

Answer 2

Я не вижу вашей проблемы, но:

Вы можете сделать это так

function myRequest() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      console.log(this.responseText);
    }
  };
  xhttp.open("GET", 'https://hotell.difi.no/api/json/bergen/dokart');
  xhttp.send();
}

Читайте о http запросах здесь: https://www.w3schools.com/xml/xml_http.asp

Или вы можете сделать это просто так:

fetch('https://hotell.difi.no/api/json/bergen/dokart') 
.then((res) => {
   console.log(res.json());
})

Answer 3

Вы не используете правильный способ получения заголовка ответа в состоянии if, используйте xhr.getResponseHeader, чтобы получить заголовок ответа. Итак, взгляните на приведенный ниже код: он работает.

function myRequest(url) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onreadystatechange = function() {
        var contentType = xhr.getResponseHeader("Content-Type") || "";
        if (xhr.readyState === 4 && xhr.status === 200 && contentType.indexOf("json") > -1) {
            console.log("Type", contentType);
            console.log("Text", xhr.responseText);
        } else {
            console.log("This is not a Json file");
        }
    };


    xhr.send();
}

Answer 4

function myRequest() {
    var url = 'https://hotell.difi.no/api/json/bergen/dokart';
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onreadystatechange = function () {
        
        if (xhr.readyState === 4 && xhr.status === 200) {
        var contentType = this.getResponseHeader('content-type');
          if (contentType.includes('application/json')) {
            console.log("Text", xhr.responseText);
            console.log("json", JSON.parse(xhr.responseText));
          } else {
          	console.log("This is not a Json file", xhr);
          }
            
        }
    };
    xhr.send();
}

myRequest();

Answer 5

XmlHttpRequest не имеет свойства contentType, поэтому ваш код не будет работать должным образом. Замените проверку типа содержимого в предложении if для xhr.getResponseHeader('content-type'), как показано ниже:

function myRequest(url) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200 && xhr.getResponseHeader('content-type') == "application/json") {
            console.log("Type", xhr.getResponseHeader("Content-Type"));
            console.log("Text", xhr.responseText);
        } else {
            console.log("This is not a Json file");
        }
    };
    xhr.send();
}

Проверьте изображение ниже. Вы заметите, что во время тестирования в консоли каждый оператор регистрирует результат этого оператора, поэтому в консоли вы увидите некоторое «неопределенное», и это нормально. Убедитесь, что при запуске функции для json API я получу два «Это не json», потому что onreadystatechanged вызывается несколько раз, по одному для каждого xhr.readyState. Затем, когда xhr.readyState наконец достигает 4, консоль записывает «Type» и «Text» так, как вам нужно.