XMLHTTP是浏览器内置的用于发送HTTP请求并接收响应的对象，通过它可以轻松获取目标网页的访问头信息和页面内容，是前端数据交互场景中的常用工具。
XMLHTTP基础使用流程
使用XMLHTTP发送请求并获取信息，核心流程分为创建对象、配置请求、发送请求、处理响应四个步骤，下面先给出完整的示例代码，再逐段分析逻辑。
// 创建XMLHTTP对象，兼容不同浏览器
var xmlhttp;
if (window.XMLHttpRequest) {
// 现代浏览器
xmlhttp = new XMLHttpRequest();
} else {
// IE6及以下版本
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
// 配置请求方法和目标地址，第三个参数为是否异步，true为异步
xmlhttp.open("GET", "http://ipipp.com/test.html", true);
// 设置请求头（可选，根据需求添加）
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 监听请求状态变化
xmlhttp.onreadystatechange = function() {
// readyState为4表示请求完成，status为200表示请求成功
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// 获取所有响应头信息
var allHeaders = xmlhttp.getAllResponseHeaders();
// 获取指定响应头，比如获取Content-Type
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);
代码核心逻辑分析
1. 对象创建兼容处理
不同浏览器对XMLHTTP的实现方式不同，现代浏览器直接支持XMLHttpRequest构造函数，而老版本IE需要使用ActiveXObject创建对象，代码中先做判断再创建，保证兼容性。
2. 请求配置说明
open方法的三个参数分别是请求方法（GET/POST等）、请求地址、是否异步。如果是同步请求，第三个参数设为false，此时send方法会阻塞后续代码执行，直到请求完成，一般不推荐同步请求，避免页面卡顿。
3. 响应头获取方法
XMLHTTP提供了两个获取响应头的方法：getResponseHeader(headerName)可以获取指定名称的响应头，参数是头字段的名称；getAllResponseHeaders()会返回所有响应头的字符串，每个头字段占一行，格式为头名称: 头值。
4. 网页内容获取
获取网页内容常用两个属性：responseText返回字符串形式的响应内容，适合获取普通文本、HTML、JSON等格式数据；responseXML返回XML文档对象，仅在响应内容类型为XML时有效。
注意事项
- 跨域限制：如果请求的目标地址和当前页面域名、端口、协议不一致，会受到浏览器同源策略限制，无法直接获取响应，需要目标服务器配置CORS或者使用代理解决。
- 状态码判断：一定要先判断
readyState为4（请求完成）再判断status，避免请求未完成时就读取响应数据导致错误。 - 请求头设置：
setRequestHeader方法必须在open方法之后、send方法之前调用，否则设置无效。
POST请求示例
如果需要发送POST请求获取信息，只需要调整open方法的第一个参数为POST，同时在send方法中传入请求参数即可，示例如下：
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "http://ipipp.com/api/post", true);
// 设置POST请求的Content-type
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);
}
};
// 发送POST参数，格式为key=value&key2=value2
xmlhttp.send("username=test&password=123456");