tomato
/
封装自定义ajax函数.html

<!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 onclick="sendGet()">测试发送get</button>
    <button onclick="sendPost()">测试发送post</button>
    <button onclick="sendDelete()">测试发送delete</button>

    <script>
      // data是一个对象类型 {id:1, name:张三}
      function transDataToStr(data) {
        // for in id=1  => ['id=1', 'name=张三'] => id=1&name=张三
        return Object.keys(data)
          .map((key) => `${key}=${data[key]}`) // 这里为什么不编码 浏览器自动编码
          .join("&")
        // var arr = []
        // for (var k in data) {
        //   var str = k + "=" + data[k]
        //   arr.push(str)
        // }

        // return arr.join("&")
      }
      // 定义一个函数 接收一个对象
      // options
      // url type data success
      function Ajax(options) {
        // 默认值是get
        const { url, type = "get", data = {}, success } = options
        if (!url) throw new Error("The URL parameter is required")
        // XMLHttpRequest
        const xhr = new XMLHttpRequest() // 1. 实例化一个对象
        // get类型的参数必须拼接到url的后面
        // post put delete 请求体参数 send()
        if (type.toUpperCase() === "GET") {
          // 把data的参数拼接到url地址的后面
          xhr.open(type, `${url}?${transDataToStr(data)}`)
          xhr.send()
        } else {
          // 设置content-type
          xhr.open(type, url)
          // 设置请求体参数的类型
          xhr.setRequestHeader(
            "content-type",
            "application/x-www-form-urlencoded"
          )
          xhr.send(transDataToStr(data))
        }
        xhr.onload = () => success && success(JSON.parse(xhr.responseText))
      }
      //   Ajax({
      //     url: "http://www.baidu.com",
      //     data: { id: 1, name: "张三", sex: "男" },
      //   })
      // const baseURL = "http://www.liulongbin.top:3006"
      // function sendGet() {
      //   Ajax({
      //     url: `${baseURL}/api/getbooks`,
      //     data: { bookname: "喜羊羊" },
      //     success(data) {
      //       console.log(data)
      //     },
      //   })
      // }
      // function sendPost() {
      //   Ajax({
      //     type: "post",
      //     url: `${baseURL}/api/addbook`,
      //     data: {
      //       bookname: "悲惨世界",
      //       author: "雨果",
      //       publisher: "法国出版社",
      //     },
      //     success(data) {
      //       console.log(data)
      //     },
      //   })
      // }
      // function sendDelete() {
      //   Ajax({
      //     type: "delete",
      //     url: `${baseURL}/api/delbook?id=320`,
      //     success(data) {
      //       console.log(data)
      //     },
      //   })
      // }
    </script>
  </body>
</html>