Ajax方法封装与调用
Ajax方法封装:
function ajax(options){
//定义默认
var defaults ={
type:'get',
url:'',
data:{},
Headers:{'Content-Type': 'application/x-www-form-urlencoded'},
success:function(){},
error:function(){}
};
//用options中的对象覆盖defaults中对象
Object.assign(defaults,options);
//创建
var xhr= new XMLHttpRequest();
//拼接请求参数变量
var params='';
//循环用户传递进来的对象格式参数
for(var attr in defaults.data){
//将参数转换成字符串格式
params+= attr +'='+ defaults.data[attr] +'&';
}
//字符串截取,将最后的&截取掉
params= params.substr(0,params.length -1);
//判断请求方式
if(defaults.type=='get'){
defaults.url=defaults.url +'?'+ params;
}
//配置
xhr.open(defaults.type,defaults.url);
//发送请求
if(defaults.type=='post'){
//用户期望的向服务端传递的请求参数类型
var contentType=defaults.Headers['Content-Type'];
//post请求时必须设置的
xhr.setRequestHeader('Content-Type',contentType);
//判断请求参数类型
if(contentType=='application/json'){
xhr.send(JSON.stringify(defaults.data));
}else{
xhr.send(JSON.stringify(params));
}
}else{
xhr.send();
}
//监听onload事件,当接收完响应数据后触发
xhr.onload=function(){
//xhr.getResponseHeader()
//获取响应头部数据
var contentType=xhr.getResponseHeader('Content-Type');
//服务端返回的数据
var responseText=xhr.responseText;
if(contentType.includes('application/json')){
//把JSON字符串转换为JSON 对象
responseText = JSON.parse(responseText);
}
//对http状态码判断,判断是否等于200
if(xhr.status==200){
//调用处理成功情况的函数
defaults.success(responseText,xhr);
}else{
//调用处理失败的情况函数
defaults.error(responseText,xhr);
}
}
}
Ajax调用:
//函数调用
ajax({
//请求方式
type:'get',
//请求地址
url:'http://localhost:3000/test',
data:{name:'Monkey',age:1800},
Headers:{'Content-Type': 'application/json'},
success:function(data,xhr){
console.log('这里是success函数:');
console.log(data);
},
error:function(data,xhr){
console.log('这里是error函数:');
console.log(data);
}
});
/*
请求参数要考虑的问题:
1. 位置问题:
将请求参数传递到Ajax函数的内部,在函数内部根据请求方式的不同,将请求参数放到不同位置:
get: 放到请求地址的后面
post:放到send方法中
2.格式问题
application/x-www-form-urlencoded
参数名称=参数值&参数名称=参数值
name=zs&age=20
application/json
{name:'zs', age:20}
1.传递对此数据类型对于函数的调用者更加友好
2.在函数的内部对象数据类型转换为字符串数据类型更加方便
*/
本文来自博客园,作者:码农阿亮,转载请注明原文链接:https://www.cnblogs.com/wml-it/p/15809194.html
技术的发展日新月异,随着时间推移,无法保证本博客所有内容的正确性。如有误导,请大家见谅,欢迎评论区指正!
开源库地址,欢迎点亮:
GitHub:https://github.com/ITMingliang
Gitee: https://gitee.com/mingliang_it
GitLab: https://gitlab.com/ITMingliang
建群声明: 本着技术在于分享,方便大家交流学习的初心,特此建立【编程内功修炼交流群】,为大家答疑解惑。热烈欢迎各位爱交流学习的程序员进群,也希望进群的大佬能不吝分享自己遇到的技术问题和学习心得!进群方式:扫码关注公众号,后台回复【进群】。
![](https://images.cnblogs.com/cnblogs_com/wml-it/2196906/o_230823011905_wxgzhss.png)