封装GET和POST函数的ajax函数以及详细封装介绍

// 封装一个既可以发送GET请求又可以发送POST请求的函数
function ajax(opt){
//1.先设置相关的默认值
var url = opt.url || ’ ‘,//当传入url时就是请求的就是其传入参数的页面如果没有传入请求的就是当前页面
type = opt.type || ‘GET’,//请求方式没有写入时默认是GET
data = opt.data || ’ ‘,//使用post请求时send()里面传入参数，还有就是使用GET请求时url后面的地址如
dataType = opt.dataType || ‘TEXT’,//dataType就是后端返回给你的数据类型，筛选类型以便后续执行相应的回调函数
success = opt.success || null,//请求成功时执行的回调函数，没有时则为空对象
error = opt.error || null; //请求失败时执行的函数，没有则为空
//判断data传递的是对象还是字符串
if(data !== ‘string’){
data = serialize(params);//调用上面的函数将其转化为以&连接的字符串，例如：a=2&b=3；
}
//封装一个处理POST请求时send()中传递的参数，将传递的参数转化为字符串格式
function serialize(params){
var arr = [];
for(var key in params){
arr.push(key in params){
return arr.join(‘&’)
}
}
}
//2 把GET和POST请求的内容写出来
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
//表示成功接收后端传来的数据成功,这时候我们要对dataType的值进行判断，根据判断的结果给success函数传入对应类型的值
dataType = dataType.toUpperCase();//这一步是把的值统一转化为大写形式
if(dataType === ‘TEXT’){
success && success(xhr.responseText);//利用&&返回第一个假值全真返回最后一个的特性省去判断步骤
}else if(dataType === ‘JSON’){
success && success(JSON.parse(xhr.responseText));//如果是JSON字符串就把它转化为JSON对象
}else if(dataType === ‘XML’){
success && success(xhr.responseXML);
}
}else if(xhr.readyState === 4 && xhr.status === 404){
//表示没有接收到后端传来的数据
error && error(xhr.statusText)
}
}
// 3 根据使用者传递的type值判断是使用GET还是使用POST
if(type.toUpperCase() === ‘GET’){
//处理url 如果用户传来了data就拼接，没有传递还是url
url = data ? url + “?” +data : url;
//按GET请求发送
xhr.open(‘GET’,url,true);
xhr.send();
}else if(type.toUpperCase() === “POST”){
//按POST请求发送
xhr.open(‘POST’,url,true);
xhr.send(data);
}
}