Блог

Главная - Вопросы по программированию - Есть ли что-то неправильное в моем использовании AJAX здесь?

Есть ли что-то неправильное в моем использовании AJAX здесь?

#html #ajax #request

Вопрос:

Я пытаюсь протестировать простой ajax (без использования jquery), чтобы при нажатии кнопки отображался текст текстового файла под названием «Костяшки пальцев Theme.txt». Я знаю, что все мои файлы находятся в нужном месте, потому что я также добавил ссылку на текстовый файл на своей html-странице, и когда я запускаю html в браузере, ссылка ведет меня к текстовому файлу, как и должно быть. Однако, когда я нажимаю на кнопку, которая должна использовать ajax, ничего не происходит. В частности, состояние готовности моего запроса будет равно 4, но статус всегда отображается как 0. Почему? Я что-то здесь делаю не так?

Вот мой HTML-код:

 <!DOCTYPE html>
<html>
<body>
<input type="button" onclick="show()" value="show">
<br>
<br>
<label id="song"></label>
<label id="error"></label>
<br>
<a href="./ajaxFolder/Knuckles Theme.txt" alt="Nope">Knock Knock It's Knuckles!</a>

<script>
function show() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if(this.readyState == 4 amp;amp; this.status == 200) {
      document.getElementById("song").innerHTML = this.responseText;
    } else {
      document.getElementById("error").innerHTML = this.readyState   " "   this.status;
    }   
  };
  xhttp.open("GET", "./ajaxFolder/Knuckles Theme.txt", true);
  xhttp.send();
}
</script>
</body>

</html>

Комментарии:

1. Состояние 0 указывает на ошибку сети или системы безопасности. В консоли инструментов разработчика должно быть больше информации.

2. <label> Элемент содержит метку для элемента управления формой , такого как an <input> , он не является универсальным элементом для назначения произвольных данных.

3. alt Атрибут содержит текст для представления, если изображение не может быть отображено. Ставить его на <a> элемент — это нонсенс.

4. <br> не предполагается использовать в качестве замены CSS-полей или отступов.

5. Попробуйте использовать Knuckles Theme или Knuckles Theme вместо пробела. Некоторые серверы чувствительны к этому.

Ответ №1:

Если целевой URL существует, то он будет работать, как вы можете видеть ниже:

 function show() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
document.getElementById("error").innerHTML  = this.readyState   " "   this.status "<br>";
if(this.readyState == 4 amp;amp; this.status == 200) {
  document.getElementById("song").innerHTML = this.responseText;
}
  };
  xhttp.open("GET", "https://jsonplaceholder.typicode.com/users/1", true);
  xhttp.send();
} 
 <input type="button" onclick="show()" value="show">
<br>
<br>
<label id="song"></label>
<hr>Ajax log:<br>
<label id="error"></label>
<br>
<a href="./ajaxFolder/Knuckles Theme.txt">Knock Knock It's Knuckles!</a>

Я заменил ваш URL-адрес общедоступным, и он работает.

Метки: