面试时怎样回答：你对原生ajax的理解

Posted 2021-11-29 1463069300limingzhi

很多人跟我一样用习惯了jq封装好的$.ajax，但是面试时，原生ajax是很多面试官喜欢问的问题，今天再查资料，打算好好整理一下自己理解的原生ajax。

首先，jq的ajax：一般我常用的参数就是这些，不过可以配置的参数不止这些

$.ajax({
    url:‘‘,//请求文件路径
    type:‘‘,//请求方式GET POST
    data:{},//要发给服务器的数据参数
    dataType:‘‘,//希望接口返回的数据格式json,string等等
    success:function(){
        // 请求成功的回调
    },
    error:function(){
        // 请求失败的回调
    }
})

接下来，jq毕竟只是一个类库，原生js还是要弄清楚的，那原生的ajax怎么写呢：

一个ajax的请求可以形象的比喻为一次打电话的过程：

//1 拿出手机        创建XMLHttpRequest对象
//2 拨号            连接到服务器
//3 说话            发送请求
//4 等待对方回应     服务器响应请求

//1 拿出手机        创建XMLHttpRequest对象
if(window.XMLHttpRequest){
    var OAjax = new XMLHttpRequest()
}else{
    // 兼容ie6及以下写法
    var OAjax = new ActiveXObject("Misrcsoft.XMLHTTP")
}
//2 拨号            连接到服务器
OAjax.open(‘GET‘,‘a.html?t="new Date().getTime()"‘,‘true‘);//请求方式，请求路径,t为了消除缓存，是否异步
//3 说话            发送请求
OAjax.send();
//4 等待对方回应     服务器响应请求
OAjax.onreadystatechange = function(){
    //OAjax.readyState,监听浏览器和服务器之间的交互到哪一步了
        // 0->未初始化，还没有调用open方法
        // 1->载入，已调用send()方法，正在发送请求
        // 2->载入完成，send()方法已完成，已收到全部响应内容
        // 3->解析，解析响应的内容
        // 4->完成，相应内容解析完成，可以在客户端调用
    if(OAjax.readyState == 4){
        if(OAjax.status == 200){
            // 请求a.html成功，responseText为服务器响应的内容
            console.log(‘ajax请求成功‘,OAjax.responseText);
            
        }else{
            // 状态不为200
            console.log(‘ajax请求失败‘);
            
        }
    }
}