| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/zh-TW/docs/Web/API/XMLHttpRequest_API/Using_XMLHttpRequest | [Back] [Original] |
Get to know MDN better
This feature is well established and works across many devices and browser versions. Its been available across browsers since 20157.
* Some parts of this feature may have varying levels of support.
XMLHttpRequest
HTTP
XMLHttpRequest XMLHttpRequest HTTP
function reqListener() {
console.log(this.responseText);
}
const req = new XMLHttpRequest();
req.addEventListener("load", reqListener);
req.open("GET", "http://www.example.org/example.txt");
req.send();
XMLHttpRequest XMLHttpRequest.open() async true XMLHttpRequest Web Worker
XMLHttpRequest XML **XML** XML
XMLHttpRequest() XMLHttpRequest
XMLHttpRequest XML responseXML XML DOM XML
XMLSerializer DOM RegExp RegExp XML XMLHttpRequest responseXML HTML XMLHttpRequest HTML
XMLHttpRequest HTML responseText HTML HTML
XMLHttpRequest.responseXML XMLHttpRequest HTML fragment.body.innerHTML DOMresponseText RegExp RegExp HTML XMLHttpRequest XMLHttpRequest XMLHttpRequest overrideMimeType()
const req = new XMLHttpRequest();
req.open("GET", url);
//
req.overrideMimeType("text/plain; charset=x-user-defined");
/* */
"arraybuffer" responseType ArrayBuffer
const req = new XMLHttpRequest();
req.onload = (e) => {
const arraybuffer = req.response; // responseText
/* */
};
req.open("GET", url);
req.responseType = "arraybuffer";
req.send();
XMLHttpRequest
XMLHttpRequest DOM progress ProgressEvent
const req = new XMLHttpRequest();
req.addEventListener("progress", updateProgress);
req.addEventListener("load", transferComplete);
req.addEventListener("error", transferFailed);
req.addEventListener("abort", transferCanceled);
req.open();
//
//
function updateProgress(event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
//
} else {
//
}
}
function transferComplete(evt) {
console.log("");
}
function transferFailed(evt) {
console.log("");
}
function transferCanceled(evt) {
console.log("");
}
XMLHttpRequest
open() progress
updateProgress() total loaded lengthComputable false
XMLHttpRequest XMLHttpRequest.upload
const req = new XMLHttpRequest();
req.upload.addEventListener("progress", updateProgress);
req.upload.addEventListener("load", transferComplete);
req.upload.addEventListener("error", transferFailed);
req.upload.addEventListener("abort", transferCanceled);
req.open();
file:
load progress
loadend abortload error
req.addEventListener("loadend", loadEnd);
function loadEnd(e) {
console.log("");
}
loadend
function getHeaderTime() {
console.log(this.getResponseHeader("Last-Modified")); // GMTString null
}
const req = new XMLHttpRequest();
req.open(
"HEAD", // HEAD
"your-page.html",
);
req.onload = getHeaderTime;
req.send();
function getHeaderTime() {
const lastVisit = parseFloat(
window.localStorage.getItem(`lm_${this.filepath}`),
);
const lastModified = Date.parse(this.getResponseHeader("Last-Modified"));
if (isNaN(lastVisit) || lastModified > lastVisit) {
window.localStorage.setItem(`lm_${this.filepath}`, Date.now());
isFinite(lastVisit) && this.callback(lastModified, lastVisit);
}
}
function ifHasChanged(URL, callback) {
const req = new XMLHttpRequest();
req.open("HEAD" /* HEAD - */, URL);
req.callback = callback;
req.filepath = URL;
req.onload = getHeaderTime;
req.send();
}
// "your-page.html"
ifHasChanged("your-page.html", function (modified, visit) {
console.log(
` '${this.filepath}' ${new Date(
modified,
).toLocaleString()} `,
);
});
CORS Web XMLHttpRequest INVALID_ACCESS_ERR
URL ?&
http://example.com/bar.html -> http://example.com/bar.html?12345 http://example.com/bar.html?foobar=baz -> http://example.com/bar.html?foobar=baz&12345
URL
URL
const req = new XMLHttpRequest();
req.open("GET", url + (/\?/.test(url) ? "&" : "?") + new Date().getTime());
req.send(null);
XMLHttpRequest Access-Control-Allow-Origin HTTP
XMLHttpRequest status=0 statusText=null UNSENT XMLHttpRequest open() XMLHttpRequest XMLHttpRequest XMLHttpRequest onunload open() DOMActivate unload
| Specification |
|---|
| XMLHttpRequest # interface-xmlhttprequest |
This page was last modified on 202572 by MDN contributors.
Your blueprint for a better internet.
Portions of this content are 19982026 by individual mozilla.org contributors. Content available under a Creative Commons license.
| Web Proxy Viewer | New URL | Original Page |