本文介绍了如何使用HTML、CSS和JavaScript的AJAX技术与PHP后端进行交互，实现在聊天室中通过定时请求动态加载新消息的功能。通过创建XMLHttpRequest对象和设置POST请求头，实现了客户端向服务器发送和接收数据的过程。
html>
聊天室div {
width: 32rem;
yellowgreen;
}
document.write(new Date());
function createXmlHttpRequest() {
var request = false;
request = new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象，除 IE 外的浏览器都支持这个方法。
if (request == false) {
request = ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)。
} else if (request == false) {
request = ActiveXobject("Microsoft.XMLHTTP");//使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)。
} else if (request == false) {
//alert("创建request失败！");
} else {
//alert("创建成功！")
}
}
function demo02() {
var request = false;
request = new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象，除 IE 外的浏览器都支持这个方法。
if (request == false) {
request = ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)。
} else if (request == false) {
request = ActiveXobject("Microsoft.XMLHTTP");//使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)。
} else if (request == false) {
//alert("创建request失败！");
} else {
//alert("创建成功！")
}
var unameobj = document.getElementById("uname");
var uname = unameobj.value;
var contentobj = document.getElementById("content");
var content = contentobj.value
contentobj.value = '';
var mess = "username=" + uname + "&" + "content=" + content;
// alert(mess);
request.open("POST", "php/write.php", true);
request.setRequestHeader("Content-type", 'application/x-www-form-urlencoded');
request.send(mess);
}
function getMass() {
var request = false;
request = new XMLHttpRequest();//尝试创建 XMLHttpRequest 对象，除 IE 外的浏览器都支持这个方法。
if (request == false) {
request = ActiveXobject("Msxml12.XMLHTTP");//使用较新版本的 IE 创建 IE 兼容的对象(Msxml2.XMLHTTP)。
} else if (request == false) {
request = ActiveXobject("Microsoft.XMLHTTP");//使用较老版本的 IE 创建 IE 兼容的对象(Microsoft.XMLHTTP)。
} else if (request == false) {
//alert("创建request失败！");
} else {
//alert("创建成功！")
}
createXmlHttpRequest();
setInterval(function () {
request.open("GET", "php/read.php", true);
request.send(null);
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
//alert("服务器响应数据：" + this.responseText);
document.getElementById("con").innerHTML = this.responseText;
}
}
}, 2000);
}
getMass();
扫一扫
489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
