原生JS封装ajaxpostget请求方法
Posted echophp
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS封装ajaxpostget请求方法相关的知识，希望对你有一定的参考价值。
js_ajax使用说明
本demo是使用原生JS封装的ajax、post、get三种请求方式，以下是使用说明
demo中的对象是：ajaxRequest；通过此对象调用ajax、get、post方法
参数：
method: //请求的方式：post 或 get【默认】--ajax方法必传此参数
data: //请求的数据信息，对象形式，
success:function(){} //请求成功时的回调函数
error:function(){} //请求失败的回调函数
方法：ajax()
//例：
ajaxRequest.ajax({
method:'get',
url:'php/test.php',
data:{
"username":"chen",
"password":"123456"
},
success:function(data){
console.log(data);
},
error:function(error){
console.log(error);
}
});
方法：get()
//例：
ajaxRequest.get({
url:'php/test.php',
data:{
"username":"chen",
"password":"123456"
},
success:function(data){
console.log(data);
},
error:function(error){
console.log(error);
}
});
方法：post()
//例：
ajaxRequest.post({
url:'php/test.php',
data:{
"username":"chen",
"password":"123456"
},
success:function(data){
console.log(data);
},
error:function(error){
console.log(error);
}
});
demo参考网址
JS学习笔记图
源代码
var AjaxRequest = function(){
var that = this;
//创建XMLHTTPRequest对象
that.createXHR = function(){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}else if(window.ActiveXObject){
// IE6,IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}else{
throw new Error("您的浏览器不支持AJAX！");
}
};
//初始化数据和方法
that.init = function(obj){
var objAdapter = {
method:"get",
data:{},
success:function(){},
complete:function(){},
error:function(s){
alert('status:' + s + 'error!');
},
async:true
};
//通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题
that.url = obj.url + '?rand=' + Math.random();
that.method = obj.method || objAdapter.method;
that.data = that.params(obj.data) || that.params(objAdapter.data);
that.async = obj.async || objAdapter.async;
that.complete = obj.complete || objAdapter.complete;
that.success = obj.success || objAdapter.success;
that.error = obj.error || objAdapter.error;
};
//ajax异步调用
that.ajax = function(obj){
that.method = obj.method || 'get';
if(that.method === "post" || that.method === "POST"){
that.post(obj);
}else if(that.method === "get" || that.method === "GET"){
that.get(obj);
}
};
//post方法
that.post = function(obj){
var xhr = that.createXHR();//创建XHR对象
that.init(obj);
that.method = "post";
if(that.async===true){
//异步
xhr.onreadystatechange = function(){
//响应已就绪
if(xhr.readyState==4){
that.callback(obj,this); //回调函数
}
}
}
xhr.open(that.method,that.url,that.async);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(that.data);
if(that.async===false){
//同步
that.callback(obj,this);
}
};
//get方法
that.get = function(obj){
var xhr = that.createXHR();//创建XHR对象
that.init(obj);
if(that.async===true){
//异步
xhr.onreadystatechange = function(){
//响应已就绪
if(xhr.readyState==4){
that.callback(obj,this); //回调函数
}
}
}
that.url += that.url.indexOf('?')==-1?'?'+that.data:'&'+that.data;
xhr.open(that.method,that.url,that.async);
xhr.send(null);
if(that.async===false){
//同步
that.callback(obj,this);
}
};
//请求成功的回调函数
that.callback = function(obj,xhr){
if(xhr.status==200 || xhr.status==304){
obj.success(xhr.responseText);//回调传递参数
}else{
alert('获取数据错误！错误代号：' + xhr.status + '，错误信息：' + xhr.statusText);
}
};
//数据转换
that.params = function(data){
var arr = [];
for(var i in data){
//特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
};
//返回的结果
return {
post:that.post,
get:that.get,
ajax:that.ajax
}
}
var ajaxRequest = new AjaxRequest;
//ajax请求
// ajaxRequest.ajax({
// method:'get',
// url:'php/test.php',
// data:{
// "username":"chen",
// "password":"123456"
// },
// success:function(data){
// console.log(data);
// },
// error:function(error){
// console.log(error);
// }
// });
//get请求
// ajaxRequest.get({
// url:'php/test.php',
// data:{
// "username":"chen",
// "password":"123456"
// },
// success:function(data){
// console.log(data);
// },
// error:function(error){
// console.log(error);
// }
// });
//post请求
ajaxRequest.post({
url:'php/test.php',
data:{
"username":"chen",
"password":"123456"
},
success:function(data){
console.log(data);
},
error:function(error){
console.log(error);
}
});
以上是关于原生JS封装ajaxpostget请求方法的主要内容，如果未能解决你的问题，请参考以下文章