封装一个简单的ajax

133 阅读2分钟
function ajax({
// 这里我用到是es6的默认参数,也可以在函数内部创建一个default对象,
里面是各种默认值,在函数定义时使用default里的数据,然后使用Object.assign方法,
使用时传入一个options对象,然后覆盖default.
    type = 'get',
    url = '',
    data={},
    // content-type的类型不要写错啊
    header = { 'content-type': 'application/x-www-form-urlencoded' },
    success = function() {},
    error = function() {}
}) {
    // 创建ajax,不要忘了new
    const xhr = new XMLHttpRequest();
    // 将传入的参数data,拼接成xxx=yy& 的形式
    let params = '';
    for (attr in data) {
        params += `${attr}=${data[attr]}&`
    }
    // 使用字符串的slice方法,去掉末尾的&
    //注意 slice(a,b) 截取的字符不包括b位置
    params = params.slice(0, -1)
    // 如果是get请求,就把参数拼到路径上
    if (type === 'get') {
        url = url + '?' + params
    }
    xhr.open(type, url)
    // 如果是post请求,则通过xhr.send()发送参数,并且根据请求头的不同,发送不一样的参数形式.
    if (type === post) {
    // 将content-type存到一个变量中
        let contentType = header['content-type'];
        xhr.setRequestHeader('content-type', contentType);
        // 如果发送的是json格式的数据,记得将其转化为json字符串,
        因为无论响应和请求传输的都是字符串.
        if (contentType === 'application/json') {
            xhr.send(JSON.stringify(data))
        } else {
        // post请求,但参数是xxx==yy&的格式,content-type是
        x-www-form-urlencoded
            xhr.send(params)
        }
    } else {
        xhr.send()
    }
    // 请求完毕调用xhr.onload事件,而不是onreadystatechange,
    不用判断状态码,更方便但低版本ie不支持.
    xhr.onload = function() {
        let responseText = xhr.responseText;
        // 通过getResponseHeader方法,返回响应头的content-type,
        注意是服务器返回的,不要和客户端的弄混了
        let contentType = xhr.getResponseHeader('content-type');
        // 判断返回的content-type,是否是json字符串,可以转化为json对象
        if (contentType.includes('application/json')) {
            responseText = JSON.parse(responseText)
        }
        if (xhr.status === 200) {
        // 成功则调用success函数,记得把xhr也穿进去,方便调用者查看
            success(responseText, xhr)
        } else {
            error(responseText, xhr)
        }
    }
}
// 开头说的,来使用Object.assign的方法
function ajax(options){
    const defualt={
        type = 'get',
        url = '',
        data={},
        header = { 'content-type': 'x-www-form-urlencoded' },
        success = function() {},
        error = function() {}  
    }
    Object.assign(default,options)
    
    const xhr = new XMLHttpRequest();
    
    xhr.open(default.type,default.url)
    
    xhr.send()
    
    ToBeContinued=>---
}