Ajax第三天_document.queryselector('#btnpost').addeventlistene-CSDN博客

本文链接：https://blog.csdn.net/zhaoyifei01/article/details/129161314

XMLHttpRequest && Promise

XMLHttpRequest的基本用法

1、是浏览器内置的一个构造函数

2、作用：基于new出来的XMLHttpRequest实例对象。可以发起Ajax的请求

3、使用XMLHttpRequest发起请求

【1、1. 创建xhr对象
{ const xhr = new XMLHttpsRequest()}

2、2. 调用xhr.open()函数
{一、xhr.open('get', 'url地址?name=ashu&age=18') //get请求携带查询参数
二、xhr.open('post', 'http://www.liulongbin.top:3009/api/post')
// 3.post请求设置请求体对应的编码格式对应的是key=value&key=value
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')}

3、3. 调用xhr.send()函数
{一、get请求：xhr.send()
二、post请求：xhr.send(请求体数据)
xhr.send('uname=ccc&age=30')}

4、4. 监听load事件
{ xhr.addEventListener('load', function() {
console.log(xhr.response)
}) //拿回数据}】

数据交换格式

Promise

异步函数和回调函数的说明

一、异步函数：setTimeout、setInterval、ajax
异步函数的执行由于是异步的，不会阻塞主线程代码的执行
二、回调函数：将一个函数A作为参数传递给另一个函数B 函数A就是回调函数
存在问题：1. 回调函数不会立刻执行，阅读性不好
2. 回调函数一旦大量嵌套，可维护性差
解决方法：promise

promise的基本语法

一、创建promise对象
const p = new Promise((resolve,reject) => {
// promise内部一般可以封装一个异步操作
// resolve, reject 是promise内部提供给你的两个函数
// 成功调用 resolve
// 失败调用 reject
})
二、使用promise对象
p.then(res => {... //处理成功
}) .catch(res => {...}) //处理失败

三种状态

一、pending：等待（进行中）：默认状态
二、fulfilled: 成功 (已完成)：调用了 resolve 函数, promise的状态就会被标记成成功
三、rejected: 失败 (拒绝)：调用了 reject 函数, promise的状态就会被标记成失败
四、一旦promise的状态发生变化, 状态就会被凝固

promise常用静态方法

   Promise.all() 等待机制
       语法：Promise.all([ promise1, promise2, ... ]).then( ... )
特征：发起并行的promise异步操作，会等待所有的异步操作都完成，才会走 .then
   Promise.race() 赛跑机制
       语法：Promise.race([ promise1, promise2, ... ]).then( ... )
特征：发起并行的promise异步操作，只要任何一个异步操作完成，就会走 .then

案例-封装自己的Ajax函数

index-明确需求


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btnGet">发送get请求</button>
  <button id="btnPost">发送post请求</button>

  <script>
    //  GET   http://www.liulongbin.top:3009/api/get
    //  POST  http://www.liulongbin.top:3009/api/post


    // 提供myAxios来实现发送ajax请求   ajax 异步操作  ==>   需要使用promise来封装ajax异步代码
    function myAxios({ method, url, params, data }) {
      // 记得将promise实例对象给返回出去
      return new Promise((resolve, reject) => {
        // 在这写ajax异步代码
        // ....
        console.log(method, url, params, data)
      })
    }


    // 发送get请求
    document.querySelector('#btnGet').addEventListener('click', function () {
      // 使用自己封装的ajax函数来发送请求
      myAxios({
        method: 'get',
        url: 'http://www.liulongbin.top:3009/api/get',
        params: {
          name: 'lw',
          age: 19
        }
      }).then((res) => {
        console.log(res) // 服务器响应结果
      })
    })

    // 发送post请求
    document.querySelector('#btnPost').addEventListener('click', function () {
      // 使用自己封装的ajax函数来发送请求
      myAxios({
        method: 'post',
        url: 'http://www.liulongbin.top:3009/api/post',
        params: {
          name: 'lw',
          age: 19
        },
        data: {
          a: 1,
          b: 2
        }
      }).then((res) => {
        console.log(res) // 服务器响应结果
      })
    })
  </script>
</body>

</html>

index-发送请求和处理响应


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btnGet">发送get请求</button>
  <button id="btnPost">发送post请求</button>

  <script>
    //  GET   http://www.liulongbin.top:3009/api/get
    //  POST  http://www.liulongbin.top:3009/api/post


    // 提供myAxios来实现发送ajax请求   ajax 异步操作  ==>   需要使用promise来封装ajax异步代码
    function myAxios({ method, url, params, data }) {
      // 记得将promise实例对象给返回出去
      return new Promise((resolve, reject) => {
        // 在这写ajax异步代码
        // ....
        // console.log(method, url, params, data)

        // 发送请求 + 处理响应
        // 原生xhr
        // 1. 创建出来xhr对象
        // 2. 方式、url地址 ==> open()
        // 3. send(请求体数据) 发送请求

        // 1. 
        let xhr = new XMLHttpRequest()

        // 2. 
        xhr.open(method, url)

        // 3. 
        xhr.send()

        // 处理响应
        xhr.addEventListener('load', function () {
          // console.log(xhr.response) // 服务器响应结果

          // 把promise实例对象的状态改成成功fulfilled
          resolve(JSON.parse(xhr.response)) // 把服务器响应的json字符串数据给反序列化下
        })

        // 监听 error 事件 处理请求失败
        xhr.addEventListener('error', function () {
          reject('网络异常，请求失败，请稍后重试~~~')
        })
      })
    }


    // 发送get请求
    document.querySelector('#btnGet').addEventListener('click', function () {
      // 使用自己封装的ajax函数来发送请求
      myAxios({
        method: 'get',
        url: 'http://www.liulongbin.top:3009/api/get',
        params: {
          name: 'lw',
          age: 19
        }
      }).then((res) => {
        console.log(res) // 服务器响应结果  js对象 方便去操作
      }).catch((err) => {
        alert(err)
      })
    })

    // 发送post请求
    document.querySelector('#btnPost').addEventListener('click', function () {
      // 使用自己封装的ajax函数来发送请求
      myAxios({
        method: 'post',
        url: 'http://www.liulongbin.top:3009/api/post',
        params: {
          name: 'lw',
          age: 19
        },
        data: {
          a: 1,
          b: 2
        }
      }).then((res) => {
        console.log(res) // 服务器响应结果
      })
    })
  </script>
</body>

</html>

index-处理params


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btnGet">发送get请求</button>
  <button id="btnPost">发送post请求</button>

  <script>
    //  GET   http://www.liulongbin.top:3009/api/get
    //  POST  http://www.liulongbin.top:3009/api/post


    // 提供myAxios来实现发送ajax请求   ajax 异步操作  ==>   需要使用promise来封装ajax异步代码
    function myAxios({ method, url, params, data }) {
      // 记得将promise实例对象给返回出去
      return new Promise((resolve, reject) => {
        // 在这写ajax异步代码
        // ....
        // console.log(method, url, params, data)

        // 发送请求 + 处理响应
        // 原生xhr
        // 1. 创建出来xhr对象
        // 2. 方式、url地址 ==> open()
        // 3. send(请求体数据) 发送请求

        // 1. 
        let xhr = new XMLHttpRequest()

        // 在open之前，对params查询参数做个处理
        // console.log(params)
        if (params) {
          // if成立，表示params对象是存在的
          // console.log('if成立，表示params对象是存在的，才有必要把params对象处理成键值对字符串，放到url地址后面')

          let arr = []

          for (let k in params) {
            arr.push(`${k}=${params[k]}`)
          }
          console.log(arr.join('&')) // name=lw&age=19

          // 把键值对字符串拼接到url地址后面，并使用 ? 隔开
          url += `?${arr.join('&')}` // url = url + ?name=lw&age=19
        }

        // 2. 
        xhr.open(method, url)

        // 3. 
        xhr.send()

        // 处理响应
        xhr.addEventListener('load', function () {
          // console.log(xhr.response) // 服务器响应结果

          // 把promise实例对象的状态改成成功fulfilled
          resolve(JSON.parse(xhr.response)) // 把服务器响应的json字符串数据给反序列化下
        })

        // 监听 error 事件 处理请求失败
        xhr.addEventListener('error', function () {
          reject('网络异常，请求失败，请稍后重试~~~')
        })
      })
    }


    // 发送get请求
    document.querySelector('#btnGet').addEventListener('click', function () {
      // 使用自己封装的ajax函数来发送请求
      myAxios({
        method: 'get',
        url: 'http://www.liulongbin.top:3009/api/get',
        params: {
          name: 'lw',
          age: 19
        }
      }).then((res) => {
        console.log(res) // 服务器响应结果  js对象 方便去操作
      }).catch((err) => {
        alert(err)
      })
    })

    // 发送post请求
    document.querySelector('#btnPost').addEventListener('click', function () {
      // 使用自己封装的ajax函数来发送请求
      myAxios({
        method: 'post',
        url: 'http://www.liulongbin.top:3009/api/post',
        params: {
          name: 'lw',
          age: 19
        },
        data: {
          a: 1,
          b: 2
        }
      }).then((res) => {
        console.log(res) // 服务器响应结果
      })
    })
  </script>
</body>

</html>

对象处理成字符串


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <script>
        let params = {
            a: 1,
            b: 2,
            c: 3
        }

        // 需求：将params对象的键值对处理成  键值对的字符串   'a=1&b=2&c=3'

        // 拆解
        //  1. 对象  ==>  数组  ['a=1', 'b=2', 'c=3']
        //  2. 把上面的数组变字符串   ['a=1', 'b=2', 'c=3'].join('&')  结果是 'a=1&b=2&c=3'

        // 步骤:
        //  1. 准备好一个空数组  []
        //  2. for...in 遍历对象  把对象中的键 和 值 添加到数组中    难度😫
        //  3. 数组使用join

        // 1. 
        let arr = []

        // 2. 
        for (let key in params) {
            console.log(key, params[key])

            // arr.push(`a=1`)  // ['a=1', 'a=1', 'a=1']

            // 把键和值给push添加到arr数组中
            arr.push(`${key}=${params[key]}`)
        }

        console.log(arr)  // ['a=1', 'b=2', 'c=3']
        console.log(arr.join('&')) // 'a=1&b=2&c=3'
    </script>
</body>

</html>

处理fd和键值对字符串数据


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button id="btnGet">发送get请求</button>
  <button id="btnPost">发送post请求</button>
  <button id="btnPost2">发送FormData请求</button>
  <button id="btnPost3">发送键值对字符串请求</button>

  <script>
    //  GET   http://www.liulongbin.top:3009/api/get
    //  POST  http://www.liulongbin.top:3009/api/post


    // 提供myAxios来实现发送ajax请求   ajax 异步操作  ==>   需要使用promise来封装ajax异步代码
    // 给method 设置默认值为get，这样method没有指定的时候，默认发get请求
    function myAxios({ method = 'get', url, params, data }) {
      // 记得将promise实例对象给返回出去
      return new Promise((resolve, reject) => {
        // 在这写ajax异步代码
        // ....
        // console.log(method, url, params, data)

        // 发送请求 + 处理响应
        // 原生xhr
        // 1. 创建出来xhr对象
        // 2. 方式、url地址 ==> open()
        // 3. send(请求体数据) 发送请求

        // 1. 
        let xhr = new XMLHttpRequest()

        // 在open之前，对params查询参数做个处理
        // console.log(params)
        if (params) {
          // if成立，表示params对象是存在的
          // console.log('if成立，表示params对象是存在的，才有必要把params对象处理成键值对字符串，放到url地址后面')

          let arr = []

          for (let k in params) {
            arr.push(`${k}=${params[k]}`)
          }
          // console.log(arr.join('&')) // name=lw&age=19

          // 把键值对字符串拼接到url地址后面，并使用 ? 隔开
          url += `?${arr.join('&')}` // url = url + ?name=lw&age=19
        }

        // 2. 
        xhr.open(method, url)

        // 3. 
        // xhr.send(请求体数据)

        // 字符串有对应方法实现转大小写
        // 'GeT'.toLowerCase()    'get'.toUpperCase()
        if (method.toLowerCase() === 'get') {
          // 以下代码适用于get方式 ==> 没有请求体
          // console.log('这是get请求方式')
          xhr.send()
        } else {
          // 需要判断，请求方式不为get的话，而且有data请求体数据的话，就来处理data数据
          // post put ... 方式
          if (data) {
            if (data instanceof FormData) {
              // if成立，说明请求体的数据为FormData格式数据 
              xhr.send(data)
            } else if (typeof data === 'object') {
              // if成立，说明请求体的数据为js对象，但是在发送的时候，需要将其处理成json字符串
              xhr.setRequestHeader('Content-Type', 'application/json')
              xhr.send(JSON.stringify(data))
            } else if (typeof data === 'string') {
              // if成立，说明请求体的数据为键值的字符串  
              xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
              xhr.send(data)
            }
          }
        }

        // 处理响应
        xhr.addEventListener('load', function () {
          // console.log(xhr.response) // 服务器响应结果

          // 把promise实例对象的状态改成成功fulfilled
          resolve(JSON.parse(xhr.response)) // 把服务器响应的json字符串数据给反序列化下
        })

        // 监听 error 事件 处理请求失败
        xhr.addEventListener('error', function () {
          reject('网络异常，请求失败，请稍后重试~~~')
        })
      })
    }


    // 发送get请求
    document.querySelector('#btnGet').addEventListener('click', function () {
      // 使用自己封装的ajax函数来发送请求
      myAxios({
        // method: 'gEt',
        url: 'http://www.liulongbin.top:3009/api/get',
        params: {
          name: 'lw',
          age: 19
        }
      }).then((res) => {
        console.log(res) // 服务器响应结果  js对象 方便去操作
      }).catch((err) => {
        alert(err)
      })
    })

    // 发送post请求
    document.querySelector('#btnPost').addEventListener('click', function () {
      // 使用自己封装的ajax函数来发送请求
      myAxios({
        method: 'post',
        url: 'http://www.liulongbin.top:3009/api/post',
        params: {
          name: 'lw',
          age: 19
        },
        data: {
          a: 1,
          b: 2
        }
      }).then((res) => {
        console.log(res) // 服务器响应结果
      })
    })

    document.querySelector('#btnPost2').addEventListener('click', function () {
      let fd = new FormData()
      fd.append('car', 'bmw')
      fd.append('money', 190)

      // 使用自己封装的ajax函数来发送请求
      myAxios({
        method: 'post',
        url: 'http://www.liulongbin.top:3009/api/post',
        params: {
          name: 'lw',
          age: 19
        },
        data: fd, // 是FormData格式的数据
      }).then((res) => {
        console.log(res) // 服务器响应结果
      })
    })

    document.querySelector('#btnPost3').addEventListener('click', function () {
      // 使用自己封装的ajax函数来发送请求
      myAxios({
        method: 'post',
        url: 'http://www.liulongbin.top:3009/api/post',
        params: {
          name: 'lw',
          age: 19
        },
        data: 'a=1&b=2', // 键值对字符串 
      }).then((res) => {
        console.log(res) // 服务器响应结果
      })
    })
  </script>
</body>

</html>