很多框架已经封装了ajax，需要的时候调用就行了。比如jquery就是最常用的一个。为什么我们还需要学习ajax的封装？首先，加强我们对ajax的理解。其次，如果只是因为ajax请求需要引入框架，我们可以自己打包一个，这样就不需要引入多余的框架了。
一、包装注意事项
封装是为了共享相同的部分，节省资源，提高代码重用性和工作效率。因此，调用时需要传入不同的参数事件类型。应注意以下几点:
1.1。参考
发送ajax请求时，主要参数有:
请求url请求类型请求参数成功回调失败回调超时时间
以上六个参数必须设置为动态传入，这样才能控制任何ajax请求。超时可以统一设置，如果作为参数使用，控制任何请求超时都比较方便。
1.2。请求类型是分开处理的
有两种类型的请求:get和post。当传递get的值时，数据跟在url地址后面，当传递post的值时，它被携带在请求体中。您还需要设置请求数据类型。所以需要分别判断和处理。
if(type == 'GET'){ xhr.open( 'GET' , url+'?'+strData , true ) shr.send()}else{ xhr.open('POST',url,true) xhr.setRequestHeader('content-type','application/x-***-form-urlencoded') xhr.send( strData )}
1.3，请求超时处理
当服务异常或者接口异常，发出请求时没有响应，页面不会做出任何响应，需要全局添加超时。如果超时后请求没有返回，请求将自动结束并返回一个异常。
使用如下语法:
//设置时间为2sxhr.timeout = 2000 ;//超时回调xhr.ontimeout = function(){ console.log('网络异常，稍后重试')}
1.4。错误处理
当网络中断，请求无法发送到服务器时，需要处理请求失败。使用onerror事件处理。
使用如下语法:
xhr.onerror = function(){ console.log("网络异常，请检查网络")}
其次，封装ajax代码
根据ajax的请求流程，打包代码如下:方便以后使用，推荐收藏。
function ajax(option) { // method, url, data, timeout, success, error var xhr; var str = data2str(option.data); if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } if (option.type.toLowerCase() === 'post') { xhr.open(option.type, option.url, true); xhr.setRequestHeader("Content-type", "application/x-***-form-urlencoded"); xhr.send(str); } else if (option.type.toLowerCase() === 'get') { xhr.open(option.type, option.url + '?' + str, true); xhr.send(); } xhr.onreadystatechange = function () { if (xhr.readyState === 4) { clearTimeout(timer); if (xhr.status >= 200 && xhr.status < 300 || xhr === 304) { option.success(xhr); }else { option.error(xhr); } } }; if (option.timeout) { var timer = setTimeout(function () { xhr.abort(); clearTimeout(timer); }, option.timeout) }}// 将对象转化成用于传输的字符串function data2str(data) { var res = []; data.t = new Date().getTime(); for (var key in data) { res.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key])); } return res.join('&');}
使用时，调用代码如下:
ajax({ method:'GET', url:'1.txt', data:{ //请求数据 }, timeout:2000, success:(res)=>{ console.log('成功返回',res.response) }, error: err => { console.log('错误信息',err) } })
本文来自Rose情調※投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/573840.html
微信扫一扫 
