16Js面试题-Ajax和存储

144 阅读1分钟

Offer 驾到,掘友接招!我正在参与2022春招系列活动-刷题打卡任务,点击查看活动详情

一、XMLHttpRequest

image.png

二、状态码说明

(一)readyState

  • 0:(未初始化)还没有调用send()方法
  • 1:(载入)已调用send()方法,正在发送请求
  • 2:(载入完成)send()方法执行完成,已经接受到全部响应
  • 3:(交互)正在解析响应内容
  • 4:(完成)响应内容解析我拿出,可以在客户端调用了

(二)status

  • 2xx:表示成功处理请求
  • 3xx:需要重定向,浏览器直接跳转
  • 4xx:客户端请求错误,如404
  • 5xx:服务器端错误

(三)可以跨域的三个标签

  • 跨域的概念
  • 可跨域
  • 跨域请求注意事项
  • 跨域解决方案
  • 上面几点是有关跨域需要掌握的知识点,这一部分的详细解析可以查看我之前的文章跨域及其解决方案

三、存储相关

(一)cookie

  • 本身用于客户端和服务器端通信,使用方法可以参考这篇文章cookie
  • 但是它有本地存储的功能,于是就被“借用”
  • 使用document.cookie=...获取和修改即可

cookie用于存储的缺点:

  • 存储量太小,只有4KB
  • 所有http请求都带着,会影响获取资源的效率
  • API简单,需要封装才能用document.cookie=...

(二)locationStorage和sessionStorage

  • HTML5专门未存储而设计,最大容量为5M
  • API简单易用:
localStorage.setItem(key,value);
localStorage.getItem(key,value);
  • 注意:在IOS safari隐藏模式下,localStorage.getItem会报错,所以开发中建议统一使用try-catch封装

四、面试题

(一)手动编写一个ajax,不依赖第三方库

(二)跨域的几种实现方式