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

93 阅读 0 评论 62 点赞

我是靠谱客的博主顺心小懒虫，最近开发中收集的这篇文章主要介绍面试时怎样回答：你对原生ajax的理解，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

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

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

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

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

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