network.html•2.41 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Network Test Page</title>
</head>
<body>
<h1>Network Test Page</h1>
<p>This page makes various network requests.</p>
<button id="fetchGet" data-testid="fetch-get">Fetch GET</button>
<button id="fetchPost" data-testid="fetch-post">Fetch POST</button>
<button id="xhr" data-testid="xhr-request">XHR Request</button>
<div id="networkResult"></div>
<script>
const resultDiv = document.getElementById('networkResult');
document.getElementById('fetchGet').addEventListener('click', async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const data = await response.json();
resultDiv.textContent = 'GET success: ' + data.title;
} catch (error) {
resultDiv.textContent = 'GET error: ' + error.message;
}
});
document.getElementById('fetchPost').addEventListener('click', async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
title: 'Test Post',
body: 'This is a test',
userId: 1
})
});
const data = await response.json();
resultDiv.textContent = 'POST success: ' + data.id;
} catch (error) {
resultDiv.textContent = 'POST error: ' + error.message;
}
});
document.getElementById('xhr').addEventListener('click', () => {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/1');
xhr.onload = function() {
const data = JSON.parse(xhr.responseText);
resultDiv.textContent = 'XHR success: ' + data.name;
};
xhr.onerror = function() {
resultDiv.textContent = 'XHR error';
};
xhr.send();
});
</script>
</body>
</html>