ajax实现消息实时刷新
2017-05-03 11:02
232 查看
现往这个数据表里面插入数据,要求不点击刷新按钮实时显示在浏览器中,这就需要用到ajax。
![](https://img-blog.csdn.net/20170503105231274?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd190X3lfeQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
第一步,编写js文件AjaxRequest.js:
第二步,编写index.php文件,将上面的js文件包含进来:
第三步,编写后台getInfo.php文件,从数据库中查询数据并发送到前台:
第一步,编写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浏览器中还是会出现中文乱码的问题,火狐显示正常~
相关文章推荐
- PHP+AJAX实现无刷新注册(带用户名实时检测)
- bootstrap-wysiwyg整合ajaxFileUpload实现图片实时上传刷新
- Jquery结合setinterval实现ajax实时刷新前台数据的效果
- ajax实现实时刷新
- PHP实现的消息实时推送功能【基于反ajax推送】
- bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
- 用Ajax实现网页实时消息功能
- json+ajax实现实时刷新和增删查功能
- 关于ajax局部刷新,从数据库实时更新数据到页面(一般是下订单成功后发送消息到后台)
- jquery使用ajax实现实时刷新
- 聊天室的实现(消息实时刷新)
- 聊天室的实现(消息实时刷新)
- ajax 无刷新 实现页面右下角弹出消息提示框
- AjaxPro实现无刷新模仿MSN提示消息功能
- PHP+AJAX实现无刷新注册(带用户名实时检测)
- 我的AjaxPage对象(Asp.NET 1.1)-借用2.0的Callback实现无刷新回调
- 更正用AJAX实现IE TREE无刷新取值的方法
- Ajax实现无刷新三联动下拉框
- 用AJAX实现无刷新数据读取与显示
- AJAX + SVG 实现实时监控图表