篇首语：本文由编程笔记#小编为大家整理，主要介绍了重拾Ajax相关的知识，希望对你有一定的参考价值。
本来想专门学习一个Fetch API的相关知识，然后从XMLHttpRequest对象开始看起，看着看着，突然发现自己每天都在使用的ajax竟然还有好多知识点都不熟悉，细思极恐，于是乎从MDN到W3C文档，各种百度之后，终于简单整理了一份有关于ajax的学习笔记，一方面加深印象，另一方面便于查阅，如有批漏，敬请指正。
XMLHttpRequest一开始只是微软浏览器提供的一个接口，后来各大浏览器纷纷效仿也提供了这个接口，再后来W3C对它进行了标准化，提出了XMLHttpRequest标准。XMLHttpRequest标准又分为Level 1和2008年的Level 2。
传统的Ajax请求，使用的是XMLHttpRequest对象，如果是IE浏览器的IE6或以下的版本中，使用的是ActiveXObject对象。
XMLHttpRequest Level 1 主要存在以下缺点：
XMLHttpRequest Level 2 中新增了以下功能：
XMLHttpRequest 的实例open() 与 send() 分别用于建立连接和发送数据var xhr = creatXHR(); xhr.Onreadystatechange= readyCallback; xhr.open(); xhr.send(); function creatXHR(){ if(window.XMLHttpRequest) return new XMLHttpRequest(); var created = false; if(window.ActiveXObject){ var versiOns= [‘MSXML2.XMLHttp.6.0‘, ‘MSXML2.XMLHttp.3.0‘, ‘MSXML2.XMLHttp‘]; while(versions.length){ try{ var oXhr = new ActiveXObject(versions.shift()); created = true; return xhr; }catch(e){} } } if(!created){ throw new Error(‘您的浏览器版本过低，无法创建异步对象，请升级您的浏览器‘) } } function readyCallback(){ if(this.readyState === 4){ if(this.status >= 200 && xhr.status <300 || xhr.status == 304){ console.log(this.responseText); }else{ console.log(this.status, this.statusText) } } } |
跨域请求一张图片，并打印进度
var xhr = new XMLHttpRequest(); xhr.timeout=3000; xhr.respOnseType= ‘blob‘; xhr.Onloadstart= onLoadStart; xhr.Onload= onLoad; xhr.Onloadend= onLoadEnd; xhr.Onerror= onError; xhr.Onabort= onAbort; xhr.Ontimeout= onTimeout; xhr.Onprogress= onProgress; xhr.open(‘post‘,‘http://7xi480.com1.z0.glb.clouddn.com/ChMkJlbKzE6IPzkoABFpT19gRYgAALI0wOYts8AEWln666.jpg‘) xhr.send(data); function onLoad(e){ console.log(‘成功‘); document.getElementById(‘imgBox‘).src = URL.createObjectURL(xhr.response); } function onError(e){ console.log(‘失败:‘, xhr.statusText) } function onAbort(e){ console.log(‘异步请求已经取消‘) } function onProgress(e){ if(e.total>0) console.log(Math.ceil(e.loaded / e.total *100)); } function onTimeout(){ console.log(‘超时‘); } function onLoadStart(e){ console.log(‘开始‘); } function onLoadEnd(e){ console.log(‘完成‘); } |
open的第三个参数async，表示是否是异步请，默认是true
如果aync是false，发送同步请求，那么请求的配置会有一些限制：
xhr.timeout 必须为 0xhr.withCredentials 必须为 falsexhr.responseType 必须为""（注意置为"text"也不允许）页面中应该尽量避免使用sync同步请求:
因为我们无法设置请求超时时间（xhr.timeout为0，即不限时）。在不限制超时的情况下，有可能同步请求一直处于pending状态，服务端迟迟不返回响应，这样整个页面就会一直阻塞，无法响应用户的其他交互。
responseType是xhr level 2新增的属性，用来指定xhr.response的数据类型，目前还存在些兼容性问题，可取值如下:
"" 如果没有值，默认返回String"text" String字符串"document" Document对象 希望返回 XML 格式数据时使用"json" Javascript 对象 存在兼容性问题，IE10/IE11不支持"blob" Blob对象"arrayBuffer" ArrayBuffer对象xhr.readyState 只读属性，用于追踪Ajax请求过程的不同状态，有以下几个取值：
0 UNSENT (初始状态，未打开) 此时xhr对象被成功构造，open()方法还未被调用1 OPENED (已打开，未发送) open()方法已被成功调用，send()方法还未被调用。注意：只有xhr处于OPENED状态，才能调用xhr.setRequestHeader()和xhr.send(),否则会报错2 HEADERS_RECEIVED (已获取响应头) send()方法已经被调用, 响应头和响应状态已经返回3 LOADING (正在下载响应体) 响应体(response entity body) 正在下载中，此状态下通过xhr.response可能已经有了响应数据4 DONE (整个数据传输过程结束) 整个数据传输过程结束，不管本次请求是成功还是失败
xhr.Onreadystatechange= function () { switch(xhr.readyState){ case 1: //OPENED //do something break; case 2://HEADERS_RECEIVED //do something break; case 3://LOADING //do something break; case 4://DONE //do something break; } |
xhr.send(data) 的参数data可以是以下几种类型：
xhr.send(data)中data参数的数据类型会影响请求头部content-type的默认值：
text/html;charset=UTF-8;否则为application/xml;charset=UTF-8；text/plain;charset=UTF-8；multipart/form-data; boundary=[xxx]上传和下载的异步处理事件是不同的：
| 事件 | 触发条件 |
|---|---|
onreadystatechange | 每当 xhr.readyState 改变时触发；但xhr.readyState由非0值变为0时不触发。 |
onloadstart | 调用xhr.send()方法后立即触发，若xhr.send()未被调用则不会触发此事件。 |
onprogress | xhr.upload.onprogress在上传阶段(即xhr.send()之后，xhr.readystate=2之前)触发，每50ms触发一次；xhr.onprogress在下载阶段（即xhr.readystate=3时）触发，每50ms触发一次。 |
onload | 当请求成功完成时触发，此时xhr.readystate=4 |
onloadend | 当请求结束（包括请求成功和请求失败）时触发 |
onabort | 当调用xhr.abort()后触发 |
ontimeout | xhr.timeout不等于0，由请求开始即onloadstart开始算起，当到达xhr.timeout所设置时间请求还未结束即onloadend，则触发此事件。 |
onerror | 在请求过程中，若发生Network error则会触发此事件（若发生Network error时，上传还没有结束，则会先触发xhr.upload.onerror，再触发xhr.onerror；若发生Network error时，上传已经结束，则只会触发xhr.onerror）。注意，只有发生了网络层级别的异常才会触发此事件，对于应用层级别的异常，如响应返回的xhr.statusCode是4xx时，并不属于Network error，所以不会触发onerror事件，而是会触发onload事件。 |
当请求一切正常时，相关的事件触发顺序如下：
发生abort/timeout/error异常的处理
在请求的过程中，有可能发生 abort/timeout/error这3种异常。那么一旦发生这些异常，xhr后续会进行哪些处理呢？后续处理如下：
既然学习了这么多的ajax相关知识，那么是时候学习致用了，我结合之前学过的Promise，封装一个简单的异步请求工具类：
首先我希望这个ajax模块具有以下功能
http(‘xx.json‘, { options })api.news.get({})http({data:{}, method:‘Post‘, url:‘xx.json‘})// api.js 集中管理api接口 var http = require(./http) var api = { news: http(‘api/news‘,{ cache: false //所有news下的接口都不缓存 }), users: http(‘api/users‘) } //业务模块调用api.js var api = require(‘api.js‘) api.news.get({uname:‘xxx‘, pwd:123}) .then(res=>console.log(res)) .catch(err=>console.log(err)) api.news.post({uname:‘xxx‘, pwd:123}) .then(res=>console.log(res)) .catch(err=>console.log(err)) // 类似于jQuery的使用方式 http({ url:‘api/d1.json‘, method: ‘post‘,//不区分大小写 data: {name:‘jack‘,pwd:123} ... }).then().catch() |
实现
先定义一个HttpAjax类，有一个构造函数constructor ，三个方法 init、toSearchParams、setHeaders。
class HttpAjax(){ constructor(){}//1.初始化配置参数 2.判断是注册api资源还是直接调用 init(){} //返回各种Method对应的方法 toSearchParams(){} //将传递的json对象转为urlParams setHeaders(){} //将配置的请求头对象设置请求头中去 } |
代码很简单，这里就不详细解释了，这个封装仅用于学习，切勿用于生产环境
class HttpAjax{ constructor(opts, params){ const optIsString = typeof opts === ‘string‘; this.methods = [‘GET‘, ‘POST‘]; const _opts = (optIsString ? params : opts) || {}; this.cache = typeof _opts.cache === undefined ? true : _opts.cache; this.method = (_opts.method || ‘get‘).toLowerCase(); this.url = optIsString ? opts : _opts.url; this.data = _opts.data || {}; this.headers = _opts.headers || {}; this.timeout = _opts.timeout || 6000; this.respOnseType= _opts.responseType || ‘json‘; this.requestBefore = _opts.requestBefore; this.requestAfter = _opts.requestAfter; this.requestAbort = _opts.requestAbort; this.requestProgress = _opts.requestProgress; this.Ontimeout= _opts.requestTimeout; this.init(); return optIsString ? this : this[this.method](this.data); } init(){ this.methods.forEach(method=>{ this[method.toLowerCase()]= data => { return new Promise((resolve, reject) => { var xhr = new XMLHttpRequest(); !this.cache && method ===‘GET‘ && (this.url += ((/\?/).test(this.url) ? "&" : "?") + (new Date()).getTime()); xhr.open(method, this.url); this.requestBefore && (xhr.Onloadstart= xhr => { if(this.requestBefore(xhr)===false){ xhr.abort(); } }) xhr.Onload= () => resolve(xhr.response); xhr.Onerror= () => reject(xhr); this.requestAbort && ( xhr.Onabort= this.requestAbort ); this.requestAfter && ( xhr.Onloadend= this.requestAfter ); this.requestTimeout && ( xhr.Ontimeout= this.requestTimeout ); this.requestProgress && ( xhr.Onprogress= this.requestProgress ); xhr.timeout = this.timeout; xhr.respOnseType= this.responseType; method===‘POST‘ && !this.headers && xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); this.headers && this.setHeaders(xhr, this.headers); try{ xhr.send(this.toSearchParams(data)); }catch(e){ reject(err); } }) } }) } toSearchParams(jsonObj){ var params = []; for(var i in jsonObj){ params.push(`${i}=${jsonObj[i]}`); } return params.join(‘&‘); } setHeaders(xhr, headers){ for(var i in headers){ xhr.setRequestHeader(i, headers[i]); } } } function http(options, params){ if(!options) return; return new HttpAjax(options, params); } module.exports.http = http; |
应用
点击请求一张图片，返回的结果：
http({ method:‘POST‘, url:imgUrl, cache:true, responseType: ‘blob‘, requestBefore: function(e){ console.log(‘准备开始请求...‘) }, requestAfter:function(e){ console.log(‘请求完成‘) }, requestProgress:function(e){ e.total>0 && console.log(‘正在接收：‘+ Math.ceil(e.loaded/e.total*100)); } }).then(res=>{ document.getElementById(‘imgBox‘).src = URL.createObjectURL(res); }).catch(err=>{ debugger; console.log(err); }) 输出： 准备开始请求... 正在接收：2 正在接收：46 正在接收：100 请求完成 |
下一篇将继续我们的Fetch API 探索…
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有