ajax实现消息实时刷新
来源:互联网 发布:wifi网络延迟高怎么办 编辑:程序博客网 时间:2024/06/05 08:18
现往这个数据表里面插入数据,要求不点击刷新按钮实时显示在浏览器中,这就需要用到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.onload=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浏览器中还是会出现中文乱码的问题,火狐显示正常~
0 0
- ajax实现消息实时刷新
- ajax实现实时刷新
- 聊天室的实现(消息实时刷新)
- 聊天室的实现(消息实时刷新)
- 聊天室的实现(消息实时刷新)
- jquery使用ajax实现实时刷新
- 用Ajax实现网页实时消息功能
- ajax实时刷新
- json+ajax实现实时刷新和增删查功能
- Django1.6+jQuery Ajax + JSON 实现页面局部实时刷新
- gulp 实现实时刷新
- gulp 实现实时刷新
- Redis 实现 实时消息
- 基于Ajax无刷新实时loading页面
- ajax无刷新实时验证用户名密码
- Highcharts通过AJAX访问后台数据库实时刷新
- 实现实时刷新的效果
- Swing实时刷新的实现
- 基于论文分析Google的张量处理器TPU
- 面向对象实验二 用况图
- iOS 抛出异常 收集奔溃信息处理
- Linux系统下如何开启Mysql远程连接服务
- 4412驱动-poll阻塞 -二
- ajax实现消息实时刷新
- 30
- mysql5.7在windows7下my.ini文件加载路径及数据位置修改
- 算法---二叉树的建立,查找,删除
- mysql ibdata1文件非常大如何解决 主从数据库配置的时候也要注意
- centos6 升级php5.3.3 到 php5.5.38 或者其它版本
- winedt (latex 编译器)解决中文的问题(CJK & CTEX)
- 《APUE》读书笔记-第十九章伪终端
- 定时任务