手写Ajax实现POST请求-CSDN博客

本文链接：https://blog.csdn.net/LQW_java_home/article/details/98862027

function Ajax(args){
	this.url = args.url;
	this.type = args.type;
	this.data = args.data;
}

Ajax.prototype.post=function(){

	var xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(Microsoft.XMLHTTP);
	xhr.open(this.type, this.url, true);
	if (this.type == 'post') {
	    //给指定的HTTP请求头赋值
	    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded;charset=UTF-8');
	}
	xhr.send(jsontokv(this.data));
	xhr.onreadystatechange = function() {
	    // readyState == 4说明请求已完成
	    if (xhr.readyState == 4 && xhr.status == 200) {
	        console.log(xhr.responseText);
	    }
	}
}


function jsontokv(jsonData){
	var ky='';
	for(var k in jsonData){
		ky+=(k+"="+jsonData[k]+"&");
	}
	return ky.substring(0,ky.length-1);
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index page</title>
	<!--  <script type="text/javascript" src="./jquery-2.1.1.min.js"></script> -->
	<script type="text/javascript" src="./Ajax.js"></script>
</head>
<body>
	
	<script type="text/javascript">
		var ajax = new Ajax({
			url:'http://localhost:8080/web/ajax',
			data:{'a':123,'bcd':'json'},
			type:'post'
		});
		ajax.post();
	</script>
</body>
</html>

封装原生ajax