Напиши HTML-страницу query.html состоящую из фотографии и кнопки для отправки запроса. В качестве результата создай конечный файл response.html с таким же контентом, но вместо кнопки размест

Вопрос пользователя:

Напиши HTML-страницу query.html состоящую из фотографии и кнопки для отправки запроса. В качестве результата создай конечный файл response.html с таким же контентом, но вместо кнопки размести загруженные данные (из файла txt). На основе query.html создай HTML-страницу sync.html со скриптами, реализующими синхронную загрузку контента из файла txt (механизм Ajax). На основе sync.html создай HTML-страницу async.html со скриптами, реализующими асинхронную загрузку контента из файла txt (механизм Ajax). Скрипт должен работать в любых браузерах, быть надёжным и гибким, используя переменные и параметры функции (используй функцию-обёртку).

Ответ нейросети:

query.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Query Page</title>
</head>
<body>
<img src="photo.jpg" alt="Photo">
<button onclick="sendRequest()">Send Request</button>

<script>
function sendRequest() {
  // Send request code here
}
</script>
</body>
</html>

response.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Response Page</title>
</head>
<body>
<img src="photo.jpg" alt="Photo">
<p>Response data from txt file here</p>
</body>
</html>

sync.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sync Page</title>
</head>
<body>
<img src="photo.jpg" alt="Photo">
<button onclick="loadDataSync()">Load Data Sync</button>

<script>
function loadDataSync() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.txt', false);
  xhr.send();

  if (xhr.status === 200) {
    var response = xhr.responseText;
    // Display response data
  } else {
    // Handle error
  }
}
</script>
</body>
</html>

async.html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Async Page</title>
</head>
<body>
<img src="photo.jpg" alt="Photo">
<button onclick="loadDataAsync()">Load Data Async</button>

<script>
function loadDataAsync() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.txt', true);

  xhr.onload = function() {
    if (xhr.status === 200) {
      var response = xhr.responseText;
      // Display response data
    } else {
      // Handle error
    }
  };

  xhr.send();
}
</script>
</body>
</html>

Напишите нам, если в вопросе есть ваши персональные данные ([email protected])

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Query Page</title>
</head>
<body>
<img src="photo.jpg" alt="Photo">
<button onclick="sendRequest()">Send Request</button>

<script>
function sendRequest() {
  // Send request code here
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Response Page</title>
</head>
<body>
<img src="photo.jpg" alt="Photo">
<p>Response data from txt file here</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sync Page</title>
</head>
<body>
<img src="photo.jpg" alt="Photo">
<button onclick="loadDataSync()">Load Data Sync</button>

<script>
function loadDataSync() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.txt', false);
  xhr.send();

  if (xhr.status === 200) {
    var response = xhr.responseText;
    // Display response data
  } else {
    // Handle error
  }
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Async Page</title>
</head>
<body>
<img src="photo.jpg" alt="Photo">
<button onclick="loadDataAsync()">Load Data Async</button>

<script>
function loadDataAsync() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'data.txt', true);

  xhr.onload = function() {
    if (xhr.status === 200) {
      var response = xhr.responseText;
      // Display response data
    } else {
      // Handle error
    }
  };

  xhr.send();
}
</script>
</body>
</html>

Последние вопросы: