前端面试--js基础(ajax封装)

// ajax的意思是通过js异步通信，从服务器请求xml文档提取出数据，并更新网页中对应的内容
// 创建ajax请求的步骤：
// 1、新建XMLHttpRequest对象
// 2、用open方法创建http请求
// 3、为上面的对象添加状态监听函数
// 4、设置请求头信息后发送http请求

// 简单实现Ajax请求
const SERVER_URL = "/server";
let xhr = new XMLHttpRequest();
// 创建 Http 请求
xhr.open("GET", SERVER_URL, true);
// 设置状态监听函数
xhr.onreadystatechange = function() {
  if (this.readyState !== 4) return;
  // 当请求成功时
  if (this.status === 200) {
    handle(this.response);
  } else {
    console.error(this.statusText);
  }
};
// 设置请求失败时的监听函数
xhr.onerror = function() {
  console.error(this.statusText);
};
// 设置请求头信息
xhr.responseType = "json";
xhr.setRequestHeader("Accept", "application/json");
// 发送 Http 请求
xhr.send(null);


// 使用Promise封装Ajax请求
function ajax(url){
    return new Promise((resolve,reject)=>{
        // 创建请求对象
        let xhr = new XMLHttpRequest();
        // 创建http请求
        xhr.open("GET",url,true);
        // 状态监听
        xhr.onreadystatechange = function(){
            // 表示后台数据没接收到,readyState为4表示接收完成
            if(readyState !== 4) return;
            // 判断请求状态
            if(this.status === 200){
                // 接收状态正常，接收response更新页面数据
                resolve(JSON.parse(this.response));
            }else{
                // 接收状态不正常，直接报错
                reject(new Error(this.statusText));
            }
        }
        // 错误监听
        xhr.onerror = function(){
            reject(new Error(this.statusText));
        }
        // 设置响应的数据类型和请求头信息
        xhr.responseType = 'json';
        // 设置请求头信息
        xhr.setRequestHeader("Accept","application/json");
        // 发送http请求
        xhr.send();
    })
}