对ajax简单的封装

对ajax简单的封装

demo：

// type: 请求方式
// url: 请求的 URL 地址
// data: 请求的数据参数
// fn: 响应接收完毕触发的函数
function ajax(type,url,data,fn) {
    
    
	//创建 XMLHttpRequest对象
	var xhr = new XMLHttpRequest()
	//将请求方式转换为大写，方便后面的判断
	type = type.toUpperCase()
	//判断请求数据参数类型是否为对象
	if(typeof data === 'object') {
    
    
		var ary = []
		for(var key in data) {
    
    
			ary.push(key + '=' + data[key])
		}
		data = ary.join('&')  //将请求参数转换为以&连接的字符串
	}
	//判断请求方式，如果为GET，将请求参数拼接到url中
	if(type === 'GET') {
    
    
		url = url + '?' + data;
	}
	//打开要发送请求的地址
	xhr.open(type,url)
	//定义send中的参数为空
	var datas = null
	//判断请求方式，如果为POST，设置请求头，将send中的参数设置为请求参数
	if(type === 'POST') {
    
    
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		datas = data
	}
	//发送请求
	xhr.send(datas)
	//监听请求状态，接收响应数据，执行响应接收完毕触发的函数
	xhr.onload = function() {
    
    
		fn(this.response)
	}
}

使用：

//GET请求
ajax('get','https://me.csdn.net/weixin_45426836',{
    
    
	age: 111, 
	name: 222
},function (result) {
    
    
	console.log(result)
})
//POST请求
ajax('post','https://me.csdn.net/weixin_45426836',{
    
    
	age: 333, 
	name: 444
},function (result) {
    
    
	console.log(result)
})