使用XMLHttpRequest封装一个Ajax函数

封装一个Ajax函数

在封装前需要准备的事情：
1、调用在封装函数需要传入一个对象
2、处理 params 参数
3、处理 data 请求体数据

ajax函数的配置对象：

参数选项	说明
method	请求的类型（GET 或 POST）
url	请求的 URL 地址
params	URL 末尾拼接的查询参数
data	请求体数据，有三种格式，分别是（FormData 格式、JSON 格式、普通字符串格式）
success	请求成功之后的回调函数

实现ajax的关键步骤：

1、处理 params 参数
2、处理 data 请求体数据

get请求方式有两种传参方式：

1、路径？键=值&键=值

2、传入一个对象：params:{

                  键：'值'，
                  键：'值'，
               }

post请求方式有三种传参方式：

1、FormData 格式 ：let fd = new FormData

2、“键值对”字符串 ：x=3&y=4

3、json 对象格式 : 转换JSON字符串

上代码：

		
	//调用myAjax函数，并传入一个对象

		// get请求
            myAjax({
                method: 'get',
                url: '接口路径',
                params: {
                    id: 15441,
                },
                success: function(result) {
                    console.log(result);  // 返回一个ID为15441的数据
                }
            })


		 //post请求
            myAjax({
                method: 'post',
                url: '接口路径',
                data: {
                    bookname: '123',
                    author: '456',
                    publisher: '789'
                },
                success: function(result) {
                    console.log(result);
                }
            })

封装myAjax函数

//get方式传入的是一个对象的话，就需要处理一下数据
// 拼接字符串
function paramsToString(obj) {
    let arr = []
    //遍历对象，拼接后保存在arr数组里
    for (let k in obj) {
        arr.push(k + '=' + obj[k])
    }
    //数组转换字符串
    return arr.join('&')
}

//封装ajax 
//{ method, url, params, data, success }:解构对象
function myAjax({ method, url, params, data, success }) {
    let xhr = new XMLHttpRequest()
        // 请求行
    if (method.toLowerCase() == 'get' && params) {
        //调用拼接字符串函数
        url += '?' + paramsToString(params)
    }
    xhr.open(method, url)

    // 请求体
    //判断post传入的参数是不是FormData构造函数
    if (data instanceof FormData) {
        xhr.send()
    } else if (typeof data == 'object') {
        //判断post传入的参数是不是object对象
        //请求头
        xhr.setRequestHeader('Content-Type', 'application/json')
        // 转换为json字符串
        xhr.send(JSON.stringify(data))
    } else if (typeof data == 'string') {
         //判断post传入的参数是不是string字符串
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        //直接在请求体中传入参数
        xhr.send(data)
    } else {
        xhr.send()
    }


    // 响应
    xhr.addEventListener('load', function() {
        //回调函数
        //把返回的JSON字符串转换为js对象
        success(JSON.parse(xhr.response))
    })
}