原生Ajax，jquery的ajax,Axios总结

1、原生ajax

默认情况下，Content-Type:text/plain

发送表单类型数据

        xhr.setRequestHeader('Content-Type','appliction/x-www-form-urlencoded)

        xhr.send(qs.stringify(data))

 发送json类型数据

xhr.sendRequestHeader('Content-Type','application/json')

xhr.send(JSON.stringify(data))

 

 <script>
    let baseURL = 'http://xxxxxxxxxxxxx:xxxx'
    let loginData = {
      username: 'admin1',
      password: '123321'
    }
    // 1.实例化xhr
    let xhr = new XMLHttpRequest()
    // 2.配置请求信息，打开链接
    xhr.open('post', baseURL + '/user/login')
    // xhr.setRequestHeader('Content-Type', 'application/json')
    // 3.发送请求，并且配置请求体中的数据
    xhr.send(JSON.stringify(loginData))
    // 4.监听链接状态的改变
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.response);
      }
    }
  </script>

 2、jquery的ajax

默认情况下，Content-Type：application/x-www-form-urlencoded

//发送表单型数据

$.ajax({

        url,

         method,

        data:data

})

//发送JSON类型数据

$.ajax({

url,

method,

headers:{

'Content-Type':'application/json'

},

data:JSON.stringify(logindata)

})

 3、axios

 
    1）默认情况下，Content-Type：application/json

        并且，默认将请求体中的参数转码成json类型数据

      //发送表单类型数据
        axios({
          url,
          method,
          data: qs.stringify(data)
        })
      //发送json类型数据
        axios({
          url,
          method,
          data: {
            username: 'admin1',
            password: '123321'
          }
        })

      Restful风格
        常用的HTTP动词有下面五个（括号里是对应的SQL命令）

          GET（SELECT）：从服务器取出资源（一项或多项）。
          POST（CREATE）：在服务器新建一个资源。
          PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
          PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）。
          DELETE（DELETE）：从服务器删除资源。

        还有两个不常用的HTTP动词。

          HEAD：获取资源的源数据。
          OPTIONS：获取信息，关于资源的哪些属性是客户端可以改变的。

        下面是一些例子

          GET /zoos：列出所有动物园
          POST /zoos：新建一个动物园
          GET /zoos/ID：获取某个指定动物园的信息
          PUT /zoos/ID：更新某个指定动物园的信息（提供该动物园的全部信息）
          PATCH /zoos/ID：更新某个指定动物园的信息（提供该动物园的部分信息）
          DELETE /zoos/ID：删除某个动物园
          GET /zoos/ID/animals：列出某个指定动物园的所有动物
          DELETE /zoos/ID/animals/ID：删除某个指定动物园的指定动物

    2）简写形式

      参数以查询字符串格式拼接到URL

      axios.get(url[,config])
      axios.delete(url[,config])
      axios.head(url[,config])
      axios.options(url[,config])

      参数放置到请求体上的

      axios.post(url[,data[,config]])
      axios.put(url[,data[,config]])
      axios.patch(url[,data[,config]])

    3）默认配置

      axios.defaults.baseURL = 'httml://...'  // 设置默认的请求基路径
      axios.defaults.headers.common['Authorization'] = token  // 为所有的请求统一设置
      axios.defaults.headers.get['Authorization'] = token   // 为所有的get请求统一设置
      axios.defaults.headers.post['Authorization'] = token  // 为所有的post请求统一设置

    4）拦截器

      请求拦截器

        axios.interceptors.requset.use((config) => {
          // 做请求对象的拦截处理
          return config
        },(error) => {
          return Promise.reject(error)
        })

      响应拦截器

        axios.interceptors.response.use((response) => {
          // 做响应结果的拦截处理
          return response
        },(error) => {
          return Promise.reject(error)
        })

      移除拦截器

        let interceptor = axios.interceptors.response.use((response) => {
          // 做响应结果的拦截处理
          return response
        },(error) => {
          return Promise.reject(error)
        })
        // 超时调用
        setTimeout(() => {
          // 移除拦截器
          axios.interceptors.response.eject(interceptor)
        }, 3000)