ajax-post的使用

只能写在open()和send()之间

<script>
	window.onload = function(e){
		var oBtn = document.querySelector("button");
		oBtn.onclick = function(ev1){
			// 1.创建一个异步对象
			var xmlhttp;
			if(window.XMLHttpRequest){
				xmlhttp = new XMLHttpRequest();
			}else{
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			}
			// 2.设置请求方式和请求地址
			xmlhttp.open("POST","ajax-post.php",true);
			// 注意点
			xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			// 3.发送请求
			xmlhttp.send("userName=123&userPwd=aaa");
			// 4.监听状态的变化
			xmlhttp.onreadystatechange = function (ev2) {
				// 判断是否响应就绪
				if(xmlhttp.readyState === 4){
					// 判断是否请求成功
					if(xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304){
						// 5.处理返回的结果
						console.log("接收到服务器返回的数据");
						alert(xmlhttp.responseText);
						} else{
						// 5.处理返回的结果
						console.log("没有接收到服务器返回的数据");
					}
				}	
			}	
		}
	}
</script>

封装

function objToStr(obj){
	obj.t = new Date().getTime();
	var res = [];
	for(var key in obj){
		// 在url中是不可以出现中文的，如果出现了中文需要转码
		// url中只能出现数字/字母/下划线/ASCLL码
		res.push(encodeURIComponent(key) + "=" +encodeURIComponent(obj[key]));
	}
	return res.join("&");
}

function ajax(option) {
	// 0. 将对象转换成字符串
	var str = objToStr(option.obj);
	// 1.创建一个异步对象
	var xmlhttp,timer;
	if (window.XMLHttpRequest) {
		xmlhttp = new XMLHttpRequest();
	} else {
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	if(option.type.toLowerCase() === 'get'){
		// 2.设置请求方式和请求地址
		xmlhttp.open(option.type,option.url+"?"+str, true);
		// 3.发送请求
		xmlhttp.send();
	} else{
		xmlhttp.open(option.type,option.url, true);
		xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		xmlhttp.send(str);
	}
	// 4.监听状态的变化
	xmlhttp.onreadystatechange = function (ev2) {
		// 判断是否响应就绪
		if (xmlhttp.readyState === 4) {
			// 判断是否请求成功
			if (xmlhttp.status >= 200 && xmlhttp.status < 300 || xmlhttp.status === 304) {
				// 5.处理返回的结果
				option.success(xmlhttp);
			} else {
				// 5.处理返回的结果
				option.error(xmlhttp);
			}
		}
	}
	// 判读外界是否传入了超时时间
	if(option.timeout){
		timer = setInterval(function(){
			// console.log("中断请求");
			xmlhttp.abort();
			clearInterval(timer);
		}, option.timeout);
	}
}

<script>
window.onload = function(e){
	var oBtn = document.querySelector("button");
	oBtn.onclick = function(ev1){
		ajax("POST","ajax-post.php",{
			"userName":"123",
			"userPwd":"abc"
		},3000,function(xhr){
			alert(xhr.responseText);
		},function(xhr){
			alert("请求失败");
		});
	}
}
</script>