很多人跟我一样用习惯了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 }
结语:个人觉得这个比喻还是比较好记的,如果你看到这篇博客,希望对你有帮助,over~