AJAX

112 阅读5分钟

AJAX

概述

AJAX(asynchronous JavaScript and xml)译为异步的JavaScript和xml,主要是用于发送异步请求(同时它也 AJAX(异步JavaScript和译为异步的)和和xml,主要是用于发送异步请求来请求数据(同时它也支持同步)

同步和异步

同步相当于一个队列。按照先进先出的顺序执行 异步相当于多个队列。彼此之间没有联系

线程和进程

进程就是进行中的程序 线程是进程的最小单位(JavaScript是单线程的语言(work类用于开启工作线程))

请求和响应

请求是客户端请求服务器端(携带数据)

响应是服务器端响应客户端(携带数据)

AJAX的请求过程

主要步骤

  1. 浏览器实例化请求对象
  2. 携带数据填充到请求对象、发送请求
  3. 服务器接收请求 响应数据(将响应数据填入到请求对象中)
  4. 浏览器监听请求对象的状态变化
  5. 在对应的监听处理中获取数据

代码实现

image.png

AJAX的核心对象及相关内容

核心内容
  1. XMLHttpRequest
  2. 相关属性和方法
属性

reasyState 表示当前的xml的状态码 status 表示http的状态码 upload 获取上传对象 timeout 设置超过时间(可以赋值) responseText 表示对应的响应文本 responseType 表示对应的响应类型 responseUrl 表示对应的响应的url地址 responseXML 表示对应的响应xml内容 response 获取响应

方法

open 打开连接 send 发送请求 setResponseHeader() 设置请求头 overrideMimeType 接收mime来替换服务器返回的类型(下载操作) getAllResponseHeaders() 获取所有的响应头 getResponseHeader() 获取对应的响应头

响应头的构成

请求(request)

请求头是用于携带头信息(优先解析请求头)

常用的请求头

  1. user-agent 携带的用户信息
  2. authorization JWT的验证信息 存储token授权信息
  3. cookie 携带的cookie
  4. referer 对应当前地址信息 (携带get请求的数据)
  5. content-type 指定请求的内容类型

请求体请求的内容主体

  1. post 请求携带的数据 分段解析
响应(request)

响应头响应携带的头

  1. content-type 响应的内容的类型(json)
  2. cache-control :max-age=43200(强制缓存)
  3. expires:-1(强制缓存)
  4. acess-Content-Allow-origin 用于跨域的响应头

响应体响应的数据 readyState的值

意义
0请求未发送
1请求准备发送
2请求发送成功,未响应
3请求发送成功,响应中
4请求发送成功,响应完毕
status的值(http的状态码)
意义
------
以1开头成功,需要下一步操作100(1.1新增的)
以2开头成功200
以3开头重定向 301 304
以4开头客户端错误 401 402 403 404
以5开头服务器端错误 500 502
后端数据返回
  1. 相关数据 date
  2. 对应的状态码 code
  3. 对应解释信息 message

接口文档相关生成

swagger(接口网站)

缓存

相当于将当前的内容进行下载,下次再访问的时候直接调用(速度快)

强制缓存

不需要再次请求对应的服务器,直接访问缓存内容(强制性操作)。当前内容或者文件必须没有变化,如果有变化那么就不执行强制缓存。获取当前没有采用强制缓存,那么也不会走强制缓存

强制缓存的实现

主要是通过对应的响应头来设置的

  1. expires 实现(http 1.0)

  2. cache-control 实现(http 1.1)

     cache-control :max-age=43200(强制缓存)毫秒
     expires:-1(强制缓存) -1 不采用强制缓存
    
协商缓存

需要再次请求服务器验证当前的内容是否更改,如果更改那么重新返回数据,如果没有更改那么就走协商缓存。(强制缓存的优先级高于协商缓存)

协商缓存的实现

主要是通过对应的响应头来进行验证的

  1. last-modified 最后修改时间
  2. etag 当前的文件的标识
总结
  1. 强制缓存优先于协商缓存执行,如果当前不走强制缓存就会访问协商缓存
  2. 强制缓存不需要再去请求对应的服务器,而协商缓存需要重新请求服务器
  3. 强制缓存使用expires(http 1.0)和cache-control(http 1.1)来进行控制
  4. 协商缓存使用last-modified和etag两个共同控制
  5. 强制缓存 如果没有使用缓存那么返回对应的状态码为200,如果使用了那么就会保持的之前返回的内容
  6. 协商缓存 如果没有使用 那么状态码为200 如果使用了那么对应的状态码为304
  7. 缓存可以减少对应http请求,提高浏览器的效率,减小服务器的压力

get请求

get请求是http 1.0内置的请求,get请求为默认请求方法、get请求主要用于获取数据。

主要特点
  • get请求为默认请求方法
  • get请求传参通过url拼接进行传参(?name=jack&age=18)
  • get传参有对应的大小限制(只有2kb)
  • get传参对应的数据是存在请求头上(速度快,不安全(暴露在地址栏))
基础get请求

post请求

概述

post请求是将对应的数据封装成一个表单对象进行提交(http 1.0 内置的请求方法),需要手动指定请求方式为post

主要特点
  1. post请求发送的数据是存放在对应的请求体中进行提交的(容量大)
  2. post请求不会暴露对应的数据在地址栏(较get更为安全)
  3. post请求奴会有历史记录(get请求有历史记录)
  4. post请求需要手指指定(指定请求方式为post)
  5. post请求可以指定的提交的数据类型(请求头来设置content- type)(默认指定为表单类型)
测试工具

postman