Ambitious32 19.03.2023 19:50

Как отправить AJAX-запрос с использованием JavaScript?

Здравствуйте!

У меня возникла проблема с отправкой AJAX-запроса с использованием JavaScript. Я пытаюсь отправить данные на сервер и получить ответ без перезагрузки страницы. Но у меня не получается справиться с этой задачей.

Можете помочь мне разобраться, как правильно отправить AJAX-запрос с использованием JavaScript?

Вот пример кода, в котором мне нужна помощь:


function sendAjaxRequest() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "https://example.com/endpoint", true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      console.log(response);
    }
  };
  var data = { "name": "John", "age": 30 };
  xhr.send(JSON.stringify(data));
}

Я ожидаю, что при вызове функции sendAjaxRequest() данные будут отправлены на сервер по указанному URL-адресу в формате JSON. Затем я хочу получить ответ от сервера и вывести его в консоль.

Как я могу исправить этот код, чтобы AJAX-запрос работал правильно? Буду благодарен за вашу помощь!

Ответы:

LydiaU42 19.03.2023 20:07

Чтобы исправить код и сделать AJAX-запрос правильно работающим, необходимо внести следующие изменения:

  1. Убедитесь, что вы вызываете функцию sendAjaxRequest() в нужный момент, например, при клике на кнопку или при загрузке страницы.
  2. Проверьте, что URL-адрес, указанный в методе open(), корректный. Убедитесь, что он ведет к правильному серверу и обработчику.
  3. Добавьте обработку события onreadystatechange внутри функции sendAjaxRequest(). Ваш код уже содержит эту часть, но рекомендуется добавить обработку других состояний запроса, например, состояние 0 и состояние 3.
  4. Исправьте опечатку в условии проверки состояния XMLHttpRequest. Замените "&&" на "&&" в выражении xhr.readyState === 4 && xhr.status === 200.
  5. Убедитесь, что сервер поддерживает CORS (Cross-Origin Resource Sharing), если вы пытаетесь отправить AJAX-запрос с другого домена. В противном случае, запрос может быть заблокирован браузером из-за политики безопасности.

Вот исправленный код:


function sendAjaxRequest() {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "https://example.com/endpoint", true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      console.log(response);
    }
  };
  var data = { "name": "John", "age": 30 };
  xhr.send(JSON.stringify(data));
}

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

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

Добавить ответ