前端Ajax通信基础内容，利用Ajax进行前后端通信

创建xhr ajax项目

//===========================================
        var url = 'http://127.0.0.1:3007/api'

        //Create Ajax Project
        var xhr = new XMLHttpRequest();

        var params = 'username=' + ACCOUNT.value + '&age=' + PASSWORD.value;

        //Tell ajax how to send request
        //open(请求方式，请求地址)
        xhr.open('get', `${url}/login?${params}`);

        //Send request
        xhr.send();

        xhr.onload = function () {
            //xhr.responseText 保存着服务器端返回给客户端的数据
            //JSON  .parse() 将json字符串转换成json对象
            // var responseText = JSON.parse(xhr.responseText) 
            console.log(xhr.responseText);
        }

        //===========================================

get请求

xhr.open('get', `url`);

post请求

xhr.open('post','url');
//设置请求参数格式的类型
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//发送请求 post请求需要传入参数
xhr.send(params);

req.body挂载信息

//express4.16.0之前
需要先按照body-parser
npm install body-parser
var bodyParser = require('body-parser')
//才可以使用req.body

4.16.0之后就不需要了，直接使用req.body就可以了

JSON格式传递信息

xhr.opne('post','url');
//请求头
xhr.setRquestHeader('Content-Type','application/json')
//发送请求，因为请求send只能是传递字符串，所以需要用stringify函数将json数据转换成string
xhr.send(stringify({name :'Li',age:50}));
//服务器onload
xhr.onload = ()=>{
    /*code...*/
}

get请求不支持JSON，传统表单也是

Ajax状态码

onreadystatechange事件

当Ajax状态码发生变化时自动触发的事件

注意

get请求的值通过query挂载

post请求的值通过body挂载

封装ajax函数

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


        success: function (data, xhr) {
            console.log('请求成功！');
            console.log(data);
        },
        error: (data, xhr) => {
            console.log('ERROR错误' + data);
        },
    }

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


    var xhr = new XMLHttpRequest();
    //拼接请求参数的变量
    var params = '';

    //循环用户传递的参数并转换成字符串
    for (var attr in defaults.data) {
        params += attr + '=' + defaults.data[attr] + '&'
    }
    params = params.substring(0, params.length - 1);

    //判断请求方式 get请求就将请求参数加在地址后面
    if (defaults.type == 'get') {
        defaults.url += ('?' + params);
        console.log('Get请求,url:' + defaults.url);
    }
    console.log('params', params);
    //配置
    xhr.open(defaults.type, defaults.url);

    //发送请求
    if (defaults.type == 'post') {
        //用户向服务端传递的请求参数值
        var contenttype = defaults.header['Content-Type'];
        xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);
        //判断是否是json传输
        if (contenttype == 'application/json') {
            xhr.send(JSON.stringify(defaults.data));
        } else {
            console.log('发送非json通信');
            xhr.send(params);
        }

    } else {
        xhr.send();
    }

    //监听事件.xhr对象接受完响应数据后触发
    xhr.onload = () => {
        //获取响应头中的数据
        var contenttype_ = xhr.getResponseHeader('Content-Type');

        var responseText = xhr.responseText;
        if (contenttype_.includes('application/json')) {
            console.log('是JSON数据');
            //将json值转换为json对象
            responseText = JSON.parse(responseText);
        }

        //当http状态码为200时，请求成功则调用成功的函数，失败则调用失败的函数
        if (xhr.status == 200)
            defaults.success(responseText, xhr);
        else {
            defaults.error(responseText, xhr);
        }
    }
}

与其适配的ajax参数对象

//传入ajax的参数  类和函数一致则代表次类为函数的参数 很神奇~C++没这么方便
ajax({
    //请求方式 ，如果不写type默认为get
    type:'post',
    //请求地址
    url: 'http://127.0.0.1:3007/api/login',
    //请求成功时调用此函数
    data: {
        name: '田野',
        age: 19,
    },

})

写在ajax函数中的默认值

//存储默认值
var defaults = {
    type: 'get',
    url: '',
    data: {},
    header: {
        'Content-Type': 'application/x-www-form-urlencoded',
    },
    success: function (data, xhr) {
        console.log('请求成功！');
        console.log(data);
    },
    error: (data, xhr) => {
        console.log('ERROR错误' + data);
    },
}

后端接收数据

exports.login = (req, res) => {
  console.log('收到的值');
    //打印收到的值  
    //req.body用于post请求挂载前端发送的值
    //req.query用于get请求挂载前端发送的值
  console.log(req.body);
  //把接收到的值再响应给客户端，表示收到~
  res.send(req.body)
}