ajax实现消息实时刷新

最新推荐文章于 2024-10-06 16:18:14 发布

w_t_y_y

最新推荐文章于 2024-10-06 16:18:14 发布

阅读量1.2w

点赞数 1

本文链接：https://blog.csdn.net/w_t_y_y/article/details/71107932

版权

现往这个数据表里面插入数据，要求不点击刷新按钮实时显示在浏览器中，这就需要用到ajax。

第一步，编写js文件AjaxRequest.js：

var net = new Object(); // 定义一个全局变量net
// 编写构造函数
net.AjaxRequest = function(url, onload, onerror, method, params) {
	this.req = null;
	this.onload = onload;
	this.onerror = (onerror) ? onerror : this.defaultError;
	this.loadDate(url, method, params);
}
// 编写用于初始化XMLHttpRequest对象并指定处理函数，最后发送HTTP请求的方法
net.AjaxRequest.prototype.loadDate = function(url, method, params) {
	if (!method) {
		method = "GET";
	}
	if (window.XMLHttpRequest) {
		this.req = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		this.req = new ActiveXObject("Microsoft.XMLHTTP");
	}
	if (this.req) {
		try {
			var loader = this;
			this.req.onreadystatechange = function() {
				net.AjaxRequest.onReadyState.call(loader);
			}
			this.req.open(method, url, true);// 建立对服务器的调用
			if (method == "POST") {// 如果提交方式为POST
				/*geturl=encodeURI(url); 
				geturl=encodeURI(geturl); //两次也可以写成geturl=encodeURI(encodeURI(geturl)); 
				xmlhttp.open("GET",geturl,true); */

				this.req.setRequestHeader("Content-Type",
						"application/x-www-form-urlencoded"); // 设置请求头
			}
			this.req.send(params); // 发送请求
		} catch (err) {
			this.onerror.call(this);
		}
	}
}

// 重构回调函数
net.AjaxRequest.onReadyState = function() {
	var req = this.req;
	var ready = req.readyState;
	if (ready == 4) {// 请求完成
		if (req.status == 200) {// 请求成功
			this.onload.call(this);
		} else {
			this.onerror.call(this);
		}
	}
}
// 重构默认的错误处理函数
net.AjaxRequest.prototype.defaultError = function() {
	alert("错误数据\n\n回调状态:" + this.req.readyState + "\n状态: " + this.req.status);
}

第二步，编写index.php文件，将上面的js文件包含进来：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<script language="javascript" src="AjaxRequest.js"></script>
<script language="javascript">
/******************错误处理的方法*******************************/
function onerror(){
	alert("您的操作有误！");
}
/******************实例化Ajax对象的方法*******************************/
function getInfo(){
	var loader=new net.AjaxRequest("getInfo.php?nocache="+new Date().getTime(),deal_getInfo,onerror,"GET");
}
/************************回调函数**************************************/
function deal_getInfo(){
	document.getElementById("showInfo").innerHTML=this.req.responseText;
}
window.οnlοad=function(){
	getInfo();	//调用getInfo()方法获取公告信息
	window.setInterval("getInfo()", 1000);	//每隔10分钟调用一次getInfo()方法
}
</script>

<title>实时显示公告信息</title>
</head>
<body>
<div style="border: 1px solid;height: 50px; width:200px;padding: 5px;">
	<marquee direction="up" scrollamount="3">
		<div id="showInfo"></div>
	</marquee>
</div>
</body>
</html>

第三步，编写后台getInfo.php文件，从数据库中查询数据并发送到前台：

<meta http-equiv="Content-Type" content="text/html; charset=gbk" />

<?php 
include 'mysqlconn.php';
$sql="select name from zt";
$re=$pdo->prepare($sql);
$re->execute();
$res=$re->fetchAll(PDO::FETCH_ASSOC);
for($i=0;$i<count($res);$i++){
	
	
	
	$str=$res[$i]['name'];
	//$str=urldecode($str); //解码
	$str=iconv("GBK","UTF-8",$str); //编码转换
	
	
	echo "<li>".$str."</li>";
	//out.print("<li>"++"</li>");


}

?>

我在后台文件中用iconv进来转码，但是在IE浏览器中还是会出现中文乱码的问题，火狐显示正常~