我想知道如何使用XMLHttpRequest加载远程URL的内容,并将访问的站点的HTML存储在JS变量中。
比方说,如果我想加载和提醒()http://foo.com/bar.php的HTML,我该怎么做呢?
我想知道如何使用XMLHttpRequest加载远程URL的内容,并将访问的站点的HTML存储在JS变量中。
比方说,如果我想加载和提醒()http://foo.com/bar.php的HTML,我该怎么做呢?
可以通过XMLHttpRequest获取。XMLHttpRequest中的responseText。onreadystatechange当XMLHttpRequest。readyState等于XMLHttpRequest.DONE。
下面是一个示例(与IE6/7不兼容)。
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
alert(xhr.responseText);
}
}
xhr.open('GET', 'http://example.com', true);
xhr.send(null);
为了更好的跨浏览器兼容性,不仅是IE6/7,还为了弥补一些浏览器特定的内存泄漏或错误,以及为了减少触发ajax请求的冗长,您可以使用jQuery。
$.get('http://example.com', function(responseText) {
alert(responseText);
});
注意,如果不是在本地主机上运行,则必须考虑JavaScript的同源策略。您可能需要考虑在您的域中创建一个代理脚本。
在XMLHttpRequest中,使用XMLHttpRequest。responseText可能引发异常,如下所示
Failed to read the \'responseText\' property from \'XMLHttpRequest\':
The value is only accessible if the object\'s \'responseType\' is \'\'
or \'text\' (was \'arraybuffer\')
访问XHR响应的最佳方法如下
function readBody(xhr) {
var data;
if (!xhr.responseType || xhr.responseType === "text") {
data = xhr.responseText;
} else if (xhr.responseType === "document") {
data = xhr.responseXML;
} else {
data = xhr.response;
}
return data;
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
console.log(readBody(xhr));
}
}
xhr.open('GET', 'http://www.google.com', true);
xhr.send(null);
使用取回!
它可读性更强,也更容易定制。所有现代浏览器和Node都支持它。下面是一个更深入的教程
const url = "https://stackoverflow.com";
fetch(url)
.then(
response => response.text() // .json(), .blob(), etc.
).then(
text => console.log(text) // Handle here
);
根据请求的需要/类型,您可以选择传递第二个参数。
// Example request options
fetch(url, {
method: 'post', // Default is 'get'
body: JSON.stringify(dataToPost),
mode: 'cors',
headers: new Headers({
'Content-Type': 'application/json'
})
})
.then(response => response.json())
.then(json => console.log('Response', json))
在Node.js中,你需要使用以下方法导入fetch:
const fetch = require("node-fetch");
如果你想同步使用它(不工作在顶级范围):
const json = await fetch(url)
.then(response => response.json())
.catch((e) => {});
更多信息:
马特·沃尔什教程
Mozilla的文档
我可以用
使用纯JavaScript使用XMLHttpRequest的简单方法。您可以设置自定义头,但它是可选的使用基于需求。
1. 使用POST方法:
window.onload = function(){
var request = new XMLHttpRequest();
var params = "UID=CORS&name=CORS";
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
};
request.open('POST', 'https://www.example.com/api/createUser', true);
request.setRequestHeader('api-key', 'your-api-key');
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(params);
}
你可以使用POST方法发送参数。
2. 使用GET方法:
请运行下面的示例,并将得到JSON响应。
窗口。Onload = function(){ var request = new XMLHttpRequest(); 请求。Onreadystatechange = function() { 如果这一点。readyState == 4 && this。状态== 200){ console.log (this.responseText); } }; 请求。打开(‘得到’,' https://jsonplaceholder.typicode.com/users/1 '); request.send (); }