原生xml请求

给大家分享一个原生js请求数据方式，自己写了一个demo大家可以看看
<html>
	<head>
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="https://daneden.github.io/animate.css/animate.min.css"/>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		h1{
			width: 600px;
			padding: 50px;
			text-align: center;
			margin-top: 100px;
			margin: 0 auto;
			color: #f35626;
		}
		.odiv {
			width: 600px;
			padding: 50px 50px;
			text-align: center;
			margin: 0 auto;
			border-radius: 15px;
			border: 5px solid #f7f7f9;
		}
		.odiv button{
			margin: 10px 0px;
		    color: #fff;
		    border-color: #80bdff;
			background-color: #80bdff;
		}
		.odiv ul {
			width: 100%;
			list-style: none;
		}
		
		.odiv ul li {
			width: 100%;
			height: 50px;
			border-radius: 15px;
			margin-top: 20px;
			background: #957bbe;
			color: #fff;
			line-height: 50px;
			font-size: 22px;
			font-weight: bold;
			text-align: center;
			transition: all 2s;
		}
		
		.odiv ul li:first-child {
			margin-top: 0px;
		}
	</style>

	<body>
		<h1>原生xml请求</h1>
		<div class="odiv">
			<button onclick="xmldata()" type="button" class="btn btn-outline-primary">点击发射</button>
			<ul id="dragslot">
				<li>前提配置</li>
			</ul>
		</div>
		
		<script type="text/javascript">
			var oul = document.getElementById('dragslot');
			function xmldata(){
				var oli = document.createElement('li');//创建一个Dom节点 li
				var tex = document.createTextNode('触发click事件');//创建一个文本节点
				oli.appendChild(tex);//插入到刚刚创建的oli里
				oul.appendChild(oli);//然后把刚刚创建的li插入到ul里
				oli.setAttribute('class','zoomIn animated');//给li的添加属性class
				
				
				var xh_ajax = new XMLHttpRequest;创建XMLHttpRequest 对象的语法
				var xmlhttp;
				if(window.XMLHttpRequest)//判断window.XMLHttpRequest是否为true
				{
					xmlhttp = new XMLHttpRequest();
				}
				else
				{
					console.log('2');
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}
				xmlhttp.onreadystatechange = function(){//onreadystatechange 事件中的就绪状态时执行
				switch(xmlhttp.readyState){
					case 0:
//						console.log('请求未初始化');
						var oli_0 = document.createElement('li');
						var tex = document.createTextNode('请求未初始化');
						oli_0.appendChild(tex);
						oul.appendChild(oli_0);
						oli_0.setAttribute('class','zoomIn animated');
						break;
					case 1:
//						console.log('服务器连接已建立');
						var oli_1 = document.createElement('li');
						var tex = document.createTextNode('服务器连接已建立');
						oli_1.appendChild(tex);
						oul.appendChild(oli_1);
						oli_1.setAttribute('class','zoomIn animated');
						break;
					case 2:
//						console.log('请求已接收');
						var oli_2 = document.createElement('li');
						var tex = document.createTextNode('请求已接收');
						oli_2.appendChild(tex);
						oul.appendChild(oli_2);
						oli_2.setAttribute('class','zoomIn animated');
						break;
					case 3:
//						console.log('请求处理中');
						var oli_3 = document.createElement('li');
						var tex = document.createTextNode('请求处理中');
						oli_3.appendChild(tex);
						oul.appendChild(oli_3);
						oli_3.setAttribute('class','zoomIn animated');
						break;
					case 4:
//					console.log('请求已完成，且响应已就绪');
						var oli_4 = document.createElement('li');
						var tex = document.createTextNode('请求已完成，且响应已就绪');
						oli_4.appendChild(tex);
						oul.appendChild(oli_4);
						oli_4.setAttribute('class','zoomIn animated');
						break;
				}
				
			  	if (xmlhttp.readyState==4 && xmlhttp.status==200){//请求成功
//		    		oli.innerHTML=xmlhttp.responseText;
					var olir = document.createElement('li');
					var tex = document.createTextNode(xmlhttp.responseText);
					olir.appendChild(tex);
					oul.appendChild(olir);
					olir.setAttribute('class','zoomIn animated');
			    }

				}
				xmlhttp.open("POST","http://sign.tianshuai.com.cn/index.php/Home/Trill/actionTrillCount",true);
				xmlhttp.send();
			}
		</script>
	</body>
</html>
猜你喜欢
