[JavaScript知识库]原生Ajax，jquery的ajaxAxios总结

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)