一、Ajax的实现步骤

1.创建Ajax对象

var xhr = new XMLHttpRequest();

2.告诉Ajax的请求方式与请求地址

xhr.open('get','http://localhost:3000')

3.发送请求

xhr.send()

4.获取服务器响应数据

xhr.onload = function(){
    console.log(xhr.responseText);
}

二、Ajax的简单封装

function ajax(options) {
    //存储的是默认值
    var defaults = {
            type: 'get',
            url: '',
            data: {},
            header: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: function() {},
            error: function() {}

        }
        //使用options 对象中的属性覆盖defaults对象中的属性
    Object.assign(defaults, options);

    //创建ajax对象
    var xhr = new XMLHttpRequest();
    //拼接请求参数变量
    var params = '';
    //循环用户传递进来的对象格式参数
    for (var attr in defaults.data) {
        //将参数拼接成字符串格式
        params += attr + '=' + defaults.data[attr] + '&';
    }
    //将参数后面的&符截取掉
    params = params.substr(0, params.length - 1)
        //判断请求方式
    if (defaults.type == 'get') {
        defaults.url = defaults.url + '?' + params;
    }

    //配置ajax对象
    xhr.open(defaults.type, defaults.url);
    //如果请求参数为post
    if (defaults.type == 'post') {
        var contentType = defaults.header['Content-Type'];
        //设置请求参数格式的类型(post请求必须设置)
        xhr.setRequestHeader('Content-Type', contentType);
        if (contentType == 'application/json') {
            xhr.send(JSON.stringify(defaults.data))
        } else {
            xhr.send(params);
        }

    } else {
        //发送请求
        xhr.send();
    }

    //监听xhr对象下面的onload事件
    //当xhr对象接收完响应数据后触发
    xhr.onload = function() {


        //用来获取响应头中的数据
        // xhr.getResponseHeader()
        var ContentType = xhr.getResponseHeader('Content-Type');
        //服务器端返回的数据
        var responseText = xhr.responseText;
        //如果响应类型中包含'application/json'
        if (ContentType.includes('application/json')) {
            //将JSON字符串转换为JSON对象
            responseText = JSON.parse(responseText)

        }
        //对http状态码进行判断
        if (xhr.status == 200) {
            defaults.success(responseText, xhr);
        } else {
            defaults.error(responseText, xhr)
        }


    }
}

使用

  ajax({
          url: 'http://localhost:3000/email',
          data: {
           name:'zhangsan'
          },
          success(res) {
            console.log(res);
          }
        });