三分钟学会ajax1. ajax 1.作用：阿贾克斯目前市场上主流的前后端通讯技术特点：可以无刷新的同步异步代码 2.

1. ajax

1.作用：阿贾克斯目前市场上主流的前后端通讯技术

特点：可以无刷新的同步异步代码

// 异步ajax代码书写顺序为1,2,3,4或者1,2,4,3 但是同步代码只能是1,2,4,3因为在3的时候就已经完成请求了如果写在4前面，4就不会触发了
let xhr = new XMLHttpRequest // 1. 创建ajax请求
xhr.open(`get`,`http://localhost:8888/test/first`) // 2. 配置请求信息：('请求方式','请求地址','配置是否同步异步,默认为异步值为true')
xhr.send() // 3. 发送ajax请求
xhr.onload = function(){
  console.log((xhr.responseText)) // 4. 接受请求数据
}

2. ajax的状态码

就是通过一个数字表明ajax运行到哪一步了

let xhr = new XMLHttpRequest // 1. 创建ajax请求
xhr.open(`get`,`http://localhost:8888/test/first`) // 2. 配置请求信息：('请求方式','请求地址','配置是否同步异步,默认为异步值为true')
xhr.send() // 3. 发送ajax请求
xhr.onreadystatechange = function (){
  console.log(xhr.readyState) // 这一步表明状态码改变时打印他现在的状态码,因为此时是在异步代码发送请求之后意思就是状态码2之前，1之后的时间所以会打印2,3,4
}
xhr.onload = function(){
  console.log((xhr.responseText)) // 4. 接受请求数据
}

3. http网络协议(了解)

协议规定了请求必须是由前端发起的，并且在传输过程中只能传递字符串 * 建立连接，前端(浏览器)会和服务端(服务器)建立连接 * 发送请求，要求前段必须以请求报文的形式发送请求(报文由浏览器帮忙组装，我们只需要传递一些必要信息(如：请求方式，请求地址等)) * 接受响应，要求服务器(后端)必须以响应报文的形式返回一些数据，在响应报文中有些数据是需要前端来使用的 * 断开连接，前端(浏览器)和服务器的连接断开
响应状态码(很重要) * 100-199表明连接正在进行中(继续) * 200-299表明连接成功(请求成功) * 300-399表明重定向 * 400-499表明客户端错误(前端错误) * 500-599表明服务端错误(后端错误)

4. 请求的方式

请求方式的区别点 * 只有传参位置不同
常见的请求方式(理论上) * get 偏向获取的语义 * delete 偏向获取的语义(删除) * post 偏向于提交的语义 * put 偏向于提交的语义
目前市面上请求方式只有get和post
get和post的区别 * 携带参数的位置：get直接拼接在路径后面(路径与参数之间需要使用?间隔)，post书写在请求体中(xhr.send()中) * 携带参数的大小：get大约2KB左右，post原则上没有限制大小但是在服务端(后端)可以添加限制 * 携带参数的类型：get必须是字符串而且是查询字符串(key=value&...)，post必须是字符串可以是查询字符串也可以是JSON格式字符串但是需要配置一些信息告诉后端传递是哪种格式字符串 * 安全性(相对的)：post相对安全性高一点
请求头：post请求中如果传递参数必须写，告诉后端是查询字符串还是JSON格式字符串，需要在请求发送之前

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded') // 查询字符串
xhr.setRequestHeader('content-type','application/json')

  // 测试请求2
  let xhr = new XMLHttpRequest() // 1. 创建ajax请求
  xhr.open(`get`, `http://localhost:8888/test/second`) // 2. 配置请求信息：('请求方式','请求地址','配置是否同步异步,默认为异步值为true')
  xhr.send() // 3. 发送ajax请求
  // xhr.onreadystatechange = function () {
  //   console.log(xhr.readyState) // 这一步表明状态码改变时打印他现在的状态码,因为此时是在异步代码发送请求之后意思就是状态码2之前，1之后的时间所以会打印2,3,4
  // }
  xhr.onload = function () {
    console.log(JSON.parse(xhr.responseText)) // 4. 接受请求数据
  }

  // 测试请求3
    let xhr = new XMLHttpRequest() // 1. 创建ajax请求
  xhr.open(`get`, `http://localhost:8888/test/third?name=丁光达&age=18`) // 2. 配置请求信息：('请求方式','请求地址','配置是否同步异步,默认为异步值为true')
  xhr.send() // 3. 发送ajax请求
  // xhr.onreadystatechange = function () {
  //   console.log(xhr.readyState) // 这一步表明状态码改变时打印他现在的状态码,因为此时是在异步代码发送请求之后意思就是状态码2之前，1之后的时间所以会打印2,3,4
  // }
  xhr.onload = function () {
    console.log(JSON.parse(xhr.responseText)) // 4. 接受请求数据
  }

  // 测试请求4
  let xhr = new XMLHttpRequest() // 1. 创建ajax请求

  xhr.open(`post`, `http://localhost:8888/test/fourth`) // 2. 配置请求信息：('请求方式','请求地址','配置是否同步异步,默认为异步值为true')
  
  xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
  
  xhr.send('name=丁光达&age=18') // 3. 发送ajax请求
  // xhr.onreadystatechange = function () {
  //   console.log(xhr.readyState) // 这一步表明状态码改变时打印他现在的状态码,因为此时是在异步代码发送请求之后意思就是状态码2之前，1之后的时间所以会打印2,3,4
  // }
  xhr.onload = function () {
    console.log(JSON.parse(xhr.responseText)) // 4. 接受请求数据
  }

5. token

token 是你登陆成功后由服务端返回给我们的一个加密后的字符串 * 这个字符串还具有过期时间, 过期后就不能使用了 * 前端只需要将 token 保存好, 如果有一些接口需要证据证明登陆过, 那么拿到 token 就行了 js // 因为当前接口需要证明我们登录过, 所以需要传递一个凭证, 也就是 token, 而且必须通过请求头传递 xhr.setRequestHeader('authorization', token) // 表示使用xhr的setRequestHeader方法往xhr中添加1一个键值对，前面是属性，后面是属性值 xhr.setRequestHeader('authorization',_option.header['authorization']) // 表示使用xhr的setRequestHeader方法往xhr中添加1一个键值对，前面是属性，后面是属性值 xhr.setRequestHeader('content-type',_option.header['content-type'])
如果是 get 方法也需要添加 token 的话需要在请求头添加 authorization ，如果用的是 post 不但需要在请求头添加authorization还需要在请求头添加 content-type