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 ...
随机推荐
- JS--innerHTML属性
innerHTML属性,不是DOM的组成部分(常用) 获取标签里的文本内容,var span=document.getElementById("span").innerHTML; ...
- Thread的其他属性方法
from threading import Thread,currentThread,active_count import time def task(): print('%s is running ...
- Opencv画图操作
1. 画矩形 MyRect rect;rect.left = 5;rect.top = 5;rect.right = 100;rect.bottom = 100;IplImage * pColorIm ...
- poj-1273(最大流)
题解:纯板子题... EK算法 #include<iostream> #include<algorithm> #include<cstring> #include& ...
- hdu1875(最小生成树prime)
思路:一开始想用贪心来着,发现贪心有缺陷,然后就用了最小生成树来写,这里用了prime算法,首先,先建个图,两点之间的边的权值就是两个点的距离,然后直接prime模板 代码 #include<i ...
- Sql Server设置主键和外键
设置主键 https://jingyan.baidu.com/article/9158e0003349a7a2541228fd.html 设置外键 https://jingyan.baidu.com/ ...
- java代码自动下载Spring Boot用户手册
本示例演示Spring Boot 1.5.9.RELEASE版本的用户手册下载 pom.xml <?xml version="1.0" encoding="UTF- ...
- day2 网络基础
网路基础 网络OSI模型七层: 物理层: 定义特性:机械,电器,功能,过程: 定义接口标准:双绞线,光纤,同轴电缆: 相关协议:无: 数据链路层: 定义帧的开始结束,封装成帧,差错校验,透明传输(防止 ...
- ACM中的fread读入
fread可以加快读入速度,尤其是读特大的二进制文件. #include <cctype> typedef long long LL; char buf[100000],*p1=buf,* ...
- Windows10 + Visual Studio 2017环境为C++工程安装使用ZMQ
因为需要用 C++ 实现联机对战的功能,但是不想直接用 winsock ,因此选了ZMQ 框架(不知道合不合适).安装的过程还是挺艰辛的.但是也学到了些东西,记录一下.另外,Zmq 的作者 Piete ...