Ajax用什么对象与服务器通信？常用对象有哪些？

Ajax与服务器通信的核心对象是XMLHttpRequest（简称XHR），现代浏览器中，fetch API的Request和Response对象也成为主流选择；如果你用axios，浏览器端底层通常还是XHR。

Ajax用什么对象与服务器通信？先认识XMLHttpRequest

XMLHttpRequest对象是Ajax的“原配”

你可以把XMLHttpRequest理解成浏览器内置的通信工具,它不需要安装，不需要付费，直接new出来就能用，传统Ajax的“异步”二字，最早就是靠它实现的，据WHATWG的XMLHttpRequest规范，它是标准Web API的一部分，不是某个框架的私货。

创建和发送请求的实操步骤

• 创建对象：const xhr = new XMLHttpRequest();
• 打开连接：xhr.open('GET', '/api/list', true); 第三个参数true表示异步，false表示同步，现代浏览器主线程已不推荐同步XHR。
• 设置请求头：xhr.setRequestHeader('Content-Type', 'application/json');
• 监听状态：xhr.onreadystatechange或xhr.onload
• 发送数据：xhr.send()或xhr.send(JSON.stringify(data))
• 处理响应：xhr.status、xhr.responseText、xhr.responseXML

readyState五个状态要记牢

• 0：未初始化，尚未调用open
• 1：已打开，已调用open
• 2：已发送，已调用send
• 3：接收中，部分数据可用
• 4：完成，响应全部接收

面试或调试时,readyState === 4且status在200到299之间，才算成功。

Ajax和Fetch哪个更适合与服务器通信？对比对象与场景

这是典型的对比长尾词,要选对对象，先看项目需求。

fetch API的核心对象：Request与Response

fetch()调用后返回一个Promise，这个Promise解析为Response对象，你还可以用

new Request()构造请求对象，它和XHR最大的不同是：基于Promise，写法更接近现代JavaScript。

fetch不会因为HTTP错误状态码而reject,据MDN文档，404、500也会走到then，需要自己检查response.ok，默认不带cookie，跨域携带凭证要设置credentials: 'include'。

XHR与Fetch对比表格

axios在浏览器端用的什么对象？

axios不是浏览器原生对象,在浏览器环境，它通常基于XMLHttpRequest实现；在Node.js环境，基于http模块，你写axios.get()时，底层可能是XHR在跑，选择axios的理由是拦截器、自动JSON转换、统一错误处理。

前端Ajax请求服务器用哪个对象？手写代码验证

这个疑问长尾词适合初学者。

用XMLHttpRequest发起GET请求

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/user?id=123', true);
xhr.timeout = 5000;
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    console.error('请求失败', xhr.status);
  }
};
xhr.onerror = function() {
  console.error('网络错误');
};
xhr.ontimeout = function() {
  console.error('超时');
};
xhr.send();

用fetch发起同样请求

fetch('/api/user?id=123', {
  method: 'GET',
  headers: {'Content-Type': 'application/json'},
  credentials: 'include'
})
  .then(res => {
    if (!res.ok) {
      throw new Error('HTTP ' + res.status);
    }
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

在浏览器控制台快速验证

• 输入typeof XMLHttpRequest，返回'function'。
• 输入typeof fetch，返回'function'。
• 打开开发者工具Network面板,刷新页面，看请求的Initiator列，能区分是XHR还是fetch。
• 在Console里执行new XMLHttpRequest()，能看到对象属性。

北京前端开发Ajax与服务器通信用什么对象？地域选型与成本

地域词自然融入,北京前端团队项目类型多，选型有差异。

一线城市项目中的常见选型

在北京、上海、深圳等互联网公司聚集地，新项目多数使用fetch或axios封装，老系统维护、银行内部系统、工业控制面板，仍然大量使用XMLHttpRequest，业内专家指出，直接裸写XHR的场景在减少，但理解XHR仍然是前端面试的硬门槛。

Ajax与服务器通信需要付费吗？价格与成本边界

Ajax本身不收费,XMLHttpRequest和fetch都是浏览器内置能力，没有授权费，真正产生费用的是服务器、带宽、API调用、云服务，比如你调用第三方地图API，按调用量计费；用云函数处理请求，按执行次数和资源计费，具体价格以各云厂商文档为准。

兼容IE和旧系统时怎么办

• 优先用XMLHttpRequest,因为IE7+支持。
• 如果需要Promise风格,可以用axios或自己封装Promise。
• 不要在主线程使用同步XHR,会阻塞页面渲染。
• 设置xhr.timeout和withCredentials时，注意IE的版本差异。

Q&A：Ajax用什么对象与服务器通信常见问题

Ajax用什么对象与服务器通信？是XMLHttpRequest还是fetch？

传统Ajax的标准答案是XMLHttpRequest对象,fetch是现代替代方案，但它不是XMLHttpRequest，面试时如果问“Ajax用什么对象”，先说XMLHttpRequest；如果问“现代项目用什么”，可以补充fetch和axios。

Ajax和Fetch哪个更适合与服务器通信？项目里怎么选？

需要上传进度、兼容旧浏览器、统一拦截器，选XHR或axios，需要流式响应、Service Worker、轻量请求，选fetch，多数情况下，用fetch加一层简单封装就能满足业务，行业共识认为，异步请求应避免阻塞主线程，同步XHR只应在极少数特殊场景考虑。

XMLHttpRequest对象有哪些必须掌握的属性和方法？

方法包括open、send、setRequestHeader、abort、getAllResponseHeaders，属性包括readyState、status、statusText、responseText、responseXML、timeout、withCredentials，事件包括onreadystatechange、onload、onerror、onprogress、ontimeout，XMLHttpRequest对象至今仍是Web标准中定义Ajax通信能力的核心接口之一。

一句话收束：传统Ajax通信靠XMLHttpRequest对象，现代开发常用fetch的Request/Response对象，axios在浏览器端底层通常还是XHR。 选型时看兼容性、进度、拦截器和团队习惯，而不是盲目追新。