我想知道如何使用XMLHttpRequest加载远程URL的内容，并将所访问站点的HTML存储在JS变量中。

如果我要加载并发出警报（ ）http://foo.com/bar.php的HTML，我该怎么做？

评论

XMLHttpRequest中缺少什么的可能重复项？
如果您愿意使用JS库，jQuery会使用.load（）方法简化此过程：api.jquery.com/load
谢谢上帝，终于有一个谷歌的结果不解决jQuery：|

#1 楼

当XMLHttpRequest.responseText等于XMLHttpRequest.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兼容，而且还可以解决某些浏览器特定的内存泄漏或错误，并且为了降低触发Ajaxical请求的冗长程度，可以使用jQuery。

$.get('http://example.com', function(responseText) {
    alert(responseText);
});


请注意，当不在本地主机上运行时，必须考虑JavaScript的同源策略。您可能需要考虑在您的域中创建代理脚本。

评论

我们如何制作该代理？

–克里斯-小
17 Mar 22 '17 at 13:27

#2 楼

我建议调查fetch。它等效于ES5，并使用Promises。它更具可读性且易于自定义。




 const url = "https://stackoverflow.com";
fetch(url)
    .then(
        response => response.text() // .json(), etc.
        // same as function(response) {return response.text();}
    ).then(
        html => console.log(html)
    );





在Node.js中，您需要使用以下命令导入fetch：

const fetch = require("node-fetch");


如果要同步使用（不适用于顶级范围）：

const json = await fetch(url)
  .then(response => response.json())
  .catch((e) => {});


更多信息：

Mozilla文档

我可以吗？使用（2019年10月94％）

Matt Walsh教程

#3 楼

使用XMLHttpRequest和pure JavaScript的简单方法。您可以设置custom header，但根据需要它是可选的。

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响应。




 window.onload = function(){
    var request = new XMLHttpRequest();

    request.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
        }
    };

    request.open('GET', 'https://jsonplaceholder.typicode.com/users/1');
    request.send();
}




评论

对我来说很好。

– Mayur S
18年7月26日在5:09
好的例子。工作正常。

–user10150997
18年7月29日在11:21

#4 楼

在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访问响应的最佳方法如下： >