在此页

• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

progress event is fired periodically when a request receives more data.

冒泡	No
可取消	No
接口	ProgressEvent
事件处理程序特性	onprogress

范例

实时范例

HTML

<div class="controls">
    <input class="xhr success" type="button" name="xhr" value="Click to start XHR (success)" />
    <input class="xhr error" type="button" name="xhr" value="Click to start XHR (error)" />
    <input class="xhr abort" type="button" name="xhr" value="Click to start XHR (abort)" />
</div>
<textarea readonly class="event-log"></textarea>
					

CSS

.event-log {
    width: 25rem;
    height: 4rem;
    border: 1px solid black;
    margin: .5rem;
    padding: .2rem;
}
input {
    width: 11rem;
    margin: .5rem;
}
					

JS

const xhrButtonSuccess = document.querySelector('.xhr.success');
const xhrButtonError = document.querySelector('.xhr.error');
const xhrButtonAbort = document.querySelector('.xhr.abort');
const log = document.querySelector('.event-log');
function handleEvent(e) {
    log.textContent = log.textContent + `${e.type}: ${e.loaded} bytes transferred\n`;
}
function addListeners(xhr) {
    xhr.addEventListener('loadstart', handleEvent);
    xhr.addEventListener('load', handleEvent);
    xhr.addEventListener('loadend', handleEvent);
    xhr.addEventListener('progress', handleEvent);
    xhr.addEventListener('error', handleEvent);
    xhr.addEventListener('abort', handleEvent);
}
function runXHR(url) {
    log.textContent = '';
    const xhr = new XMLHttpRequest();
    addListeners(xhr);
    xhr.open("GET", url);
    xhr.send();
    return xhr;
}
xhrButtonSuccess.addEventListener('click', () => {
    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg');
});
xhrButtonError.addEventListener('click', () => {
    runXHR('https://somewhere.org/i-dont-exist');
});
xhrButtonAbort.addEventListener('click', () => {
    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg').abort();
});
					

结果

规范

规范	状态	注释
XMLHttpRequest	实时标准

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
progress event	Chrome Yes	Edge ≤79	Firefox Yes	IE 10	Opera Yes	Safari Yes	WebView Android Yes	Chrome Android Yes	Firefox Android Yes	Opera Android Yes	Safari iOS ?	Samsung Internet Android Yes

图例

完整支持

完整支持

兼容性未知 ?

兼容性未知

另请参阅

• 相关事件： loadstart , load , loadend , error , abort
• 监控进度

元数据

• 最后修改： Mar 18, 2019

相关话题

1. XMLHttpRequest
2. 构造函数

   1. XMLHttpRequest()
3. 特性

   1. channel
   2. mozAnon
   3. mozBackgroundRequest
   4. mozResponseArrayBuffer
   5. mozSystem
   6. multipart
   7. onreadystatechange
   8. readyState
   9. response
   10. responseText
   11. responseType
   12. responseURL
   13. responseXML
   14. status
   15. statusText
   16. timeout
   17. upload
   18. withCredentials
4. 方法

   1. abort()
   2. getAllResponseHeaders()
   3. getResponseHeader()
   4. open()
   5. openRequest()
   6. overrideMimeType()
   7. send()
   8. sendAsBinary()
   9. setRequestHeader()
5. 事件

   1. onreadystatechange
   2. abort
   3. error
   4. load
   5. loadend
   6. loadstart
   7. progress
   8. timeout
6. 继承：

   1. XMLHttpRequestEventTarget
   2. EventTarget