使用 pure javascript 从外部网站获取信息

Question

我找到了一个简单的 jQuery 片段，它可以从外部网站提取信息。但是，我正在努力将其转换为纯粹基于 JavaScript 的运行。我认为我走在正确的道路上，但我不确定如何过滤提取的信息并仅显示 h1 标签内的文本。如果有人可以提供帮助或提示我下一步该怎么做，我将不胜感激。提前致谢！

这是功能齐全的 jQuery 代码：

$.ajax({
    url:'https://enable-cors.org',
        type:'GET',
        success: function(data){
           $('#content').html($(data).find('h1').html());        
        }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content"></div>

这是我目前的JavaScript：

let request = new XMLHttpRequest();
request.open("GET", "https://enable-cors.org", true);
request.onload = () => {console.log(request.responseText)}
request.send();

Answer 1

你需要

(1) 将响应转换为可以导航的文档，这样您就可以到达 <h1>

(2) 用找到的内容填充 #content <h1>

let request = new XMLHttpRequest();
request.open("GET", "https://enable-cors.org", true);
request.onload = () => {
  const doc = new DOMParser().parseFromString(request.responseText, 'text/html');
  document.querySelector('#content').innerHTML = doc.querySelector('h1').innerHTML;
}
request.send();

<div id="content"></div>

使用 pure javascript 从外部网站获取信息

Get information from external website using pure javascript

html

javascript

jquery

xmlhttprequest