js获取html js获取html源码

使用JavaScript获取HTML内容

在现代的Web开发中，我们经常需要从服务器获取HTML内容，然后对其进行解析和操作，这通常涉及到发送HTTP请求、接收响应、处理响应数据等步骤，在JavaScript中，我们可以使用各种方法来实现这些功能，其中最常用的是使用XMLHttpRequest对象或者更现代的fetch API。

使用XMLHttpRequest

XMLHttpRequest是一个旧的API，用于在浏览器和服务器之间进行异步通信，以下是一个简单的示例，展示了如何使用XMLHttpRequest获取HTML内容：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var html = xhr.responseText;
        console.log(html);
    }
};
xhr.send();

在这个示例中，我们首先创建了一个新的XMLHttpRequest对象，然后使用open方法初始化一个GET请求。onreadystatechange事件处理器会在请求的状态发生变化时被调用，当请求完成（readyState为4）并且成功（status为200）时，我们从响应中获取HTML内容并打印出来。

使用fetch API

fetch API是现代浏览器提供的一个用于网络请求的API，它返回一个Promise对象，可以更方便地处理异步操作，以下是一个简单的示例，展示了如何使用fetch API获取HTML内容：

fetch('https://example.com')
    .then(response => response.text())
    .then(html => console.log(html))
    .catch(error => console.error('Error:', error));

在这个示例中，我们首先调用fetch函数并传入URL，我们使用then方法处理返回的Promise对象，第一个then方法将响应转换为文本，第二个then方法将文本打印出来，如果在任何地方发生错误，catch方法将被调用，我们可以在这里处理错误。

总结

无论是使用XMLHttpRequest还是fetch API，我们都可以使用它们来获取HTML内容，由于fetch API提供了更现代和灵活的接口，因此越来越多的开发者选择使用它，无论选择哪种方法，都需要理解其工作原理和使用方法，以便能够正确地获取和处理HTML内容。