实现自己的Ajax函数利用原生Ajax，封装一个自己的Ajax函数，实现get和post的功能，post可以识别传递的参

利用原生Ajax，封装一个自己的Ajax函数，实现get和post的功能

html

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css" />
    <title>Document</title>
    <style>
        #addForm {
            width: 600px;
        }
    </style>
</head>

<body>
    <form class="card-body bg-light" id="addForm">
        <!-- 书名 -->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">书名</span>
            </div>
            <input type="text" class="form-control" placeholder="请输入图书名称" name="bookname" />
        </div>
        <!-- 作者 -->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">作者</span>
            </div>
            <input type="text" class="form-control" placeholder="请输入作者名字" name="author" />
        </div>
        <!-- 出版社 -->
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">出版社</span>
            </div>
            <input type="text" class="form-control" placeholder="请输入出版社名称" name="publisher" />
        </div>
        <input type="button" value="添加" class="btn btn-dark btnadd" />
    </form>
    <script src="./js/myAjax.js"></script>
    <script>
        let btnadd = document.querySelector('.btnadd')
        let bookname = document.querySelector('[name="bookname"]')
        let author = document.querySelector('[name="author"]')
        let publisher = document.querySelector('[name="publisher"]')

        btnadd.addEventListener('click', function() {
            // get请求
            ajax({
                method: 'get',
                url: 'http://www.itcbc.com:3006/api/getbooks',

                success: function(res) {
                    console.log(res);
                }
            })

            // post请求

		    //FormData类型
            // let form = document.querySelector('form')
            // let fd = new FormData(form)

            // let data = {}
            // fd.forEach(function(value, key) {
            //     data[key] = value
            // })

          
          	//对象类型
            // let data = {
            //     bookname: bookname.value,
            //     author: author.value,
            //     publisher: publisher.value,
            // }

            // ajax({
            //     method: 'post',
            //     url: 'http://www.itcbc.com:3006/api/addbook',
            //     data,
            //     success: function(res) {
            //         console.log(res);
            //     }
            // })
        })
    </script>
</body>

</html>

js

function setObjectToString(obj) {
    // {name:'jack',age:20} ---> name=jack&age=20
    let arr = []
    for (let key in obj) {
        arr.push(key + '=' + obj[key])
    }
    return arr.join('&')
}

//                       对象解构
function ajax({ method, url, params, data, success }) {
    // 创建异步对象
    let xhr = new XMLHttpRequest()

    // 使用异步函数发送请求
    // 请求行
    if (method.toLowerCase() == 'get' && params) {
        url = url + '?' + setObjectToString(params)
    }
    xhr.open(method, url)

    // 请求头
    // 请求体
    // instanceof:判断一个的构造函数是否是某个构造函数，意味着判断对象是否是某个构造函数创建的
    if (data && data instanceof FormData) {
        // 传递的是FormData类型
        xhr.send(data)
    } else if (typeof data == 'object') {
        // 传递的是对象类型
        xhr.setRequestHeader('Content-Type', 'application/json')
        xhr.send(JSON.stringify(data))
    } else if (typeof data == 'string') {
        // 传递的是字符串类型 key=value$key=value
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send(data)
    } else {
        xhr.send()
    }

    xhr.addEventListener('load', function() {
        // 调用用户传入的回调函数，且将后台的响应数据做为参数回传
        success(JSON.parse(xhr.response))
    })
}