xhr.onload
时间: 2023-12-19 18:31:49 浏览: 349
xhr.onload是XMLHttpRequest对象的一个事件,当请求成功完成时触发。在这个事件中,可以通过xhr.responseText属性获取服务器返回的数据。下面是一个示例代码:
```javascript
let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data');
xhr.onload = function() {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.log('Request failed. Returned status of ' + xhr.status);
}
};
xhr.send();
```
这个代码会向http://example.com/api/data发送一个GET请求,当请求成功完成时,会在控制台输出服务器返回的数据。如果请求失败,则会输出错误信息。
相关问题
xhr.onload, xhr.onerror 以及xhr.onreadystatechange的区别
`xhr.onload` 和 `xhr.onerror` 是 `XMLHttpRequest` 对象的两个事件处理程序,分别在 Ajax 请求成功和失败时触发。
- `xhr.onload`:当 Ajax 请求成功时触发,即 `XMLHttpRequest` 对象的 `readyState` 属性值为 4,而且 `status` 属性值在 200 到 299 之间。
- `xhr.onerror`:当 Ajax 请求失败时触发,即 `XMLHttpRequest` 对象的 `readyState` 属性值为 4,但 `status` 属性值不在 200 到 299 之间。
`xhr.onreadystatechange` 是 `XMLHttpRequest` 对象的另一个事件处理程序,它在 Ajax 请求状态改变时触发,即 `XMLHttpRequest` 对象的 `readyState` 属性值发生变化时(从 0 到 4 ),每次状态变化都会触发一次该事件。
通常,我们在 `xhr.onreadystatechange` 事件处理程序中判断 `readyState` 和 `status` 属性值来确定 Ajax 请求是否成功。但是,由于 `xhr.onreadystatechange` 事件会触发多次,因此我们需要在事件处理程序中使用条件语句来判断 Ajax 请求的状态,而 `xhr.onload` 和 `xhr.onerror` 事件只会触发一次,因此使用它们更加方便。
将下面的代码改为多个文件上传的形式:var xhr = new XMLHttpRequest(); var formData = new FormData(); // 添加文件参数 var fileInput = document.getElementById('fileInput'); formData.append('file', fileInput.files[0]); // 添加普通文本参数 formData.append('name', 'John'); xhr.open('POST', '/upload'); xhr.setRequestHeader('Content-Type', 'multipart/form-data'); xhr.onload = function() { if (xhr.status === 200) { console.log('上传成功'); } else { console.log('上传失败'); } }; xhr.send(formData);
好的,我可以帮您进行这个操作。首先,我们需要将 HTML 和 JavaScript 分别保存在两个文件中。
在 HTML 文件中,我们需要添加一个表单元素,用于让用户选择需要上传的文件。我们可以使用 `<input>` 元素,并设置 `type` 属性为 `"file"`,如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="fileInput" name="file">
<input type="text" id="nameInput" name="name" value="John">
<button type="button" onclick="submitForm()">提交</button>
</form>
<script src="upload.js"></script>
</body>
</html>
```
在 JavaScript 文件中,我们需要编写上传文件的逻辑。我们可以创建一个函数 `submitForm`,该函数会获取表单元素并将其数据打包成一个 `FormData` 对象,然后使用 `XMLHttpRequest` 对象发送 POST 请求,如下所示:
```javascript
function submitForm() {
var xhr = new XMLHttpRequest();
var formData = new FormData();
// 添加文件参数
var fileInput = document.getElementById('fileInput');
formData.append('file', fileInput.files[0]);
// 添加普通文本参数
var nameInput = document.getElementById('nameInput');
formData.append('name', nameInput.value);
xhr.open('POST', '/upload');
xhr.onload = function() {
if (xhr.status === 200) {
console.log('上传成功');
} else {
console.log('上传失败');
}
};
xhr.send(formData);
}
```
最后,我们需要在 HTML 文件中引入 JavaScript 文件,如下所示:
```html
<script src="upload.js"></script>
```
完成以上操作后,我们就可以将 HTML 和 JavaScript 分别保存在两个文件中,并实现多个文件上传的功能。