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>
轉載于:https://www.cnblogs.com/handsomehan/p/6081188.html
總結
- 上一篇： svn 的备份还原
- 下一篇： python简单的web服务器