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 ...
随机推荐
- WebStorm开发React项目,修代码之后运行的项目不更新
昨天遇到一个恶心的问题,我新建了一个React.js项目,想做一点关于Pc端的开发,习惯性的用了WebStorm,可是发现一个问题,就是代码修改之后,浏览器上根本不会刷新.然后,我把方向定位在没有正确 ...
- 搭建Hexo博客(三)—换电脑继续写Hexo博客
Hexo和GitHub搭建博客的原理是:Hexo将source下的md文件生成静态的html页面,存放到public目录中,这一步是由命令:hexo -g完成.接下来执行hexo -d命令,就将pub ...
- 【C/C++】c文件重点总结
c文件重点知识总结 程序文件数据文件--->分文本文件(ASCII文件)和映像文件(二进制文件) .区分是用记事本打开后能否看懂. 用二进制文件读写花费时间少,因为用文本文件需要有一个转换的过程 ...
- Node.js机制及原理理解初步【转】
一.node.js优缺点 node.js是单线程. 好处就是 1)简单 2)高性能,避免了频繁的线程切换开销 3)占用资源小,因为是单线程,在大负荷情况下,对内存占用仍然很低 3)线程安全,没有加锁. ...
- IntelliJ IDEA Tomcat启动VM Options配置
-server -XX:PermSize=512M -XX:MaxPermSize=1024m -Dfile.encoding=UTF-8 JDK8中用metaspace代替permsize,因此在许 ...
- Cent OS安装使用ffmpeg(完整版)
Cent OS安装使用ffmpeg centos作为主流后台linux 系统,ffmpeg作为视频流解析的主力,尤其是ffmpeg配合opencv使用,则是视觉操作的基础 版本: ffmpeg3.1 ...
- linux-内核参数优化参考指标
民间最全的Linux系统内核参数调优说 相信做运维的同仁,进行运维环境初建时,必须要考虑到操作系统内核参数的优化问题,本人经历数次的运维环境重建后,决定要自行收集一份比较完善的系统内核参数优化说明 ...
- eolinker——分享项目只需两步
登陆后打开项目概况 然后进入到分享项目界面,可根据自己的需求进行设置
- python成长之路二
python的print格式化输出,以及使用format来控制. 1,打印字符串(str),利用%s. >>> print ('My name is %s' % ('TaoXiao' ...
- POJ3417 Network(算竞进阶习题)
LCA + 树上差分(边差分) 由题目意思知,所有主要边即为该无向图的一个生成树. 我们考虑点(u,v)若连上一条附加边,那么我们切断(u,v)之间的主要边之后,由于附加边的存在,(u,v)之间的路径 ...