XMLHttpRequest (XHR) is a built-in JavaScript object that is used to make HTTP requests to a server. When a request is made using XHR, it returns an object that has a property called onload. This property is used to define a function that is called when the request has completed successfully. In this example, we will demonstrate how to use XHR's onload event to retrieve data from a server and display it on a web page.
To start, we will create a simple HTML file with a button that triggers the XHR request. When the button is clicked, it will call a function that sends a GET request to a server using XHR. We will then define the onload function to retrieve the data from the server and display it on the web page. Here is the code for the HTML file:
<!DOCTYPE html>
<html>
<head>
<title>XMLHttpRequest onload Example</title>
</head>
<body>
<button onclick="loadData()">Load Data</button>
<div id="output"></div>
<script>
function loadData() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
xhr.onload = function() {
if (xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
document.getElementById('output').innerHTML = `
<h2>${data.title}</h2>
<p>${data.body}</p>
`;
}
};
xhr.send();
}
</script>
</body>
</html>
In this code, we first define a button with the onclick attribute set to the loadData() function. When the button is clicked, the function is called, and an XHR request is made to the specified URL. The xhr.onload property is set to a function that retrieves the data from the server and displays it on the web page. We check that the response status is 200, indicating a successful request, and parse the response text into a JavaScript object using JSON.parse(). We then set the innerHTML property of the output div to display the data on the web page.
In another example, we will demonstrate how to use XHR's onload event to upload a file to a server. In this case, we will create a simple HTML file with a file input and a button that triggers the XHR request. When the button is clicked, it will call a function that sends a POST request to a server using XHR. We will then define the onload function to display a message when the file has been successfully uploaded. Here is the code for the HTML file:
<!DOCTYPE html>
<html>
<head>
<title>XMLHttpRequest onload Example</title>
</head>
<body>
<input type="file" id="fileInput">
<button onclick="uploadFile()">Upload File</button>
<script>
function uploadFile() {
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.onload = function() {
if (xhr.status === 200) {
alert('File uploaded successfully.');
}
};
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
xhr.send(formData);
}
</script>
</body>
</html>
In this code, we define a file input and a button with the onclick attribute set to the uploadFile() function. When the button is clicked, the function is called, and an XHR request is made to the specified URL.
