如何写Ajax请求

html代码：

    <button>按钮</button>
    <div></div>

js代码：

var btn = document.querySelector('button');
var div = document.querySelector('div');

btn.addEventListener('click', function() {
    //初始化Ajax对象
    var xhr = new XMLHttpRequest();
    //调用Ajax的open方法，来确定请求地址和请求方法
    xhr.open('get', '../data/demo.txt?username = admin');
    //调用send方法向服务端传数据
    xhr.send();
    //进行事件绑定，处理服务端返回的结果
    //0：表示未初始化
    //1：表示open方法调用完毕
    //2：表示send方法调用完毕
    //3：服务端返回部分结果
    //4：服务端反回了所有的结果

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log(xhr.status); //状态码
            console.log(xhr.statusText); //状态字符串
            console.log(xhr.getAllResponseHeaders); //所有响应头
            console.log(xhr.response); //响应体
            var str = String(xhr.response);
            str = str.split('。');
            str.forEach(function(item) {
                var h2 = document.createElement('h2');
                h2.innerText = item;
                div.appendChild(h2)
            })
         }
     }
})