如何用XMLHTTP获取web访问头信息和网页内容

XMLHTTP 是浏览器内置的用于发送 HTTP 请求并接收响应的对象。它可以帮助前端脚本在不刷新页面的情况下请求服务器资源，读取响应头、响应体以及请求状态，从而完成数据获取、内容预览、接口调试等任务。对于需要获取网页访问头信息和页面内容的场景，掌握它的请求流程、状态判断和响应读取方式非常重要。

XMLHTTP获取响应头与网页内容的基本流程

使用 XMLHTTP 获取目标网页信息时，核心流程可以概括为创建对象、配置请求、发送请求和处理响应四个步骤。创建对象是第一步，因为后续所有请求操作都要依赖这个对象完成。配置请求阶段需要指定请求方法、目标地址以及是否异步执行，发送请求阶段则把请求真正交给浏览器发起。处理响应阶段通常通过状态变化回调来读取结果，只有当请求完成并且状态正常时，才适合读取响应头或网页内容。

在对象创建方面，现代浏览器一般可以直接使用 XMLHttpRequest 构造函数，而较旧的浏览器环境可能需要通过 ActiveXObject 创建 Microsoft.XMLHTTP 对象。为了保证脚本在不同环境中都能运行，通常先判断当前环境是否支持 window.XMLHttpRequest，再选择对应的创建方式。这种兼容写法虽然略显传统，但在理解 XMLHTTP 基础用法时仍然很典型，也能帮助读者看清不同浏览器实现之间的差异。

配置请求时，open 方法接收请求方法、请求地址和异步标志三个参数。请求方法常见为 GET 或 POST，异步标志设置为 true 时，请求不会阻塞页面后续代码执行，这是更常用的方式。发送请求后，可以通过 onreadystatechange 监听状态变化，当 readyState 为 4 且 status 为 200 时，说明请求完成且成功，此时可以调用 getAllResponseHeaders() 获取全部响应头，调用 getResponseHeader() 获取指定响应头，并通过 responseText 获取网页内容。

// 创建 XMLHttpRequest 对象，并兼容旧版 IE
var xmlhttp;
if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
} else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

// 配置 GET 请求，第三个参数表示异步
xmlhttp.open("GET", "http://ipipp.com/test.html", true);

// 设置请求头，是否使用可根据实际需求决定
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

// 监听请求状态变化
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
        var allHeaders = xmlhttp.getAllResponseHeaders();
        var contentType = xmlhttp.getResponseHeader("Content-Type");
        var pageContent = xmlhttp.responseText;

        console.log("所有响应头信息：", allHeaders);
        console.log("Content-Type 响应头：", contentType);
        console.log("网页内容：", pageContent);
    } else if (xmlhttp.readyState === 4) {
        console.log("请求失败，状态码：", xmlhttp.status);
    }
};

// 发送 GET 请求，参数为 null
xmlhttp.send(null);

响应头、响应内容与错误处理的关键细节

响应头是判断服务器返回内容类型、编码、缓存策略等信息的重要依据。getAllResponseHeaders() 会返回所有响应头的字符串，通常每个头字段占一行，格式为“头名称: 头值”。这种方式适合在调试阶段快速查看服务器返回了哪些信息。getResponseHeader() 则用于获取指定名称的响应头，参数是头字段名称，适合业务代码只关心某一个字段时使用，例如读取 Content-Type 或自定义响应头。

网页内容的读取主要依赖 responseText 和 responseXML 两个属性。responseText 返回字符串形式的响应内容，适合获取普通文本、HTML 页面或 JSON 数据。若服务器返回的是 XML 文档，并且响应内容类型符合 XML 解析条件，responseXML 可以返回 XML 文档对象，方便脚本按节点方式访问数据。实际开发中，可以先判断 responseXML 是否存在，再决定是否使用它，避免在普通文本响应中误用。

读取响应前，先确认请求已经完成，再判断状态码是否成功，这是避免读取到不完整数据的关键。

错误处理同样重要。请求完成不代表一定成功，状态码可能表示资源不存在、服务器错误或权限问题。因此在 readyState 为 4 的分支中，应进一步判断 status 是否为 200。如果状态码异常，可以记录状态码、提示用户或执行降级逻辑。对于获取网页内容的场景，错误分支的处理能避免脚本在异常情况下继续读取空内容或错误内容，从而提升程序的稳定性。

// 获取 XML 类型响应内容
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "http://ipipp.com/data.xml", true);

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
        var textContent = xmlhttp.responseText;
        var xmlContent = xmlhttp.responseXML;

        console.log("文本内容：", textContent);
        if (xmlContent) {
            console.log("XML 文档：", xmlContent);
        }
    } else if (xmlhttp.readyState === 4) {
        console.log("请求失败，状态码：", xmlhttp.status);
    }
};

xmlhttp.send(null);

GET与POST请求中的参数和请求头设置

获取网页内容时，GET 请求通常用于从服务器读取资源，请求参数可以放在地址栏中，也可以在 send 方法中传 null。POST 请求则适合向服务器提交数据，例如登录、查询、保存等操作。使用 XMLHTTP 发送 POST 请求时，需要把 open 方法的第一个参数改为 POST，并在 send 方法中传入请求参数。参数格式通常遵循表单编码规则，多个参数之间用连接符分隔。

请求头的设置要特别注意调用时机。setRequestHeader 必须在 open 方法之后、send 方法之前调用，否则设置可能无效。对于表单编码的 POST 请求，常见会设置 Content-type 为 application/x-www-form-urlencoded，表示请求体采用键值对形式。请求体中的参数通常写成 key=value&key=value 的形式，具体字段名和值要与后端接口约定保持一致。

跨域限制是使用 XMLHTTP 时必须考虑的问题。如果请求的目标地址和当前页面在域名、端口或协议上不一致，浏览器同源策略可能会阻止脚本读取响应。此时需要目标服务器配置 CORS，或者通过代理服务器转发请求。跨域问题并不影响请求是否发出，但会影响前端能否读取响应头和响应内容，因此在调试获取网页内容失败的问题时，应优先检查控制台是否存在跨域错误。

// 发送 POST 请求并读取响应
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "http://ipipp.com/api/post", true);

// 设置表单编码请求头
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
        console.log("响应头：", xmlhttp.getAllResponseHeaders());
        console.log("响应内容：", xmlhttp.responseText);
    } else if (xmlhttp.readyState === 4) {
        console.log("请求失败，状态码：", xmlhttp.status);
    }
};

// 发送 POST 参数
xmlhttp.send("username=test&password=123456");

要点回顾与延伸建议

回顾整个流程，XMLHTTP 获取访问头信息和网页内容的重点在于：先创建兼容对象，再正确配置请求，发送后通过状态回调读取结果。读取响应前必须确认 readyState 为 4，再判断 status 是否成功。响应头可以通过 getAllResponseHeaders() 和 getResponseHeader() 获取，网页内容可以通过 responseText 获取文本，必要时使用 responseXML 获取 XML 文档对象。

延伸使用时，建议把请求封装成可复用的函数，统一处理成功、失败、超时和跨域异常。对于简单页面获取，异步请求是更稳妥的选择，避免阻塞用户操作。对于更复杂的现代前端场景，也可以结合浏览器提供的更高层接口来简化代码，但理解 XMLHTTP 的状态机、请求头、响应头和响应内容读取方式，仍然是掌握前端数据交互的基础。

XMLHTTPweb访问头信息网页内容获取HTTP请求修改时间：2026-07-13 16:27:25