有很多框架已经将 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 封装及调用的更多相关文章

  1. 前后端数据交互(六)——ajax 、fetch 和 axios 优缺点及比较

    一.ajax.fetch 和 axios 简介 1.1.ajax ajax是最早出现发送后端请求的技术,属于原生 js .ajax使用源码,请点击<原生 ajax 请求详解>查看.一般使用 ...

  2. 两种方法实现asp.net方案的前后端数据交互(aspx文件、html+ashx+ajax)

    一个HTML页面只能显示HTML代码信息,不能与数据库进行数据的交互.asp.net方案提供了网页与数据库交互的方法,这里举出两种:①aspx文件 ②ashx文件+ajax技术 一.创建数据库 这里以 ...

  3. 对GraphQL-BFF:微服务背景下的前后端数据交互方案的研究-------引用

    随着多终端.多平台.多业务形态.多技术选型等各方面的发展,前后端的数据交互,日益复杂. 同一份数据,可能以多种不同的形态和结构,在多种场景下被消费. 在理想情况下,这些复杂性可以全部由后端承担.前端只 ...

  4. 前后端数据交互(八)——请求方法 GET 和 POST 区别

    WEB 开发同学一看 get 和 post 请求方法的区别,第一感觉都是 So easy! 学习ajax.fetch.axios时,发送网络请求携带参数时,都需要分别处理get和post的参数.所以我 ...

  5. 前后端数据交互处理基于原生JS模板引擎开发

    json数据错误处理,把json文件数据复制到----> https://www.bejson.com/ 在线解析json 这样能直观的了解到是否是json数据写错,在控制台打断点,那里错误打那 ...

  6. web前后端数据交互

    前后端数据交互是每一名web程序员必须熟悉的过程,前后端的数据交互重点在于前端是如何获取后端返回的数据,毕竟后端一般情况下只需要将数据封装到一个jsonMap,然后return就完了.下面通过一个li ...

  7. vue-resource的使用,前后端数据交互

    vue-resource的使用,前后端数据交互 1:导入vue与vue-resource的js js下载:   https://pan.baidu.com/s/1fs5QaNwcl2AMEyp_kUg ...

  8. 前后端数据交互利器--Protobuf

    Protobuf 介绍 Protocol Buffers(又名 protobuf)是 Google 的语言中立.平台中立.可扩展的结构化数据序列化机制. https://github.com/prot ...

  9. 前后端数据交互(二)——原生 ajax 请求详解

    一.ajax介绍 ajax 是前后端交互的重要手段或桥梁.它不是一个技术,是一组技术的组合. ajax :a:异步:j:js:a:和:x:服务端的数据. ajax的组成: 异步的 js 事件 其他 j ...

随机推荐

  1. div 模拟alert弹出框

    --------------信息展示弹出框---------------- <style> .over{background-color: rgba(0, 0, 0, 0.7);displ ...

  2. QT常用控件(一)——菜单栏和对话框

    引言 QMainWindow 是一个为用户提供主窗口程序的类,包含一个菜单栏(menu bar).多个工具栏(tool bars).多个锚接部件(dock widgets).一个状态栏(status ...

  3. ETL数仓测试

    前言 datalake架构 离线数据 ODS -> DW -> DM https://www.jianshu.com/p/72e395d8cb33 https://www.cnblogs. ...

  4. JavaScript学习07(jQuery)

    jQuery 什么是JQuery jQuery 由 John Resig 于 2006 年创建.它旨在处理浏览器不兼容性并简化 HTML DOM 操作.事件处理.动画和 Ajax. 十多年来,jQue ...

  5. 【笔记】特征脸(PCA在人脸识别领域的应用)

    人脸识别与特征脸(简单介绍) 什么是特征脸 特征脸(Eigenface)是指用于机器视觉领域中的人脸识别问题的一组特征向量,该方法被认为是第一种有效的人脸识别方法. PCA的具体实现思想见 [笔记]主 ...

  6. SpringBoot开发十四-过滤敏感词

    项目需求-过滤敏感词 利用 Tire 树实现过滤敏感词 定义前缀树,根据敏感词初始化前缀树,编写过滤敏感词的方法 代码实现 我们首先把敏感词存到一个文件 sensitive.txt: 赌博 嫖娼 吸毒 ...

  7. Adaptive AUTOSAR 学习笔记 15 - 持久化 Persistency

    本系列学习笔记基于 AUTOSAR Adaptive Platform 官方文档 R20-11 版本 AUTOSAR_EXP_PlatformDesign.pdf.作者:Zijian/TENG 原文地 ...

  8. Python小白的数学建模课-18.最小生成树问题

    最小生成树(MST)是图论中的基本问题,具有广泛的实际应用,在数学建模中也经常出现. 路线设计.道路规划.官网布局.公交路线.网络设计,都可以转化为最小生成树问题,如要求总线路长度最短.材料最少.成本 ...

  9. Set重写hashCode和equals方法实现引用对象去重

    运作原理: 首先判断hashCode是否相同,如果不同,直接判定为两个不同的对象.如果hashCode相同,再去比较equals是否一样,如果一样,则为同一个对象.如果不一样,则是两个不同对象. 那么 ...

  10. websocket在慕课网中的应用

    网上资料都是介绍概念,我们来看看实际网站怎么使用websocket的吧.限于自身水平解读并不深入,慕课网上的websocket某些字段不知何用. 是什么 是一种应用层协议,有html5而推出,是一种全 ...