JavaScript封装原生Ajax

• 实现原理 模仿jQuery的Ajax
• 处理参数字符串 循环遍历对象遍 forin 历之后对串的拼接
• 拼接字符串注意空格问题
• str += ${key}=${obj.data[key]}& user=DD& password=21&

html 部分

  <input type="text" name="" id="user" placeholder="输入用户名">
    <input type="text" name="" id="pwd" placeholder="输入密码">
    <input type="button" id="btn" value="提交">

<script>
        // 分析
        // 点击button，发送请求
        // 参考jquery封装的Ajax

        // 自己封装Ajax，原生js实现
        document.querySelector('#btn').onclick = function () {
            let user = document.querySelector('#user').value
            let pwd = document.querySelector('#pwd').value

            // 调用函数 myAjax() 实参传递的参数是一个对象 调用对象的属性和方法，形参obj.属性方法
            myAjax({
                type: 'get',
                url: './php/ex-03get.php',
                data: {
                    user: user,
                    password: pwd
                },
                success: function (res) {
                    console.log(res);
                }
            })
        }


        // 封装函数
        function myAjax(obj) {
            // 原生js实现ajax封装
            // console.log(obj);

            // 1.创建对象
            let xhr = new XMLHttpRequest()


            // 3.处理字符串参数字符串
            // console.log(obj.data); //获取前后台参数，返回对象
            let str = ''
            for (const key in obj.data) {
                // console.log(key);  //输出对象的属性 user passwprd
                // console.log(obj.data[key]); // 输出兑现的属性值 （用户输入的部分）
                // 后台属性 = 前台属性值 
                str += `${key}=${obj.data[key]}&`
            }
            // 去掉最后一个&
            let params = str.slice(0, -1)

            // console.log(str);  user=DD&password=21&
            // console.log(params);  //user=DD&password=21


            // 2.判断请求的类型
            if (obj.type === 'get') {
                xhr.open('get', obj.url + '?' + params, true)
                xhr.send()
            } else if (obj.type === 'post') {
                xhr.open('post', obj.url, true)
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
                xhr.send(params)
            }

            // 4.时间监听
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 给调用函数的返回值，函数的获取，对象 . 
                    obj.success(xhr.response);
                }
            }
        }


    </script>