前后端数据交互(三)——ajax 封装及调用
2023-03-20 15:01:30 时间
有很多框架已经将 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-www-form-urlencoded')
xhr.send( strData )
}
1.3、请求超时处理
网络服务异常或者接口异常的时候,请求发送出去没有响应,页面也不会做出任何反应,需要全局加一个超时处理,超出时间还没有返回时,自动结束请求,返回异常。
使用语法如下:
//设置时间为2s
xhr.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-www-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)
}
})
相关文章
- Clojure世界:文件IO
- Apache MINA (1) 简介
- [WPF] 制作一个彩虹按钮
- DDD领域驱动设计 — 贫血模型与充血模型
- EasyNVR使用中磁盘I/O读写跟不上hls流ts切片速度如何解决?
- JSON和AJAX知识点整理
- 激怒开源社区,微软悄悄删除 2500 行功能代码后致歉:已恢复!
- SSM整合案例
- 请简述跨域的几种方式
- WPF 制作一个占用文件的测试工具
- WPF 使用 VisualBrush 在 4k 加 200 DPI 设备上某些文本不渲染看不见问题
- WPF 使用 MyScript 的 IInk 做手写识别
- 解决下载Visual Studio出现下载条一直是0的情况
- .Net 垃圾回收和大对象处理
- 实现针对不同.net版本的条件编译
- 针对不同.NET版本的条件编译
- Winform开发框架演化历史
- 一个.Net程序员关于学习的思考顺带思考人生
- 实例讲解.NET多线程执行函数
- 如何查找.NET程序内存不断上涨的原因