Javascript 如何使用XMLHttpRequest在后台下载HTML页面并从中提取文本元素？

我想制作一个Greasemonkey脚本，当您在URL_1中时，该脚本在后台解析URL_2的整个HTML网页，以便从中提取文本元素

具体来说，我想在后台下载整个页面的HTML代码（一个烂番茄页面），并将其存储在一个变量中，然后使用

getElementsByClassName[0]

从类名为“critic\u consensus”的元素中提取我想要的文本

我在MDN中发现了这一点：因此，我最终得到了一个不幸的非工作代码：

var xhr = new XMLHttpRequest();
xhr.onload = function() {
  alert(this.responseXML.getElementsByClassName(critic_consensus)[0].innerHTML);
}
xhr.open("GET", "http://www.rottentomatoes.com/m/godfather/",true);
xhr.responseType = "document";
xhr.send();

当我在Firefox Scratchpad中运行它时，它会显示此错误消息：

已阻止跨源请求：同一源策略不允许读取 位于的远程资源。 这可以通过将资源移动到同一域或域来解决 启用CORS

---

注：我不使用烂番茄API的原因是。

问题是：XMLHttpRequest无法加载。请求的资源上不存在“Access Control Allow Origin”标头

由于您不是资源的所有者，因此无法设置此标头

您可以做的是在heroku上设置一个代理，该代理将所有请求代理到Rottentomotos网站 下面是一个小的node.js代理

我修改了这个的代码

我在上发布了代理，你可以测试它

这里有一个测试要点

JavaScript阻止您访问属于不同域的内容

---

上面的参考还提供了四种放松此规则的方法（CORS就是其中之一）。

对于跨源请求，获取的站点没有有效地设置允许的、Greasemonkey提供的。（大多数其他userscript引擎也提供此功能。）

GM_xmlhttpRequest

是专门为允许跨来源请求而设计的

要获取目标信息，请在结果上创建一个

DOMParser

。不要使用jQuery方法，因为这将导致加载无关的图像、脚本和对象，减慢速度，或使页面崩溃

下面是一个完整的脚本，演示了该过程：

// ==UserScript==
// @name        _Parse Ajax Response for specific nodes
// @include     http://stackoverflow.com/questions/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant       GM_xmlhttpRequest
// ==/UserScript==

GM_xmlhttpRequest ( {
    method: "GET",
    url:    "http://www.rottentomatoes.com/m/godfather/",
    onload: function (response) {
        var parser  = new DOMParser ();
        /* IMPORTANT!
            1) For Chrome, see
            https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#DOMParser_HTML_extension_for_other_browsers
            for a work-around.

            2) jQuery.parseHTML() and similar are bad because it causes images, etc., to be loaded.
        */
        var doc         = parser.parseFromString (response.responseText, "text/html");
        var criticTxt   = doc.getElementsByClassName ("critic_consensus")[0].textContent;

        $("body").prepend ('<h1>' + criticTxt + '</h1>');
    },
    onerror: function (e) {
        console.error ('**** error ', e);
    },
    onabort: function (e) {
        console.error ('**** abort ', e);
    },
    ontimeout: function (e) {
        console.error ('**** timeout ', e);
    }
} );

/==UserScript==
//@name\u解析特定节点的Ajax响应
//@包括http://stackoverflow.com/questions/*
//@需要http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
//@grant GM_xmlhttpRequest
//==/UserScript==
GMxmlHttpRequest（{
方法：“获取”，
url:“http://www.rottentomatoes.com/m/godfather/",
onload：函数（响应）{
var parser=newdomparser（）；
/*重要！
1） 有关Chrome，请参见
https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#DOMParser_HTML_extension_for_other_browsers
为了一个工作环境。
2） parseHTML（）和类似的东西是不好的，因为它会导致图像等被加载。
*/
var doc=parser.parseFromString（response.responseText，“text/html”）；
var criticTxt=doc.getElementsByClassName（“评论家共识”）[0]；
$（“正文”）。前缀（“”+criticTxt+“”）；
},
onerror:函数（e）{
console.error（'**error'，e）；
},
onabort:函数（e）{
console.error（'**abort'，e）；
},
ontimeout：函数（e）{
console.error（“****超时”，e）；
}
} );

什么不起作用？你得到了什么错误？Firefox的草稿行中没有错误消息。在看到Igor Barinov的回复后，我检查了Firefox Web控制台，在那里出现了他提到的错误消息。我在我的问题中添加了错误信息。我用新的想法编辑了我的答案，试试看！感谢您的帮助，但我不想使用代理，原因有很多：不可避免的页面加载速度变慢，永久性地需要代理，等等。

var xhr = new XMLHttpRequest();
xhr.onload = function() {
  alert(this.responseXML.getElementsByClassName(critic_consensus)[0]);
}
xhr.open("GET", "http://peaceful-cove-8072.herokuapp.com/m/godfather",true);
xhr.responseType = "document";
xhr.send();

// ==UserScript==
// @name        _Parse Ajax Response for specific nodes
// @include     http://stackoverflow.com/questions/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant       GM_xmlhttpRequest
// ==/UserScript==

GM_xmlhttpRequest ( {
    method: "GET",
    url:    "http://www.rottentomatoes.com/m/godfather/",
    onload: function (response) {
        var parser  = new DOMParser ();
        /* IMPORTANT!
            1) For Chrome, see
            https://developer.mozilla.org/en-US/docs/Web/API/DOMParser#DOMParser_HTML_extension_for_other_browsers
            for a work-around.

            2) jQuery.parseHTML() and similar are bad because it causes images, etc., to be loaded.
        */
        var doc         = parser.parseFromString (response.responseText, "text/html");
        var criticTxt   = doc.getElementsByClassName ("critic_consensus")[0].textContent;

        $("body").prepend ('<h1>' + criticTxt + '</h1>');
    },
    onerror: function (e) {
        console.error ('**** error ', e);
    },
    onabort: function (e) {
        console.error ('**** abort ', e);
    },
    ontimeout: function (e) {
        console.error ('**** timeout ', e);
    }
} );