前后端数据交互(三)——ajax 封装及调用
有很多框架已经将 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)
}
})
前后端数据交互(三)——ajax 封装及调用的更多相关文章
- 前后端数据交互(六)——ajax 、fetch 和 axios 优缺点及比较
一.ajax.fetch 和 axios 简介 1.1.ajax ajax是最早出现发送后端请求的技术,属于原生 js .ajax使用源码,请点击<原生 ajax 请求详解>查看.一般使用 ...
- 两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)
一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...
- 对GraphQL-BFF:微服务背景下的前后端数据交互方案的研究-------引用
随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只 ...
- 前后端数据交互(八)——请求方法 GET 和 POST 区别
WEB 开发同学一看 get 和 post 请求方法的区别,第一感觉都是 So easy! 学习ajax.fetch.axios时,发送网络请求携带参数时,都需要分别处理get和post的参数.所以我 ...
- 前后端数据交互处理基于原生JS模板引擎开发
json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...
- web前后端数据交互
前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...
- vue-resource的使用,前后端数据交互
vue-resource的使用,前后端数据交互 1:导入vue与vue-resource的js js下载: https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUg ...
- 前后端数据交互利器--Protobuf
Protobuf 介绍 Protocol Buffers(又名 protobuf)是 Google 的语言中立.平台中立.可扩展的结构化数据序列化机制. https://github.com/prot ...
- 前后端数据交互(二)——原生 ajax 请求详解
一.ajax介绍 ajax 是前后端交互的重要手段或桥梁.它不是一个技术,是一组技术的组合. ajax :a:异步:j:js:a:和:x:服务端的数据. ajax的组成: 异步的 js 事件 其他 j ...
随机推荐
- div 模拟alert弹出框
--------------信息展示弹出框---------------- <style> .over{background-color: rgba(0, 0, 0, 0.7);displ ...
- QT常用控件(一)——菜单栏和对话框
引言 QMainWindow 是一个为用户提供主窗口程序的类,包含一个菜单栏(menu bar).多个工具栏(tool bars).多个锚接部件(dock widgets).一个状态栏(status ...
- ETL数仓测试
前言 datalake架构 离线数据 ODS -> DW -> DM https://www.jianshu.com/p/72e395d8cb33 https://www.cnblogs. ...
- JavaScript学习07(jQuery)
jQuery 什么是JQuery jQuery 由 John Resig 于 2006 年创建.它旨在处理浏览器不兼容性并简化 HTML DOM 操作.事件处理.动画和 Ajax. 十多年来,jQue ...
- 【笔记】特征脸(PCA在人脸识别领域的应用)
人脸识别与特征脸(简单介绍) 什么是特征脸 特征脸(Eigenface)是指用于机器视觉领域中的人脸识别问题的一组特征向量,该方法被认为是第一种有效的人脸识别方法. PCA的具体实现思想见 [笔记]主 ...
- SpringBoot开发十四-过滤敏感词
项目需求-过滤敏感词 利用 Tire 树实现过滤敏感词 定义前缀树,根据敏感词初始化前缀树,编写过滤敏感词的方法 代码实现 我们首先把敏感词存到一个文件 sensitive.txt: 赌博 嫖娼 吸毒 ...
- Adaptive AUTOSAR 学习笔记 15 - 持久化 Persistency
本系列学习笔记基于 AUTOSAR Adaptive Platform 官方文档 R20-11 版本 AUTOSAR_EXP_PlatformDesign.pdf.作者:Zijian/TENG 原文地 ...
- Python小白的数学建模课-18.最小生成树问题
最小生成树(MST)是图论中的基本问题,具有广泛的实际应用,在数学建模中也经常出现. 路线设计.道路规划.官网布局.公交路线.网络设计,都可以转化为最小生成树问题,如要求总线路长度最短.材料最少.成本 ...
- Set重写hashCode和equals方法实现引用对象去重
运作原理: 首先判断hashCode是否相同,如果不同,直接判定为两个不同的对象.如果hashCode相同,再去比较equals是否一样,如果一样,则为同一个对象.如果不一样,则是两个不同对象. 那么 ...
- websocket在慕课网中的应用
网上资料都是介绍概念,我们来看看实际网站怎么使用websocket的吧.限于自身水平解读并不深入,慕课网上的websocket某些字段不知何用. 是什么 是一种应用层协议,有html5而推出,是一种全 ...