如何获得XMLHttpRequest的响应?


187

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

说,如果我想加载和Alert()http://foo.com/bar.php的HTML,我该怎么做?



2
如果您愿意使用JS库,jQuery会使用.load
scunliffe 2010年

19
谢谢上帝,最后一个没有解决jQuery的google结果:|
Sam Vloeberghs 2014年

Answers:


277

您可以XMLHttpRequest.responseText在等于XMLHttpRequest.onreadystatechange时得到它。XMLHttpRequest.readyStateXMLHttpRequest.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“同源”策略。您可能需要考虑在您的域中创建代理脚本。


我们如何制作该代理?
克里斯

像魅力一样工作:)
Anurag

29

我建议您调查一下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教程


26

最简单的方法使用XMLHttpRequestpure 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

好的例子。工作正常。

16

在中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);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.