ajax 请求本项目,AJAX请求小项目(示例代码)

图灵

* {

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;

}

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);

}

}

}

}