前端面试提问ajax

Question

Ajax(XMLHttpRequest)怎么判断请求成功还是失败，原生JS有没有什么方法可以替代ajax

Answer 1

AJAX - onreadystatechange 事件

当请求被发送到服务器，服务器对我们的请求响应时，我们需要执行一些基于响应的任务。也就是每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    console.log("成功");
    }
}

原生js实现Ajax

var Ajax = {
    get: function(url,callback){
        var xhr=new XMLHttpRequest();
        xhr.open('GET',url,false);
        xhr.onreadystatechange=function(){
             //判断返回状态
            // readyState == 4说明请求已完成
            if(xhr.readyState==4){
                if(xhr.status==200 || xhr.status==304){
                    console.log(xhr.responseText);
                    callback(xhr.responseText);
                }
            }
        }
        xhr.send();
    },

    post: function(url,data,callback){
        var xhr=new XMLHttpRequest();
        xhr.open('POST',url,false);
        // 添加协议头，
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function(){
            //判断返回状态
            // readyState == 4说明请求已完成
            if (xhr.readyState==4){
                if (xhr.status==200 || xhr.status==304){
                    callback(xhr.responseText);
                }
            }
        }
        xhr.send(data);
    }
}