jquery原生请求mysql 如何使用原生js实现ajax请求

一、Ajax的核心：XMLHttpRequest

概念:XMLHttpRequest是浏览器中内置的一个构造函数(属于BOM和DOM范畴)，用来创建对象的
作用:用来发起Ajax请求的,是Ajax的核心原理

1、使用XMLHttpRequest进行发送请求

分析ajax请求

axios({
    url:'请求地址',
    method:'请求方式',
    //查询参数
    //请求体
}).then(function(res){})

2、XMLHttpRequest中必须要有 请求地址 和 请求方式

// 1.创建一个XMLHttpRequset实例对象
let xhr = new XMLHttpRequest();

// 2.给实例对象设置请求方式和请求地址
// xhr.open('请求方式','请求地址');
xhr.open('get', 'http://www.liulongbin.top:3006/api/get');

// 3.发送请求
xhr.send();

// 4.获取请求的结果(返回的数据)
xhr.onload = function() {
    console.log(xhr.response);
}

二、XMLHttpRequest实现get请求

// 1.创建一个XMLHttpRequset实例对象
        let xhr = new XMLHttpRequest();
        // 2.给实例对象设置请求方式和请求地址
        // xhr.open('请求方式','请求地址');
        xhr.open('get', 'http://www.liulongbin.top:3006/api/get?aa=11&&bb=22');
        // 3.发送请求
        xhr.send();
        // 4.获取请求的结果(返回的数据)
        xhr.onload = function() {
            console.log(xhr.response);
        }

注意实现总结

a)查看服务器返回结果xhr.onload可以不写,但是推荐加上
b)如果设置了onload,onload事件中的代码只会在服务器返回了数据才会执行
c)onload只要在实例对象之后写就可以
d)send方法必须在open()方法后边设置
e)原生JS发送get请求的时候也可以设置查询参数,查询参数直接拼接写在地址后边 ?aa=11&&bb=22
f)如果查询参数是对象格式,该如何拼接在url地址上?解决办法:遍历对象,可以拿到键和值

let params = {
        uname: '张三',
        age: '23',
        myheight: '180'
    }
    // 目标格式: uname=张三&age=23&myheight=180

解决办法:遍历对象,可以拿到键和值：

let arr = [];
for (key in params) {
    // 将每一个键值对保存在数组中
    // console.log(key + '=' + params[key]);
    arr.push(key + '=' + params[key])
};
let str = arr.join('&');
console.log(str);
// 将str加在url地址后边就行了   'url地址'+str

三、XMLHttpRequest实现post请求

// 1.创建一个XMLHttpRequset实例对象
let xhr = new XMLHttpRequest();
// 2.给实例对象设置请求方式和请求地址
// xhr.open('请求方式','请求地址');
xhr.open('post', 'http://www.liulongbin.top:3006/api/post');
//--------------------------------------------------------------------
//设置请求体类型post专属(一定要加),以设置allocation/x-www-form-urlencaded格式为例
xhr.setRequestHeader('content-type', 'allocation/x-www-form-urlencaded');
// 3.发送请求
xhr.send('uname=abc&pwd=123');
//--------------------------------------------------------------------
// 4.获取请求的结果(返回的数据)
xhr.onload = function() {
    console.log(xhr.response);
}

注意实现总结：

--与get相同--
 a)查看服务器返回结果xhr.onload可以不写,但是推荐加上
 b)如果设置了onload,onload事件中的代码只会在服务器返回了数据才会执行
 c)onload只要在实例对象之后写就可以
 d)send()方法必须在open()方法后边设置
--与get不同--
 e)加请求体就不是在url后边拼接了
 f)如果需要请求体数据,要在send()方法里设置请求体数据(一定要设置请求体格式)
 uname=abc&pwd=123  对应的请求体格式是allocation/x-www-form-urlencaded
 带有分割线的         对应的请求体格式是multipart/form-data
 uname=abc  换行  pwd=123   对应的格式是 text/plain

也可以像get一样遍历对象转换格式放入send中

let params = {
    uname: '张三',
    age: '23',
    myheight: '180'
};
// 目标格式: uname=张三&age=23&myheight=180

解决办法:遍历对象,可以拿到键和值

let arr = [];
for (key in params) {
    // 将每一个键值对保存在数组中
    // console.log(key + '=' + params[key]);
    arr.push(key + '=' + params[key])
};
let str = arr.join('&');
console.log(str);
// 将str加在send()中就行了   send(str)

四、封装自己的Ajax

function myAjax(opt) {
    let xhr = new XMLHttpRequest();
    // 查询参数构造部分---------------------------
    // 将查询参数由对象转为字符串,拼接在地址上
    if (opt.params) {
        // 用户设置了查询参数
        let obj = opt.params;
        let ary = [];
        for (key in obj) {
            ary.push(key + '=' + obj[key])
        }
        let url_str = ary.join('&');
        //查询类型和地址部分------------------------------
        xhr.open(opt.method, opt.url + '?' + url_str);
    } else {
        // 用户没设置查询参数
        // 查询类型和地址部分-- -- -- -- -- -- -- -- -- -- -- -- -- -- --
        xhr.open(opt.method, opt.url);
    }
    //发送-------------------------------------------
    // 判断用户是否设置了请求体
    if (opt.data) {
        // 有请求体,xhr.send(请求体数据);
        // 根据请求体类型发送请求体数据xhr.send(请求体数据);
        if (opt.data instanceof FormData) {
            //如果是FormData格式数据
            //编辑请求体格式
            // xhr.setRequestHeader('content-type', 'multipart/form-data')
            xhr.send(opt.data);



            // 回调函数构造部分-------------------------------
            xhr.onload = function() {
                // console.log(this.response)
                opt.success(JSON.parse(this.response));
            };



            return;
        }
        if (opt.data instanceof Object) {
            //如果是Object格式数据
            let obj = opt.data;
            let ary = [];
            for (key in obj) {
                ary.push(key + '=' + obj[key])
            }
            let data_str = ary.join('&');

            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
            xhr.send(data_str);



            // 回调函数构造部分-------------------------------
            xhr.onload = function() {
                // console.log(this.response)
                opt.success(JSON.parse(this.response));
            };


            return;
        }
        // console.log(opt.url)
    } else {
        // 没有请求体
        //发送无请求体的ajax请求
        xhr.send();
        // console.log(opt.url)


        // 回调函数构造部分-------------------------------
        xhr.onload = function() {
            // console.log(this.response)
            opt.success(JSON.parse(this.response));
        };
    }
}