AJAX（原生JS封装）

封装代码：

function ajax({url,type,data,dataType}){
	return new Promise(function(open,err){
		//1. 创建xhr对象
		var xhr=new XMLHttpRequest();
		//2.绑定监听事件
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4&&xhr.status==200){
				var res=xhr.responseText;
				if(dataType==="json")
					res=JSON.parse(res)
				open(res);
			}
		}
		if(type=="get"&&data!=undefined){
			url+="?"+data;
		}
		//3.打开连接
		xhr.open(type,url,true);
		if(type==="post")
			//增加：设置请求消息头
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		//4.发送请求
		if(type=="post"&&data!==undefined)
			xhr.send(data);
		else
			xhr.send(null);
	})
}

另一种封装

function ajax_method(url,data,method,success) {
	// 异步对象
	var ajax = new XMLHttpRequest();

	// get 跟post  需要分别写不同的代码
	if (method=='get') {
		// get请求
		if (data) {
			// 如果有值
			url+='?';
			url+=data;
		}else{

		}
		// 设置 方法 以及 url
		ajax.open(method,url);

		// send即可
		ajax.send();
	}else{
		// post请求 url 是不需要改变
		ajax.open(method,url);

		// 需要设置请求报文
		ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

		// 判断data send发送数据
		if (data) {
			// 有值 从send发送
			ajax.send(data);
		}else{
			// 无值 直接发送即可
			ajax.send();
		}
	}

	// 注册事件
	ajax.onreadystatechange = function () {
		// 在事件中 获取数据 并修改界面显示
		if (ajax.readyState==4&&ajax.status==200) {
			// console.log(ajax.responseText);

			// 将 数据 让 外面可以使用
			// return ajax.responseText;

			// 当 onreadystatechange 调用时 说明 数据回来了
			// ajax.responseText;

			// 如果说 外面可以传入一个 function 作为参数 success
			success(ajax.responseText);
		}
	}

}


//调用
// var _Obj = {'unid':unid };
ajax_method(
	'/index/xxx/xxx',
	// JSON.stringify(_Obj),
	'unid=' + unid + '&' + 'unitname='+unitname,					
	'post',
	function(res){						
		var res = JSON.parse(res)
		var data = res.data;
		var productSelect = document.getElementById('productSelect');
		var html = '<option value="">请选择</option>';
		for(var i = 0 ; i < data.length ; i++){
			console.log(i);
			html +='<option value="'+data[i].productid+'" productid="'+data[i].productid+'" batch_name="'+data[i].productname+'">'+data[i].productname+'</option>';
		}
		productSelect.innerHTML= html;
	}
);