这篇文章主要介绍了如何封装一个Ajax函数,帮助大家更好的理解和学习网络编程,感兴趣的朋友可以了解下
如何封装Ajax函数
一个Ajax函数:
// 一个Ajax函数
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest;
}else{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.open("GET","https://jsonplaceholder.typicode.com/users");
xhr.send(null);
xhr.onreadystatechange = function(){
if(this.readyState === 4){
console.log(xhr.responseText)
}
}
封装自己的 Ajax 函数
参数1:{string} 请求方法--method
参数2:{string} 请求地址--url
参数3:{object} 请求参数--params
参数4:{function} 请求完成后,执行的回调函数--done
function ajax(method,url,params,done){
// 统一将method方法中的字母转成大写,后面判断GET方法时 就简单点
method = method.toUpperCase();
//IE6的兼容
var xhr = window.XMLHttpRequest
? new XMLHttpRequest()
: new ActiveXObject("Microsoft.XMLHTTP");
//创建打开一个连接 open
//将对象格式的参数转为urlencoded模式
//新建一个数组,使用for循环,将对象格式的参数,
//以(id = 1)的形式,每一个键值对用 & 符号连接
var pairs = [];
for(var k in params){
pairs.push(k + "=" + params[k]);
}
var str = pairs.join("&");
//判断是否是get方法 , get方法的话,需要更改url的值
if(method == "GET"){
url += "?" + str;
}
//创建打开一个连接
xhr.open(method,url);
var data = null;
if(method == "POST"){
//post方法 还需要设置请求头、请求体
xhr.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
data = str;
}
xhr.send(data);
//执行回调函数
xhr.onreadystatechange = function(){
if(this.readyState == 4) {
done(JSON.parse(this.responseText));
}return;
// 执行外部传进来的回调函数即可
// 需要用到响应体
}
}
//调用函数
//get方法
// ajax("GET","http://localhost:3000/users",
// {"id":1},
// function(data){
// console.log(data);
// });
//post方法
ajax("POST", "http://localhost:3000/users",
{ "name": "lucky","class":2,"age":20 },
function (data) {
console.log(data);
});
以上就是如何封装一个Ajax函数的详细内容,更多关于封装Ajax函数的资料请关注编程学习网其它相关文章!
沃梦达教程
本文标题为:如何封装一个Ajax函数
基础教程推荐
猜你喜欢
- Vue+WebSocket实现在线聊天 2023-10-08
- ECSHOP中实现ajax弹窗登录功能 2023-01-31
- 关于 css:WebKit (iPad) CSS3: 背景过渡闪烁 2022-09-21
- 第7天:CSS入门 2022-11-04
- 分页技术原理与实现之无刷新的Ajax分页技术(三) 2023-01-20
- 解决ajax的delete、put方法接收不到参数的问题方法 2023-02-23
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽) 2023-02-01
- vue的 Mixins (混入) 2023-10-08
- 深入浅析Jsonp解决ajax跨域问题 2022-12-28
- ExtJS 3.x DateField menuListeners 显示/隐藏 2022-09-15