ajax请求封装函数
- 写封装函数的套路
1.先写出这个函数原来的基本用法
2.写一个没有形参空函数,将上一步的代码直接作为函数体,
3.根据使用过程中,抽象出来需要变的东西作为形参
function ajax (method, url, params, fun) {
method = method.toUpperCase() //在传入method的时候可以忽略大小写
var xhr = new XMLHttpRequest()
if (typeof params === 'object') { //如果在地址传入的东西是一个对象,我们将它的格式转化为urlencoded
var tempArr = []
for (var key in params) {
var value = params[key]
tempArr.push(key + '=' + value)
}
params = tempArr.join('&') //===>这里的格式就为parsms=[key1=value&key2=value2]
}
if (method === 'GET') {
url += '?' + params
}
xhr.open(method, url, false)
var data = null
if (method === 'POST') { //如果请求的方式为POST,需要手动设置请求头的Content-Type
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
data = params
}
xhr.onreadystatechange = function () {
if (this.readyState !== 4) return
// console.log(this.responseText) //这里可以得到响应体,但是后面要处理的内容应该根据使用者的需要来处理
fun(this.responseText)
}
xhr.send(data)
}
// 调用者
// ============================
var fun = function (res) {
console.log(res);
}
ajax('get', 'test.php', {}, fun)
ajax请求封装函数的更多相关文章
- jQuery-实现简单的Ajax请求封装
封装的意义在于复用,在于减少重复的代码. 我在项目中做了简单的Ajax请求封装,实现方式如下: //封装Ajax请求 $.extend({ ajaxDirect:function(url,type,d ...
- ajax请求,函数外无法获取请求的数据问题解决
一.开发中遇到需要通过ajax请求获取其他函数能否执行的状态,但是当赋值给statusFlag时发现无法赋值:ajax请求默认为异步的方式,该请求的操作被放置在任务队列中,并不会按顺序执行,所以被赋值 ...
- Ajax请求回调函数没有被调用
$.ajax({ type:"post", url:"http://172.16.41.91:8080/FcsServletSSM/users ...
- ajax请求封装的公共方法
/** * post 方法 */ function ajaxPost(url, params, callBack) { ajax(url,params,"post",callBac ...
- React后台管理系统-ajax请求封装
1.新建文件夹 util , 在util里边新建 mm.jsx文件 2.使用jquery里边的ajax发送请求,回调用promise,返回一个promise对象 request(param){ ...
- ajax请求封装
var xmlHttp; var ajaxRequest = function (params) { xmlHttp ={}; this.url = params.url; this.method = ...
- 为非ajax请求绑定回调函数的方法
我们都知道jQuery为ajax请求封装了success和error两个回调方法,其实jQuery也实现了为非ajax请求的普通方法也设计了绑定回调函数的方法. 当一个方法需要等待另一个耗时很长的方法 ...
- 原生AJAX请求教程
ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异 ...
- 前后台交互ajax请求模块
下载依赖包axios npm i axios -d //在packge.json内配置proxy,配置请求基础路径 "proxy":"http://localhost:5 ...
随机推荐
- Express学习(1) ------Express 入门
Express 是node 第三方框架,大家都知道,框架的意义就在于能大大简化程序地开发.那么我们就看一下Express是怎么简化node程序开发的. 1,用Express写一个hello world ...
- Base64 总结
Base64编码是解决一些无法打印的字符无法显示的问题,将8位的ascii编码转换为6位的表示64个可见字符的算法. 具体而言,首先将编码每三个分成一组,将三个字符转换为总长为24位的二进制 数字,将 ...
- Bash 5.0 发布及其新功能
导读 邮件列表证实最近发布了 Bash-5.0.而且,令人兴奋的是它还有新的功能和变量.如果你一直在使用 Bash 4.4.XX,那么你一定会喜欢 Bash 的第五个主要版本. 第五个版本侧重于新的 ...
- zabbix自动注册
实现方法是: 第一: 选择动作-->事件源-->自动注册-->创建动作 第二: 动作-->触发条件-->主机元数据-->contains-->Linux 第四 ...
- JAVA spring配置文件总结
首先来看一个标准的Spring配置文件 applicationContext.xml <?xml version="1.0" encoding="UTF-8&quo ...
- 【XSY2679】修墙 最短路
题目描述 有一个\((n+1)\times (m+1)\)的网格,每条边都有一个边权.有一些格子是城市.你要用一个环圈住所有城市,要求环上所有边的边权和最小.重合的边边权算多次.保证左上角\((1,1 ...
- 【XSY1591】卡片游戏 DP
题目描述 有标有数字为\(1\)~\(9\)的卡片各\(a_1,a_2\cdots a_9\)张,还有标有乘号的卡片\(m\)张.从中取出\(n\)张按任意顺序排列,取出两个乘号相邻和乘法在边界上的非 ...
- Python_sys.argv 命令行参数获取使用方法
import sys print(sys.argv) """ 获取命令行参数 输入 python3 sys.argv_demo.py 输出: ['argv.py'] 输入 ...
- 多项式细节梳理&模板(多项式)
基础 很久以前的多项式总结 现在的码风又变了... FFT和NTT的板子 typedef complex<double> C; const double PI=acos(-1); void ...
- 【CF908G】New Year and Original Order(动态规划)
[CF908G]New Year and Original Order(动态规划) 题面 洛谷 CF 题解 设\(f[i][j][k][0/1]\)表示当前填到了第\(i\)位,有\(j\)个大于等于 ...