半个诗人
前端通信:ajax设计方案(一)---集成核心请求
报告,我要说话!xp被历史淘汰了,IE6 say goodbye了,太TM开心了,从此不要兼容IE6了,哈哈哈哈哈哈
报告,我要说话!IE这sb为啥不早点被杀掉呢,找工作听说要兼容IE,立马软了,唉唉唉唉唉唉
报告,我要说话!Jquery太丰富了,老子只用了几个功能,妈的,太不划算了,啊啊啊啊啊啊
......
好了,言归正传。对于想到整理ajax设计方案,原因如下:
- 从资源合理利用的角度以及网站优化角度去想,每次为了那几个功能,去引用一个框架,不划算
- 拜读了w3c的ajax的设计方案,包括level1和level2的规范,有种豁然开朗的感觉
- 有朋友遇到ajax的跨域方案,各种纠结在心里,导致内心不能舒畅
- 自己的框架底层也要需要用到ajax的基础功能,(get post请求,对于level2的上传暂时没用到)
- 最关键的也是之前对这块概念十分模糊,所以开始整理ajax这块的设计方案
介绍一些概念:
- 浏览器的同源策略:浏览器最基本的安全功能,同源是指,域名,协议,端口相同(所以我写的接口部署端口分别为1122和2211即不是同源,属于跨域)
- ajax:是一种技术方案,依赖的是CSS/HTML/Javascript,最核心依赖是浏览器提供的XMLHttpRequest对象,这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。
- XMLHttpRequest Level 1主要存在以下缺点:
-
- 受同源策略的限制,不能发送跨域请求;
- 不能发送二进制文件(如图片、视频、音频等),只能发送纯文本数据;
- 发送和获取数据的过程中,无法实时获取进度信息,只能判断是否完成;
- XMLHttpRequest Level 2中新增了以下功能:
-
- 可以发送跨域请求,在服务端允许的情况下;
- 支持发送和接收二进制数据;
- 新增formData对象,支持发送表单数据;
- 发送和获取数据时,可以获取进度信息;
- 可以设置请求的超时时间;
- XMLHttpRequest 兼容性如下:
- nginx:是一个高性能的HTTP和反向代理服务器
- IIS:微软开发的的服务器,window系统自带
开始准备如下:
- 纯前端代码
- 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 = 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 = dealWithParam(ajaxSetting,this,xhr));
//设置超时时间(只有异步请求才有超时时间)
ajaxParam.async?(xhr.timeout = ajaxSetting.time):(null);
//设置http协议的头部
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){this.postParam == undefined?(result =null):(result=this.postParam);return result;})(this.postParam));
测试代码如下:
前端同源测试代码
?1 | ajax.post( "/api/ajax1/ajaxT1/" ,{ "name" : "测试异步post请求" , "age" : "success" }, function (data){alert(data)}); //该接口在1122上 |
前端跨域测试代码
?1 | ajax.post( "http://192.168.0.3:2211/api/weixin/ajaxT2/" ,{ "name" : "测试跨域post请求" , "age" : "success" }, function (data){alert(data)}); |
后端跨域 接口代码
?1 2 3 4 5 6 7 8 9 10 11 | /// <summary> /// 测试跨域请求 /// </summary> /// <param name="module"></param> /// <returns></returns> [Route( "ajaxT2" )] public String kuaAjaxT2([FromBody]TModule module) { String result = "跨域post传输成功:" +module.name+ "-" +module.age; return result; } |
后端同源 接口代码
?1 2 3 4 5 6 7 8 9 10 11 | /// <summary> /// 测试ajax同源请求 /// </summary> /// <param qwer="code"></param> /// <returns>result</returns> [Route( "ajaxT2" )] public String GetkuaAjaxT1( string name, string age) { String result = "1J跨域成功:" + name + "-" + age; return result; } |
下面是各种浏览器的测试结果 (仅提供同源post请求和跨域post请求):
同源测试:
chrome
IE8-9
IE10+
firefox
opera
safari
edge
跨域测试:
chrome
IE8-9
IE10+
firefox
opera
safari
edge
具体代码已封装成一个js库,可自我定制开发,供大家根据项目需求,自己开发定制,不过我已经封装了一些常用请求
- 异步get请求 -- ajax.get
- 异步post请求 -- ajax.post
- 同步post请求 -- ajax.post_sync
- 通用配置请求 -- ajax.common
PS:该方法为方便使用,不用的可以直接使用精简版本,只有common方法
代码和测试页面已上传github,后台接口如果大家想测试的话,就自己写一个把,后台代码就不上传了
感谢大伙提的意见: 1. 跨域不需要在前端设置跨域请求报文头,现已删除 ==> author: keepfool (cnblogs)
2. 更新tool方法,完善结构 ==> author: pod4g (github)
3. 去除参数中的跨域设置,post方法已经支持跨域 ==>author: wYhooo (github)
github地址 :https://github.com/GerryIsWarrior/ajax 希望大家多点几颗星,增加精简版本,只有common方法的版本
PS:连续搞了半个月的研究,研究ajax的设计方案,总体说来还是有很大的收获的,对浏览器的了解,js的了解,服务器技术的了解,后端的温习还是有很大的进步的,特别是解决问题的能力,感觉又上了一个level,虽然暂时还没去大公司,还在小公司游荡,但是从没有放弃对技术执着的追求。下一个目标bat,希望可以通过我的努力,进去,再接受一番洗礼。不过到时候有人内推就好了,哎。为了前端架构师的梦想,为了自己的前端架构,继续加油努力下去。技术的未来,不会远...
个人介绍
性别:男
爱好:女
近期目标:前端架构师
职业目标:全栈架构师
github地址:https://github.com/GerryIsWarrior
posted on 2016-11-30 08:55 仲强 阅读(2808) 评论(25) 编辑 收藏
评论
#1楼 2016-11-30 09:47 牛腩
支持支持 支持(0)反对(0)http://pic.cnblogs.com/face/u41249.jpg
#2楼[楼主] 2016-11-30 10:23 仲强
@ 牛腩
3q 一起加油努力 支持(0)反对(0)http://pic.cnblogs.com/face/801930/20161012082514.png
#3楼 2016-11-30 10:43 batsing
为什么要放弃jQuery……就那么几十K,而且是一次请求,之后一直缓存在浏览器的 支持(0)反对(0)http://pic.cnblogs.com/face/681503/20141018114352.png
#4楼 2016-11-30 11:58 liduanjie
学习了 支持(0)反对(0)
#5楼[楼主] 2016-11-30 14:13 仲强
@ batsing
站在架构师的角度你就不会这么去想了,你要考虑到资源的加载和合理利用,你的角度就不是对的,如果你考虑到移动端2G网络下的传输等等,考虑要全面一点。而且框架总有过时的时候,原声还是王道。底层是永远不变的饭碗 支持(2)反对(2) http://pic.cnblogs.com/face/801930/20161012082514.png
#6楼[楼主] 2016-11-30 14:13 仲强
@ liduanjie
嗯嗯 一起加油 支持(0)反对(0) http://pic.cnblogs.com/face/801930/20161012082514.png
#7楼 2016-11-30 14:32 batsing
@ 仲强
引用@
batsing
站在架构师的角度你就不会这么去想了,你要考虑到资源的加载和合理利用,你的角度就不是对的,如果你考虑到移动端2G网络下的传输等等,考虑要全面一点。而且框架总有过时的时候,原声还是王道。底层是永远不变的饭碗
真心不觉得就一个库文件还跟架构能扯上什么关系,就算是2G网络(移动和联通的2G还能上网吗,我老家是不能的),那这28k的大小也算不是什么,也就一张小图片的大小而已。前端的库jQuery和zepto我也不是没有仔细研究对比过,可以看看 我以前写的文章 支持(0)反对(0) http://pic.cnblogs.com/face/681503/20141018114352.png
#8楼 2016-11-30 15:37 小不了
赞一个! 支持(0)反对(0)
#9楼 2016-11-30 19:10 TCG2008
4K其实也很大了,抛弃旧的浏览器,根本不需要那么大。不仅仅是客户网络问题,还有服务器网络问题,所以我觉得没必要用大的库。 支持(0)反对(0)
#10楼 2016-11-30 19:57 keepfool
这个ajax库设计得有点啰嗦了。
根据你所提供的代码来看,只需要两个方法就可以了get和post。
如果增加pust和delete,你是不是要copy & paste?
跨域更多的是浏览器和服务端的事儿,你在请求头里设置"Access-Control-Allow-Origin"没什么用吧?
同步、异步还需要抽出两个方法?
tools为何要封装在ajax库里面?
如果哪天需要支持JSONP了,ajax这个命名也不太够用。 支持(1) 反对(0) http://pic.cnblogs.com/face/341820/20160514094621.png
#11楼[楼主] 2016-11-30 20:38 仲强
@ batsing
可能个人理解不一样 强迫症把 我不喜欢这样的浪费 我喜欢那种用多少是多少的这种极致的感觉 支持(0)反对(0)http://pic.cnblogs.com/face/801930/20161012082514.png
#12楼 2016-11-30 20:41 清香白莲素还真
最起码要支持promise模式吧 支持(0)反对(0)
#13楼[楼主] 2016-11-30 20:42 仲强
@ TCG2008
嗯嗯 其实说白了 一个function就差不多了 但是因为要配置很多参数给其他人一起使用,如果我就自己使用的话,顶多就是那些核心的方法,就1K多 支持(0)反对(0) http://pic.cnblogs.com/face/801930/20161012082514.png
#14楼[楼主] 2016-11-30 21:36 仲强
@ keepfool
1.其实说白了核心就一个common就结束了,不管服务器怎么拓展,我预留了拓展的方法,在参数处理那块。
2.关于跨域的Access-Control-Allow-Origin确实不需要,刚刚测试过了。这个可以删除,3q
3,关于那些同异步的东西,还有get、post的东西,是我自己封装自己用的,就跟jquery一样,有时候每次设置很多参数很烦,所以直接$.get,$.post的
4,tool封装在ajax中,只允许我内部使用,不抛出去给外部使用的。我抛出去的,就是我想要给别人用的东西,具体可以参考 这篇文章
5,至于jsonp,不就是跨域get请求吗?有必要去拓展吗?我总结这个的时候跨域我都看了一遍,jsonp,代理跨域,ngx转发跨域处理等等 支持(0)反对(0) http://pic.cnblogs.com/face/801930/20161012082514.png
#15楼[楼主] 2016-11-30 21:41 仲强
@ 清香白莲素还真
promise模式正在拜读,之前没有遇到过 支持(0)反对(0) http://pic.cnblogs.com/face/801930/20161012082514.png
#16楼 2016-11-30 22:52 失落的野火
mark 支持(0)反对(0) http://pic.cnblogs.com/face/u60959.jpg
#17楼 2016-12-01 08:11 jifsu
呵呵 支持(0)反对(0) http://pic.cnblogs.com/face/u88301.gif
#18楼[楼主] 2016-12-01 08:56 仲强
@ 失落的野火
嗯嗯 一起加油! 支持(0)反对(0) http://pic.cnblogs.com/face/801930/20161012082514.png
#19楼[楼主] 2016-12-01 08:59 仲强
@ 清香白莲素还真
promise模式,确实是很优雅的写法,说通俗一点,就是很装逼的一种写法,对于新手或者并不知道这个玩意的东西,很蒙蔽。所以昨天考虑了一下决定暂时不支持,因为毕竟是让大家一起学习的东西,可私下里去搞搞这玩意 支持(0)反对(0) http://pic.cnblogs.com/face/801930/20161012082514.png
#20楼 2016-12-01 12:49 小不了
zhuanlan.zhihu.com/p/24086353?…=dreawer
感谢博主的内容~ 支持(0)反对(0)
#21楼 2016-12-02 11:13 小不了
网友评论:github的markdown里的第一个标题有错别字。 支持(0)反对(0)
#22楼[楼主] 2016-12-02 17:26 仲强
@ 小不了
今天不小心把md文件删了,重新搞了一遍,悲催 支持(0)反对(0) http://pic.cnblogs.com/face/801930/20161012082514.png
#23楼 2016-12-07 11:56 小不了
@ 仲强
这。。。。楼主挺住! 支持(0)反对(0)
#24楼 2016-12-13 11:25 goodycc
postman是不错,apizza.cc 也可以 支持(0)反对(0)
#25楼[楼主]35800892016/12/14 9:27:57 2016-12-14 09:27 仲强
@ goodycc
嗯嗯 极大的方便了开发测试和调试 支持(0)反对(0) http://pic.cnblogs.com/face/801930/20161012082514.png 刷新评论刷新页面返回顶部 注册用户登录后才能发表评论,请 登录 或 注册,访问网站首页。 【推荐】超50万VC++源码: 大型工控、组态\仿真、建模CAD源码2018!
【腾讯云】小程序普惠节精美模板1元起
最新IT新闻:
· 乐视网复牌第二日再跌停 逾800万手卖单排队出逃
· 知名80后创业者茅侃侃离世 家中开煤气自杀
· 支付宝今年香港上市?马云终于发话了!
· 马云达沃斯论坛谈全球贸易:贸易不是武器,而是解决方案
· 两家机构数据显示:小米超三星 成印度手机老大
» 更多新闻... 最新知识库文章:
· 领域驱动设计在互联网业务开发中的实践
· 步入云计算
· 以操作系统的角度述说线程与进程
· 软件测试转型之路
· 门内门外看招聘
» 更多知识库文章...
导航
公告
昵称:仲强园龄:2年5个月
粉丝:73
关注: 0 +加关注
|
||||||
日 | 一 | 二 | 三 | 四 | 五 | 六 |
---|---|---|---|---|---|---|
31 | 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 |
统计
- 随笔 - 58
- 文章 - 0
- 评论 - 209
- 引用 - 0
搜索
常用链接
我的标签
随笔分类
- C#(1)
- CSS(13)
- github使用节奏(1)
- HTML(2)
- Javascript(27)
- Jquery(1)
- sql(1)
- 前端架构(14)
- 设计师(2)
- 实用插件(3)
- 移动web开发(3)
随笔档案
- 2018年1月 (1)
- 2017年10月 (2)
- 2017年9月 (1)
- 2017年6月 (1)
- 2017年2月 (2)
- 2017年1月 (2)
- 2016年12月 (3)
- 2016年11月 (2)
- 2016年10月 (2)
- 2016年9月 (1)
- 2016年7月 (1)
- 2016年6月 (1)
- 2016年5月 (1)
- 2016年3月 (2)
- 2016年2月 (36)
积分与排名
- 积分 - 32332
- 排名 - 11378
最新评论
- 1. Re:前端性能优化:客户端从输入到展示讲解
- @Cyclone77github排版已完成,也增加了一些内容。完善了...
- --仲强
- 2. Re:前端性能优化:客户端从输入到展示讲解
- @好想睡觉想做成一个大纲,作为一个指导性文档...
- --仲强
- 3. Re:前端性能优化:客户端从输入到展示讲解
- 好文
- --好想睡觉
- 4. Re:前端性能优化:客户端从输入到展示讲解
- @Cyclone77嗯嗯 md文件当时没仔细看直接上传了,过会儿更新一下,3q...
- --仲强
- 5. Re:前端性能优化:客户端从输入到展示讲解
- 支持。内容很不错,markdown格式有点问题
- --Cyclone77
阅读排行榜
- 1. 记一次阿里资深前端/专家面试的经历(3656)
- 2. 前端通信:ajax设计方案(四)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组(2889)
- 3. 前端通信:ajax设计方案(一)---集成核心请求(2807)
- 4. 面向UI编程框架:ui.js框架思路详细设计(2498)
- 5. 前端js的书写规范和高效维护的方案_自我总结使用的方案(2344)
评论排行榜
- 1. 以整体思维看问题:解决单页应用,系统角色请求覆盖身份唯一标识(本项目中是session_id命名的)发送请求问题(25)
- 2. 前端通信:ajax设计方案(一)---集成核心请求(25)
- 3. 面向UI编程框架:ui.js框架思路详细设计(19)
- 4. 前端通信:ajax设计方案(四)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组(18)
- 5. 前端js的书写规范和高效维护的方案_自我总结使用的方案(18)
推荐排行榜
- 1. 前端js的书写规范和高效维护的方案_自我总结使用的方案(24)
- 2. 前端通信:ajax设计方案(四)--- 集成ajax上传技术 大文件/超大文件前端切割上传,后端进行重组(18)
- 3. 前端通信:ajax设计方案(一)---集成核心请求(16)
- 4. 前端通信:ajax设计方案(二)---集成轮询技术(8)
- 5. 前端性能优化:客户端从输入到展示讲解(7)
博客园
Copyright © 仲强