首页 > Web开发 > 详细

原生ajax--2

时间:2019-08-22 09:31:52      阅读:105      评论:0      收藏:0      [点我收藏+]

--请求超时 timeout与超时监听ontimeout
--后台休眠--sleep(10);//10秒
--图5

技术分享图片
---进度条---上传多个文件
<progress min=‘0‘ max=‘100‘ value=‘60‘></progress>
<input type="file" class="tempFile" multiple>---可多个文件上传
进度回调函数-已经上传的除以总的
图6技术分享图片

---三级联动
图7技术分享图片
监听下拉框-获取下标-
shengSelect.onchange = function(eve){
console.log(eve.target.selectedIndex);//获取下标
//获取值,数组差一个数
consoloe.log(shengList[eve.target.selectedIndex-1]);
}
-图8技术分享图片

----封装ajax-原生分析
function frankAjax(paramsObj){
(1)线处理paramsObj参数,把这个json格式的参数转换成必要的格式
a.如果是get请求,将参数拼接到url后面
{...}->[...]->join()->url-+join()
b.如果是post请求,则构建formData参数对象
formData.append(...,...);
(2)准备xhr对象,然后实现onreadystatechange,准备发送请求
xhr.onreadystatechang = function(){...};
(3)准备open()
xhr.open(...,...,true);
(4)准备send()
if(paramsObj.type ==‘get‘){ xhr.send(null);}
else if(paramsObj.type == ‘post‘){ xhr.send(formData);}
}


----封装ajax
//处理参数
图一技术分享图片
//准备xhr
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//当请求回来后,调用success字段
paramsObj.success(JSON.parse(xhr.responseText));
}
}
}
//预定url地址
xhr.open(paramsObj.type,paramsObj.url,true);
//发送
if(paramsObj.type.toLowerCase() == ‘get‘){
xhr.send(null);
}else if(paramsObj.type.toLowerCase() == ‘post‘){
xhr.send(formData);
}else{
console.log(‘请求类型错误‘);
}
frankAjax({
type:‘get‘,//post
url:‘‘,
data:{
},
success:function(res){
}
})

原生ajax--2

原文:https://www.cnblogs.com/fdxjava/p/11392345.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!