前端面试ajax考点汇总
来源:互联网 发布:数控线切割编程3b代码 编辑:程序博客网 时间:2024/05/16 15:10
1. 手写一个ajax get方法
var xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){ if(xhr.readyState == 4){ if(xhr.status>=200 &&xhr.status<300 || xhr.status == 304){ console.log(xhr.responseText); } }}xhr.open('get','https://www.baidu.com',true);xhr.send(Null);
考点:
收到响应后,响应的数据会自动填充XHR对象的属性,因此readState、status和responseText属性要通过xhr去拿,而不是 回调函数的参数! 这是很多人容易 犯的一个错误。回调函数传回来的是event对象,该对象的target属性指向的次啊是XMLHttpRequest实例。最好也不要通过this去获取,因为作用域问题,有的浏览器中会报错,因此为了可靠,应使用xhr对象来获取这些属性。
readyState属性都代表什么?
0:未初始化。尚未调用open()方法;
1:启动。已经调用open()方法,但是未调用send()方法;
2:发送。已经调用send()方法,但尚未接收到响应;
3:接收。已经接收到部分响应数据;
4:完成。已经接收到全部响应数据。只要readyState属性的值由一个变成另一个,就会触发一个readystatechange事件,因此最好在open()之前制定onreadystatechange事件处理程序。
2 设置头部信息
使用setRequestHeader()方法设置自定义的请求头部信息。如:
xhr.setRequestHeader(‘MyHeader’,’MyValue’);
必须在open()方法之后,send()方法之前调用。
3 post请求,发生表单数据
方法一:
首先设置Content-Type头部信息为application/x-www-form-urlencoded;然后对表单进行序列化处理,创建一个字符串,最后发送字符串:
xhr.open('post','/posturl',true); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); var form=document.getElementById('form'); xhr.send(serialize(form));
方法二:
使用FormData对象,该方法不必设置请求头部。
var data= new FormData();data.append('name','value');//也可以通过项构造函数传表单元素var data=new FormDate(document.forms[0])
append()方法接收两个参数:键和值。
4 XMLHttpRequest 2级
- formData
- 超时设定
xhr.timeout = 1000
xhr.ontimeout= function(){} - load事件
xhr.onload=function(){}
该方法在接收到完整的响应数据时触发 - abort事件
调用abort()方法触发 progress事件
该事件在接收响应期间持续触发xhr.onload=function(event){}
event包含三个额外的属性:lengthComputable、position和totalSize,分别表示进度信息是否可用(boolean),已经接收的字节数和总字节数(根据响应头部中的Content-Length获取)
- 前端面试ajax考点汇总
- 笔试面试考点汇总
- 面试数据结构篇—单链表常考点汇总
- 前端面试常见问题汇总
- 前端面试内容汇总
- 前端面试问题汇总
- 前端面试题目汇总
- 面试考点
- 互联网大厂校招前端面试考点分享,你能答到第几题?
- AJAX面试汇总
- Web前端面试问题汇总
- Web前端面试题目汇总
- 开放式前端面试问题汇总
- Web前端面试题目汇总
- Web前端面试题目汇总
- Web前端面试题目汇总
- Web前端面试题目汇总
- Web前端面试题目汇总
- 通过定时任务处理数据缓存
- 从Redis中的BGSAVE命令谈起Fork—之二
- Github最火开源项目-RxjavaUtil
- MyEclipse+Tomcat+MAVEN环境搭建
- React Navigation 自认比较好的navigator组件(二)
- 前端面试ajax考点汇总
- React Navigation 自认比较好的navigator组件(三)
- 在MyEclispe中创建满足Maven的web项目
- js对象的浅拷贝和深拷贝
- 多进程编程的优缺点?
- 面试题25:二叉树中和为某一值的路径
- 使用log4j2实现日志数据脱敏
- 归并排序之Java实现
- 正态分布