在使用ajax发送请求时,有get和post两种请求方式,两种请求方式的写法均比较固定, 为了使用方便,进行对get和post两种请求方式进行函数封装,这样,下次需要使用时,可直接引入js文件使用封装好的函数。
首先对get请求方式进行封装
function ajax_get(url,data){
//url是请求的文件路径,data是需要上传的数据,如 "name=jack"
//创建异步对象
var ajax = new XMLHttpRequest();
//判断是否有上传的数据
if(data){
url + = '?';
url + = data;
}
else{}
//设置method为get
ajax.open('get',url);
//发送
ajax.send();
//注册事件
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
console.log(ajax.responseText);
}
}
}
然后对post请求方式进行封装
post方式和get方式几乎相同,不同点是post上传的数据放在send()中,而get的则和url合拼之后放在open()中,并且post方式需要在ajax.send()和ajax.open()之间多添加ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
function ajax_post(url,data){
//url是请求文件路径,data是上传的数据
//创建异步对象
var ajax = new XMLHttpRequest();
//设置method
ajax.open('post',rul);
//添加header
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//判断是否有上传数据
if(data){
//有上传数据则放入send()中
ajax.send(data);
}else{
ajax.send();
}
//注册事件
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
//获取数据
console.log(ajax.responseText);
}
}
}
get和post封装为同一个函数
最后,对get和post两种请求方式一起封装为同一个函数,并进行优化,以上两种封装方式,都规定了函数参数的顺序,现在把参数转换为一个对象,这样传入参数时就不需要考虑参数的顺序问题了。
/*option{
url:"",
data:"",
method:"",
success:function(data){}
其中success是回调函数,为了使用函数返回的数据,在封装的函数中给success函数传入一个实参
}
*/
function ajax_tool(option){
//传入一个对象参数
//创建异步对象
var ajax = new XMLHttpRequest();
//判断请求方式是否为get
if(option.method == 'get'){
//方式为get,判断是否有上传的数据
if(option.data){
//有上传数据则拼接在url后面
option.url += '?';
option.url += option.data;
}
//设置method
ajax.open(option.method,option.url);
//发送
ajax.send();
}
else{
//post 请求方式部分
//设置method
ajax.open(option.method,option.url);
//添加header
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//判断是否有上传数据,设置send()
if(option.data){
ajax.send(option.data);
}else{
ajax.send();
}
}
//get和post 注册事件
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
//拿到数据后,通过传参数给回调函数success返回数据
option.success(ajax.responseText);
}
}
}
到此,对ajax的get和post请求方式的封装就完成了,如有错误欢迎大家指出,也请大家多多见谅,谢谢。