####整理ajax设计方案原因如下
- 从资源合理利用的角度以及网站优化角度去想,每次为了那几个功能,去引用一个框架,不划算
- 拜读了w3c的ajax的设计方案,包括level1和level2的规范,有种豁然开朗的感觉
- 有朋友遇到ajax的跨域方案,各种纠结在心里,导致内心不能舒畅
- 自己的框架底层也要需要用到ajax的基础功能,(get post请求,对于level2的上传暂时没用到)
- 最关键的也是之前对这块概念十分模糊,所以开始整理ajax这块的设计方案
####一些概念
- 浏览器的同源策略:浏览器最基本的安全功能,同源是指,域名,协议,端口相同(所以我写的接口部署端口分别为1122和2211即不是同源,属于跨域)
- ajax:是一种技术方案,依赖的是CSS/HTML/Javascript,最核心依赖是浏览器提供的XMLHttpRequest对象,这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。
- nginx:是一个高性能的HTTP和反向代理服务器
- IIS:微软开发的的服务器,window系统自带
- XMLHttpRequest 兼容性如下:
- XMLHttpRequest Level 1主要存在以下缺点:
- 受同源策略的限制,不能发送跨域请求;
- 不能发送二进制文件(如图片、视频、音频等),只能发送纯文本数据;
- 发送和获取数据的过程中,无法实时获取进度信息,只能判断是否完成;
- XMLHttpRequest Level 2中新增了以下功能:
- 可以发送跨域请求,在服务端允许的情况下;
- 支持发送和接收二进制数据;
- 新增formData对象,支持发送表单数据;
- 发送和获取数据时,可以获取进度信息;
- 可以设置请求的超时时间;
####开始准备
- 纯前端代码
- nginx反向代理服务器(前后端分离用)
- 后台2套接口(端口:1122,端口:2211) PS:一份必须支持跨域请求
- IIS服务器(部署后台接口)
- chrome插件postman(接口测试)
- IE、chrome、firefox、Opera、safari、edge 6大浏览器,做兼容性测试
###XMLHttpRequest发送请求步骤
- 实例化XMLHttpRequest对象(IE8-9是微软封装的ActiveXObject('Microsoft.XMLHTTP'))获得一个实例
- 通过实例open一个请求,设置发送类型和接口以及同异步
- 如有需要配置报文,以及各种事件(success,error,timeout等)
- 调用实例的send方法,发送http/https的请求
- 服务器回调,客户端接收,并做响应处理
####关键代码 //创建xhr对象 var xhr = tool.createXhrObject();
//针对某些特定版本的mozillar浏览器的BUG进行修正
xhr.overrideMimeType?(xhr.overrideMimeType("text/javascript")):(null);
//针对IE8的xhr做处理 PS:ie8下的xhr无xhr.onload事件,所以这里做判断
xhr.onload===undefined?(xhr.xhr_ie8=true):(xhr.xhr_ie8=false);
//参数处理(get和post),包括xhr.open get:拼接好url再open post:先open,再设置其他参数
ajaxSetting.data === ""?(null):(xhr = tool.dealWithParam(ajaxSetting,this,xhr));
//设置超时时间(只有异步请求才有超时时间)
ajaxSetting.async?(xhr.timeout = ajaxSetting.time):(null);
//设置http协议的头部
tool.each(ajaxSetting.requestHeader,function(item,index){xhr.setRequestHeader(index,item)});
//onload事件(IE8下没有该事件)
xhr.onload = function(e) {
if(this.status == 200||this.status == 304){
ajaxSetting.dataType.toUpperCase() == "JSON"?(ajaxSetting.success(JSON.parse(xhr.responseText))):(ajaxSetting.success(xhr.responseText));
}else{
/*
* 这边为了兼容IE8、9的问题,以及请求完成而造成的其他错误,比如404等
* 如果跨域请求在IE8、9下跨域失败不走onerror方法
* 其他支持了Level 2 的版本 直接走onerror
* */
ajaxSetting.error(e.currentTarget.status, e.currentTarget.statusText);
}
};
//xmlhttprequest每次变化一个状态所监控的事件(可拓展)
xhr.onreadystatechange = function(){
switch(xhr.readyState){
case 1://打开
//do something
break;
case 2://获取header
//do something
break;
case 3://请求
//do something
break;
case 4://完成
//在ie8下面,无xhr的onload事件,只能放在此处处理回调结果
xhr.xhr_ie8?((xhr.status == 200 || xhr.status == 304)?(ajaxSetting.dataType.toUpperCase() == "JSON"?(ajaxSetting.success(JSON.parse(xhr.responseText))):(ajaxSetting.success(xhr.responseText))):(null)):(null);
break;
};
};
//ontimeout超时事件
xhr.ontimeout = function(e){
ajaxSetting.timeout(999,e?(e.type):("timeout")); //IE8 没有e参数
xhr.abort(); //关闭请求
};
//错误事件,直接ajax失败,而不走onload事件
xhr.onerror = function(e){
ajaxSetting.error();
};
//发送请求
xhr.send((function(result){result == undefined?(result =null):(null);return result;})(this.postParam));
###测试代码 ####前端同源测试代码 ajax.post("/api/ajax1/ajaxT1/",{"name":"测试异步post请求","age":"success"},function(data){alert(data)}); //该接口在1122上 ####前端跨域测试代码 ajax.post("http://192.168.0.3:2211/api/weixin/ajaxT2/",{"name":"测试跨域post请求","age":"success"},function(data){alert(data)}); ####后端跨域接口代码 ///
#####跨域测试 ######chrome ######IE8-9 ######IE10+ ######firefox ######opera ######safari ######edge
####1.4 版本更新 --- 轮询技术的实现(需要后台接口支持) /* * 长轮询的实现 * a. 业务上只需要得到服务器一次响应的轮询 * b. 业务上需要无限次得到服务器响应的轮询 * * param: url 请求接口地址 * data 请求参数 * successEvent 成功事件处理 * isAll 是否一直请求(例如,等待付款完成业务,只需要请求一次) * timeout ajax超时时间 * timeFrequency 每隔多少时间发送一次请求 * error 错误事件 * timeout 超时处理 * */ longPolling:function(url,data,successEvent,isAll,timeout,timeFrequency,errorEvent,timeoutEvent){ var ajaxParam ={ time:timeout, type:"post", url:url, data:data, async:false, success:function(date){ successEvent(data); var timer = setTimeout( function(){ tempObj.longPolling(url,data,successEvent,isAll,error,timeoutEvent); },timeFrequency); //业务需求判断,是否只需要得到一次结果 if (!isAll) clearTimeout(timer); }, //如果走了error说明该接口有问题,没必要继续下去了 error:errorEvent, timeout:function(){ timeoutEvent(); setTimeout(function(){ tempObj.longPolling(url,data,successEvent,isAll,error,timeoutEvent) },timeFrequency); } }; ajax.common(ajaxParam); }
考虑到业务需求,集成了一次isAll参数有2个意义
聊天系统会要一直需求轮询,不间断的向后台使用数据,所以isAll = true
等待付款业务只需要得到后台一次响应是否支付成功,所以isAll = false
####1.5.0版本更新 --- ajax的上传文件技术 /* * ajax上传文件 * url 文件上传地址 * fileSelector input=file 选择器 * size 文件限制大小 * fileType 文件限制类型 mime类型 * success 上传成功处理 * error 上传失败处理 * timeout 超时处理 * * return: status: 0 请选择文件 * 1 超出文件限制大小 * 2 非允许文件格式 * */ upload:function(url,fileSelector,size,fileType,success,error,timeout){ var formdata = new FormData(),fileNode = document.querySelector(fileSelector),fileCount = fileNode.files.length,data={},result ={}; //以下为上传文件限制检查 if ( fileCount > 0 ){ tool.each(Array.prototype.slice.call(fileNode.files),function(value){ //检查文件大小 if (value.size > size){ result["status"] = 1; result["errMsg"] = "超出文件限制大小"; }else{ //检查文件格式.因为支持formdata,自然支持数组的indexof(h5) if (fileType.indexOf(value.type)=== -1 ){ result["status"] = 2; result["errMsg"] = "非允许文件格式"; }else{ formdata.append(value.name,value); }; }; }); }else{ result["status"] = 0; result["errMsg"] = "请选择文件"; };
if (result.status !== undefined) return result; //如果有错误信息直接抛出去,结束运行
var ajaxParam ={
type:"post",
url:url,
data:formdata,
isFormData:true,
success:success,
error:error,
timeout:timeout
};
ajax.common(ajaxParam);
}
如果想要看文件上传具体内容和测试各种结果,请转到这片博客:http://www.cnblogs.com/GerryOfZhong/p/6274536.html
####1.5.1版本更新 --- ajax的大文件/超大文件上传技术 (需后台配合) /* * ajax大文件切割上传(支持单个文件) -- level2的新特性,请保证你的项目支持新的特性再使用 * url 文件上传地址 * fileSelector input=file 选择器 * cutSize 切割文件大小 * fileType 文件限制类型 mime类型 * successEvent 上传成功处理 * progressEvent 上传进度事件 * errorEvent 上传失败处理 * timeoutEvent 超时处理事件 * * return: status: 0 请选择文件 * 1 非允许文件格式 * / upload_big:function(url,fileSelector,cutSize,fileType,successEvent,progressEvent,errorEvent,timeoutEvent){ var file = document.querySelector(fileSelector).files,result ={}; //以下为上传文件限制检查 if (file.length === 1){ if (fileType != ""){ if (fileType.indexOf(file.type)=== -1 ){ result["status"] = 1; result["errMsg"] = "非允许文件格式"; } } }else{ result["status"] = 0; result["errMsg"] = "请选择文件/只能上传一个文件"; }; if (result.status !== undefined) return result; //如果有错误信息直接抛出去,结束运行
//判断上传文件是否超过需要切割的大小
if (file[0].size > cutSize){
var fileArr = tool.cutFile(file[0],cutSize); //切割文件
cutFile_upload(fileArr);
}else{
return tempObj.upload(url,fileSelector,file[0].size,fileType,successEvent,errorEvent,timeoutEvent);
};
/*
* 切割文件上传,配合后台接口进行对接
* 传输参数:
* count -- 当前传输part的次数
* name -- 做过处理的文件名称
* file -- 上传的.part的切割文件
* isLast -- 是否为最后一次切割文件上传(默认值:"true" 字符串,只有最后一次才附加)
* */
function cutFile_upload(fileArr,count){
var formData = new FormData();
if (count == undefined){
count = 0;
formData.append("count",count);
formData.append("name",fileArr[0].name);
formData.append("file".name,fileArr[0].file);
}else{
if (count === fileArr.length-1){
formData.append("isLast","true")
};
formData.append("count",count);
formData.append("name",fileArr[count].name);
formData.append("file".name,fileArr[count].file);
};
var ajaxParam ={
type:"post",
url:url,
data:formData,
isFormData:true,
success:function(data){
/*
* data 参数设置 需要后台接口配合
* 建议:如果后台成功保存.part文件,建议返回下次所需要的部分,比如当前发送count为0,则data返回下次为1。
* 如果保存不成功,则可false,或者返回错误信息,可在successEvent中处理
*
* */
progressEvent(count+1,fileArr.length); //上传进度事件,第一个参数:当前上传次数;第二个参数:总共文件数
var currCount = Number(data);
if (currCount){
if (currCount != fileArr.length){
cutFile_upload(fileArr,currCount);
};
};
successEvent(data); //成功处理事件
},
error:errorEvent,
timeout:timeoutEvent
};
ajax.common(ajaxParam);
}
}
如果想要看文件上传具体内容和测试各种结果,请转到这片博客:http://www.cnblogs.com/GerryOfZhong/p/6295211.html
备注:ajax的上传技术,在es5+之后支持,浏览器的兼容性就是除了IE10以下,大部分都支持了
####具体代码已封装成一个js库,供大家根据项目需求,自己开发定制,不过我已经封装了一些常用请求
- 异步get请求 -- ajax.get
- 异步post请求 -- ajax.post
- 同步post请求 -- ajax.postSync
- 同步postForm请求 -- ajax.postFormData
- 轮询请求 -- ajax.longPolling
- 上传文件请求 -- ajax.upload
- 大文件切割上传请求 -- ajax.upload_big
- 通用配置请求 -- ajax.common
####最近在研究原声js的ajax的技术和设计方案,总体说来还是有很大的收获的,对浏览器的了解,js的了解,服务器技术的了解,后端的温习还是有很大的进步的,特别是解决问题的能力,感觉又上了一个level。技术的未来,不会远...
###版本更新介绍
- 跨域不需要在前端设置跨域请求报文头,现已删除 ==>author:keepfool from cnblog
- 更新tool一些方法,拥抱es5+新技术 ==>author:pod4g from github
- 删除头部参数中的跨域参数设置 ==>author:wYhooo from github
- 集成ajax的轮询技术
- 集成ajax的上传文件技术,也更新了一些原来的代码
a. 增加FormData数据传输方法
b. 新增各种类型判断方法判断类型
c. 更新each方法,判断如果传入参数obj为数组而且浏览器支持es5的新特性直接用数组的forEach方法
####个人介绍
- 性别:男
- 爱好:女
- 近期目标:前端架构师
- 职业目标:全栈架构师
- 博客:http://www.cnblogs.com/GerryOfZhong