前端面试题

外观

Ajax 的原理是什么？ ​

Ajax 是在不整页刷新的情况下，用脚本向服务器要数据。浏览器里最早的接口是 XMLHttpRequest，现在业务代码优先用 fetch。两者都受同源策略约束。

原理 ​

XMLHttpRequest 的步骤：创建对象，open(method, url, async)，设置请求头，send(body)，在 onreadystatechange 里看 readyState === 4 和状态码。readyState 从 0 到 4，4 表示完成。

js
const xhr = new XMLHttpRequest()
xhr.open("GET", "/api/user")
xhr.onload = () => {
  if (xhr.status >= 200 && xhr.status < 300) console.log(xhr.responseText)
}
xhr.send()

fetch 返回 Promise。注意：HTTP 404、500 不会 reject，要自己看 response.ok。网络断开、CORS 被拦、主动 abort 才会 reject。

取消用 AbortController。超时要自己计时后 abort，fetch 没有 timeout 选项。上传和下载进度仍是 XMLHttpRequest 的 upload.onprogress 更直接。

追问 ​

和表单提交有什么不同？

表单提交会导航到响应页。Ajax 把响应交回脚本，页面自己决定怎么更新。改数据的请求仍然要防 CSRF，见 CSRF。

JSONP 算 Ajax 吗？

它靠 script 标签发 GET，并执行返回的脚本，不是 XHR。只能 GET，而且等于信任对方的代码。现在用 CORS，不要用 JSONP。

易错点 ​

  • fetch 的 404 走 then，不走 catch。
  • 自定义头或 Content-Type: application/json 会触发预检。见 跨域。
  • 同步 XHR（open 的第三个参数为 false）会卡住页面，不要用。

相关 ​