method 请求方式,默认是get
url 地址
data 要传送的数据
success 数据下载成功以后执行的函数
error 数据下载失败以后执行的函数
function $ajax({method = "get", url, data, success, error}){
//1、创建ajax对象
var xhr = null;
try{
//兼容处理,支持IE8以上浏览器
xhr = new XMLHttpRequest();
}catch(error){
//支持IE以下的浏览器
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//判断如果数据存在
if(data){
//post请求将?去掉,使用querystring
data = querystring(data);
}
if(method == "get" && data){
//url字符串拼接
url += "?" + data;
}
//设置请求的地址、提交方式、异步传输
xhr.open(method, url, true);
if(method == "get"){
xhr.send();
}else{
//post请求,必须在send方法之前,去设置请求的格式
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
//4、等待数据响应
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//判断本次下载的状态码都是多少
if(xhr.status == 200){
/*
如何去处理数据操作不确定,
故使用自定义的回调函数success,
alert(1/2/3)表示回调函数执行的过程,注意先后顺序
*/
if(success){
// alert(2);
success(xhr.responseText);
}
}else{
if(error){
error("Error:" + xhr.status);
}
}
}
}
}
function querystring(obj){
var str = "";
for(var attr in obj){
str += attr + "=" + obj[attr] + "&";
}
//去掉最后拼接多余的?
return str.substring(0, str.length - 1);
}
Ajax的get、post请求方式封装好的js
最新推荐文章于 2024-01-04 14:32:55 发布