SOURCE

// 手写Ajax请求
// GET请求
// (1)创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// (2)设置请求的参数，请求的方法、请求url。
xhr.open('get', '请求的url') //第三个参数可省略true:默认异步；false:表示同步
// (3)发送请求
xhr.send();
// (4)注册事件监听，onreadystatechange事件，状态发生改变时就会被调用
// 如果需要在数据完成请求回来后在调用，我们需要手动写一些判断逻辑
xhr.onreadystatechange = function () {
    // 为保证数据完整返回，一般判断两个值
    if (xhr.readyState == 4 && xhr.readyState == 200) {
        console.log('返回数据成功:' + JSON.stringify(xhr.responseText));

        // 伪代码：按业务需求，将接口返回的内容显示在页面上
        // document.querySelector('div').innerHTML=xhr.responseText;
    }
};


// POST请求
// （1）异步对象
var xhr = new XMLHttpRequest();
// （2）设置请求参数，请求的方法、请求url
xhr.open('get', '请求的url地址') // //第三个参数可省略true:默认异步；false:表示同步
// 如果想使用post提交数据，必须添加此行
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// （3）发送请求
xhr.send('name=fox%age=18');
// （4）注册事件
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.readyState == 200) {
        alert(xhr.responseText);
    }
};