Ajax - 原生封装 ajax 请求

// 常规的定义方式
// type:请求方式
// url:请求地址
// data:参数
// success:回调函数

// 参数的顺序固定，只能按顺序进行参数的传递，不方便
// 参数的数量固定，不方便后期的扩展
// 全局函数，会造成全局污染
// function ajax(type, url, data, success) {}

// option.type:请求方式
// option.url:请求地址
// option.data:参数
// option.success:回调函数

// 全局函数，会造成全局污染
// function ajax(option)

const $ = {
  // {name:'jack',age:20}  >> name=jack&age=20
  objectToParamsString: function(paramsObj) {
    let arr = []
    for (var key in paramsObj) {
      // ['name=jack' ,  'age=20']
      arr.push(`${key}=${paramsObj[key]}`)
    }
    return arr.join('&')
  },

  ajax: function(option) {
    // 1.参数的处理  如没有传递某些参数，应该设置默认值，如果传递了对象做为参数，应该进行数据转换
    let type = option.type || 'get'
    let url = option.url
    if (!url) {
      alert('一定要指定url')
      return
    }
    let data = option.data || ''
    // 如果传入的Data的类型是对象，那么应该将对象转换为字符串格式，如 {name:'jack',age:20} >> name=jack&age=20
    if (typeof data === 'object') {
      data = $.objectToParamsString(data)
    }
    let success = option.success
    let dataType = option.dataType || 'html'

    // 2.创建异步对象
    let xhr = new XMLHttpRequest()

    // 3.发起请求
    // 3.1 设置请求方式和请求url
    // 细节之一：get方式的请求如果有参数，应该在url中拼接
    if (type.toLowerCase() === 'get' && data) {
      url = url + '?' + data
      data = null
    }
    xhr.open(type, url)
    // 3.2 设置请求头
    // 细节：只有post方式才需要设置请求头
    if (type.toLowerCase() === 'post') {
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    }
    // 3.3 发起请求
    // 细节：post方式的参数应该在send函数中拼接
    xhr.send(data)

    // 4.接收响应
    xhr.onload = function() {
      // 对返回数据进行处理，异步对象本身并不知道数据应该如何处理，所以在调用ajax方法的时候，我们需要传入一个数据处理的回调函数，当异步对象获取到数据之后，调用这个回调函数即可
      let res = null
      if (dataType.toLowerCase() === 'json') {
        res = JSON.parse(xhr.responseText)
      } else if (dataType.toLowerCase() == 'xml') {
        res = xhr.responseXML
      } else {
        res = xhr.responseText
      }
      success && success(res)
    }
  }
}

相对详细的代码注释

// 需求: 函数封装ajax

/**问题:
 *  全局函数,不安全,容易造成全局污染
 *  参数:常规的定义,参数顺序固定,只能按顺序传参.参数数量固定,不方便拓展
 */

/** 方法:
 * 定义对象,内部函数,安全
 * 参数为对象,顺序可以随意,数量可以变
 */

/**
 *  option.type:请求方式
 *  option.url:请求地址
 *  option.data:参数
 *  option.success:回调函数
 */

const $ = {
    objectToParamsString: function (paramsObj) {
        // paramsObj:是一个对象
        let arr = []; // 定义空数组
        for (var key in paramsObj) {
            // for-in遍历对象,键值对,遍历出来是数组
            // ['name=jack' ,  'age=20']
            arr.push(`${key}=${paramsObj[key]}`); // push:追加数据到数组的最后一个
        }
        return arr.join('&'); // 用join方法,把数组中内容通过 & 连接起来,转成字符串
    },

    ajax: function (option) {
        // 参数处理:如果没有传参,应该有默认值,默认为get,如果传了对象做参数则进行数据转换
        let type = option.type || 'get'; // 有传对象做参数,就用,没有默认为get
        let url = option.url;
        // url必须要有,进行判定
        if (!url) {
            alert('请求地址必须有');
            return;
        }
        let data = option.data || ''; // 如果有传对象做参数就用,没有默认为空,参数可以为空
        // 如果传递了参数，且类型是对象，则将参数对象转换为字符串
        if (typeof data === 'object') {
            data = $.objectToParamsString(data);
        }
        let success = option.success;
        let dataType = option.dataType || 'html';

        // 创建异步对象
        let xhr = new XMLHttpRequest();

        //发起请求
        // 1.设置请求方式和请求地址
        // 请求方式为 get 且有参数,拼接路径url
        if (type.toLowerCase === 'get' && data) {
            url = url + '?' + data;
            // 参数data,用后即焚
            data = null;
        }

        // 请求方式为post
        // post的参数要在send中设置
        if (type.toLowerCase === 'post') {
            // 设置请求头
            xhr = setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        }

        // 发起请求
        xhr.send(data); // post请求方式的参数

        // 接收响应
        xhr.onload = function () {
            let res = '';
            if (dataType.toLowerCase() === 'json') {
                res = JSON.parse(xhr.responseText);
            } else if (dataType.toLowerCase() === 'xml') {
                res = xhr.responseXML;
            } else {
                xhr.responseXML;
            }
            success && success(data);
        };
    },
};