AJAX请求小项目

Posted HandsomeHan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX请求小项目相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图灵</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		#wrap {
			width: 500px;
			margin: 100px auto 0;
		}
		#wrap input {
			width: 486px;
			height: 40px;
			padding-left: 10px;
		}
		#list {
			margin-top: 10px;
		}
		#list li {
			width: 460px;
			/*height: 40px;*/
			line-height: 40px;
			padding: 0 20px;
		}
		#list li.left {
			text-align: left;
			background: #ccc;
		}
		#list li.right {
			text-align: right;
			background: #777;
		}
	</style>
</head>
<body>
	<div id="wrap">
		<input id="ipt" type="text" placeholder="请输入你想说的话">
		<ul id="list">
			<!-- <li class="left">ME:hahahahaha</li>
			<li class="right">你是傻逼:PC</li> -->
		</ul>
	</div>
	<script>
		var ipt = document.getElementById(‘ipt‘);
		var list = document.getElementById(‘list‘);
		document.onkeyup = function (e) {
			var e = e || window.event;
			if (e.keyCode == 13) {
				if (ipt.value == ‘‘) {
					alert("请输入内容");
				} else {
					sendMsg();
					ipt.value = "";
				}
			}
		}
		function sendMsg() {
			var myMsg = document.createElement(‘li‘);
			myMsg.className = ‘left‘;
			myMsg.innerHTML = "ME:" + ipt.value;
			list.appendChild(myMsg);
			var xhr = null;
			if (window.XMLHttpRequest) {
				xhr = new XMLHttpRequest();
			} else {
				xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
			}
			var url = ‘http://www.tuling123.com/openapi/api?key=fb6b7bcfbe52fccdb7f5d752a3088f75&info=‘+ipt.value+‘&userid=1234567‘;
			xhr.open(‘get‘,url,true);
			xhr.send(null);
			xhr.onreadystatechange = function () {
				if (xhr.readyState == 4) {
					if (xhr.status == 200) {
						var data = JSON.parse(xhr.responseText).text;
						var pc = document.createElement(‘li‘);
						pc.className = ‘right‘;
						pc.innerHTML = data + "：PC";
						list.appendChild(pc);
					} else {
						alert(xhr.status);
					}
				}
			}
		}
		
	</script>
</body>
</html>

　　

以上是关于AJAX请求小项目的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序代码片段

ajax与 axios的基础讲解（附代码及接口）

jQuery高级Ajax

回归 | js实用代码片段的封装与总结（持续更新中...）

AJAX请求类实例代码

Spring注解处理Ajax请求-JSON格式[系统架构:Spring+SpringMVC+MyBatis+MySql]