难道只能设置定时器每隔一秒通过 Ajax 向后台请求数据来实现吗？
支持上述 李宏训 所说的三种方式，另外还支持 Flash Socket、隐藏IFrame、JSONP Polling等方式。提供前端和服务器端的配套机制，并兼容各种浏览器，它的前端js模块会判断浏览器的能力，自适应选择最合适的Comet方式。
我知道有三种方式： 1，ajax短连接：客户端每隔一秒钟发一次请求，服务器收到请求后会立刻返回结果，不管有没有新数据。 2，ajax长连接：客户端发送一次请求，服务器端收到请求后查询有没有新数据，如果没有新数据就阻塞这个请求，直到有新数据或者超时为止。客户端每次收到请求返回结果后立刻再发一次请求。comet貌似就是这个原理。 3，WebSocket：这就不是一个HTTP协议了，而是一个tcp协议，而且Socket这个玩意顾名思义就是一个流了，可以双向操作。缺点是有些浏览器不支持。对比延迟： 假设网络延迟是m毫秒，那么ajax短连接的延迟在m到1000毫秒之间，另外两种基本只有m毫秒的延迟。 对比资源占用： 应该是1&2&3。但是1和2的比较要看情况，如果两次请求间隔时间很长的话应该是2&1&3。
3、用comet,其实也是ajax 了。 只是前端发送一个请求后，服务端保持这个请求。有数据就事实返回。没数据就一直保持这个连接。你会说如果连接断了、超时呢，断了就再发起。
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。链接：/question//answer/来源：知乎
阅读(...) 评论()
Bolg of 冯广乐后使用快捷导航没有帐号？
浏览&&：&2326
回复&&：&7
回复的帖子
就给了这么一个东西····
我只会显示数据库里的东西··刚毕业的菜鸟求助
回复的帖子
我知道了···传个URL组合后面的东西就会插入到数据库
回复的帖子
怎么写Ajax，一句两句说不清楚；
但我感觉后台的意思是让你把前端数据写成json格式的；
比如一个导航，需要后台调用的地方，要用json来写，然后用js调用到html中；
刚开始遇到类似项目时，也是百思不得其解；后来才知道后台是用json传输数据的；你写成json格式时，他们才能方便对接；
回复的帖子
路过 帮顶 嘿嘿不错的帖子，支持下
回复的帖子
路过 帮顶 嘿嘿不错的帖子，支持下
回复的帖子
又见楼主分享帖子
回复的帖子
楼主辛苦了
回复的帖子
其实就是前台通过js 写个ajax请求把数据传给后台，然后后台接收到这个数据， 再保存到数据库。。&&
简单的写个列子吧，撸主参考下：
//前端js操作：
function testAjax(){
var url=&/testAjaxUrlJson/&;//后台接收处理url
var txtContent= &textprm&;//传输内容;
var objData = [
& && &&&{ name: 'txtContent', value: txtContent}
& & ];//post方式传送的数据
& & $.ajax({
& && &&&url: url
& && &&&, data: objData
& && &&&, dataType: 'json'
& && &&&, type: 'POST'
& && &&&, success: function (data) {
& && && && &if (data.Result == 'success') {
& && && && & alert(&操作成功&);//请求传输成功回调函数
& && && && &}
& && && && &else
& && && && &{
& && && && &&&alert(&操作失败&);//请求传输失败回调函数
& && && && & }
& && &&&}
& && &&&, error: function (msg) {
& && && &alert(msg); //错误信息
& &
& && &&&}
& & });
}
//后台接收 MVC下
public JsonResult testAjax(Formcollection form)
{
& & Hashtable ht = new Hashtable();
& &string content=form[&txtContent&]
& &//数据库操作
& &//保存数据库中【数据操作，自己填充】
& &//返回json
& &bool result=
& &if(数据库操作成功【result==true】)
& && &&&ht[&Result&]=&success&;
else
& &ht[&Result&]=&failed&;
return Json(ht);
}复制代码
电话：010-
地址：北京市海淀区北清路68号
移动客户端下载
微信公众号：yonyouudn
扫描右侧二维码关注我们
专注企业互联网的技术社区
版权所有：用友网络科技股份有限公司82041
京公网网备安4
Powered by Discuz!当前位置： >
使用原生ajax访问后台数据并将其展现在前端页面中（小菜鸟自己整理玩的，大神勿喷）
发布时间：
& 作者：本站编辑 &
浏览次数：
摘要: 首先你要有php的环境，关于php环境的搭建，php本地站点的搭建，此处不再重复请看这里：/Gabriel-Wei/p/...
首先你要有php的环境，关于php环境的搭建，php本地站点的搭建，此处不再重复请看这里：cool.net/Gabriel-Wei/p/5950465.html我们把wamp打开，并且在Dreamweaver里面新建一个phpStudy站点。这篇文章我们需要两个文件，一个test.html前端的页面，一个tigong.php数据的提供页，下面分别进行介绍。
tigong.php我们在Dreamweaver,phpStudy站点下面，新建一个tigong.php页面，里面内容如下：
<span style="font-family:Courier Nfont-size:12line-height:1.5;color: # &?php
<span style="font-family:Courier Nfont-size:12line-height:1.5;color: # echo"hello Tom";
<span style="font-family:Courier Nfont-size:12line-height:1.5;color: # ?&
为了让里面支持中文，我们加入这句话header("content-type:text/charset=utf-8")，此时的tigong.php如下
header("content-type:text/charset=utf-8");
echo"Hello 李明";
用我们的浏览器跑一下，如图：将地址栏的信息地址复制一份，用postman测一下数据，如果不知道什么是postman，请自行百度，后面的数据交互文章会一直用到postman。（简而言之，postman就是测试一下给的接口能不能正常接收数据），如图：tigong.php文件准备好了，接下来我们写我们的前端页面。
test.html 我们设置为点击按钮获取数据
&!doctype html&
&script type="text/javascript"&
window.onload=function(){
var bt1=document.getElementById("bt1");
var div1=document.getElementById("div1");
//给bt1绑定事件，一会做onload完毕以后装在数据
bt1.onclick=function(){
//第一步：创建ajax对象
if(window.XMLHttpRequest){
var xmlHttp=new XMLHttpRequest();
var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
//第二步：获取要放送的数据。这个例子没有
//第三步：设置一下要发送的方式和请求目标地址
xmlHttp.open("GET","tigong.php");
//第三个参数不写默认是异步
//第四步：设置请求的编码
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//第五步：监控整个过程，绑定onreadystatechange事件，总共调了四次0-1.1-2.2-3.3-4，我们需要的是4和200
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==<span style="font-family:Courier Nfont-size:12line-height:1.5;background-color: #f5f5f5; color: # && xmlHttp.status==<span style="font-family:Courier Nfont-size:12line-height:1.5;background-color: #f5f5f5; color: #0){
//后台数据输出什么，我们的responseText就得到什么
div1.innerHTML=xmlHttp.responseT
//第六步：发送请求
xmlHttp.send();
&meta charset="utf-8"&
background:#f00;
color:#fff;
font-weight:bold;
width:200px;
height:200px;
width:200px;
&title&ajax&/title&
&div id="div1"&
&!--在数据没有过来的时候，我们显示一张loading的图片，百度搜loading一大推--&
&img src="images/1.gif"&
&/div&&br&
&input type="button" id="bt1" value="点击获取数据"&
如图所示：&&点击之后： 可以看到，我们的php页面里面的数据回来了。
查看一下chrome的开发工具&在network监控里面选择all，可以查看所有文件，如果没有，就刷新一下页面，点击tigong.php
转载请注明本文出处：
上一篇：没有了
我来说两句
友情链接：怎么使用 JavaScript 将网站后台的数据变化实时更新到前端？_知识号
说三道四 最新新闻话题新闻专题评论
> 新闻内容
怎么使用 JavaScript 将网站后台的数据变化实时更新到前端？
难道只能设置定时器每隔一秒通过Ajax向后台请求数据来实现吗？前端开发JavaScriptAjax网站后台定时器李宏训，O_O我知道有三种方式：1，ajax短连接：客户端每隔一秒钟发一次请求，服务器收到请求后会立刻返回结果，不管有没有新数据。2，ajax长连接：客户端发送一次请求，服务器端收到请求后查询有没有新数据，如,
难道只能设置定时器每隔一秒通过 Ajax 向后台请求数据来实现吗？前端开发JavaScriptAjax网站后台定时器李宏训，O_O 我知道有三种方式：1，ajax短连接：客户端每隔一秒钟发一次请求，服务器收到请求后会立刻返回结果，不管有没有新数据。2，ajax长连接：客户端发送一次请求，服务器端收到请求后查询有没有新数据，如果没有新数据就阻塞这个请求，直到有新数据或者超时为止。客户端每次收到请求返回结果后立刻再发一次请求。comet貌似就是这个原理。3，WebSocket：这就不是一个HTTP协议了，而是一个tcp协议，而且Socket这个玩意顾名思义就是一个流了，可以双向操作。缺点是有些浏览器不支持。对比延迟：假设网络延迟是m毫秒，那么ajax短连接的延迟在m到1000毫秒之间，另外两种基本只有m毫秒的延迟。对比资源占用：应该是1&2&3。但是1和2的比较要看情况，如果两次请求间隔时间很长的话应该是2&1&3。陈焕新，程序猿nodejs的 http://socket.io 支持上述 李宏训 所说的三种方式，另外还支持 Flash Socket、隐藏IFrame、JSONP Polling等方式。http://Socket.io提供前端和服务器端的配套机制，并兼容各种浏览器，它的前端js模块会判断浏览器的能力，自适应选择最合适的Comet方式。秦广东，前端开发攻城师还有一种服务器推的技术 也是socket长连接 ，服务器端如果有数据更新 主动发给客户端 一般现在股票软件、一些聊天室采用的是这种技术！曾智，鸡翅.多!按照一般的场景，你说的定时去服务器抓取是成本最低的实现方法知乎用户，擅长web前端开发、热爱互联网。喜欢分享。用comet,其实也是ajax 了。 只是前端发送一个请求后，服务端保持这个请求。有数据就事实返回。没数据就一直保持这个连接。你会说如果连接断了、超时呢，断了就再发起。康佳，写字按行收钱@李宏训 的方案比较全了，也是用的比较多的。比如qunar的机票查询和weibo的im。还有一种是借助activex或者flash开client的socket做tcp请求。刘德文，软件工程师我知道的有2种方式：1. AJAX2. 借助flash，利用AS开一个socket周西，pythoner，关注web开发技术可以了解下tornado，facebook都用它做friendfeed,它可以保持连接，一直不断的向浏览器返回数据，有websocket和iframe两种方式的John Wang，software developer for Windows, iOS an…可以尝试SignalRASP.NET SignalR"http://ASP.NET SignalR is a new library for http://ASP.NET developers that makes it incredibly simple to add real-time web functionality to your applications. What is "real-time web" functionality? It's the ability to have your server-side code push content to the connected clients as it happens, in real-time."
浏览：98发布： 15:50:36
浏览：57发布： 12:12:54
浏览：123发布： 14:09:04
浏览：109发布： 9:23:28
浏览：19发布： 12:56:33
浏览：163发布： 23:01:59
浏览：86发布： 21:41:57
浏览：104发布： 8:23:01
浏览：103发布： 10:31:22
浏览：17发布： 14:36:00无刷新实时取得数据 - Web前端当前位置:& &&&无刷新实时取得数据无刷新实时取得数据&&网友分享于：&&浏览：82次无刷新实时获得数据
我们可以让程序自动刷新.定时向服务器请求数据.5秒取一次数据,10秒取一次数据. 利用XMLHTTP发出请求并取得数据.传到客户端,客户端重新组织并显示数据. demo.htm 前台显示. &script language="JavaScript"& function GetResult() { /* *--------------- GetResult() ----------------- * GetResult() * 功能:通过XMLHTTP发送请求,返回结果. * 参数:str,字符串,发送条件. * 实例:GetResult();
*--------------- GetResult() ----------------- */ var oBao = new ActiveXObject("Microsoft.XMLHTTP"); //特殊字符：+,%,&,=,?等的传输解决办法.字符串先用escape编码的. //Update: 12:22 oBao.open("POST","Server.asp",false); oBao.send(); //服务器端处理返回的是经过escape编码的字符串. var strResult = unescape(oBao.responseText); //将字符串分开. var arrResult = strResult.split("###"); RemoveRow(); //删除以前的数据. //将取得的字符串分开,并写入表格中. for(var i=0;i&arrResult.i++) { arrTmp = arrResult[i].split(""); num1 = arrTmp[0]; //字段num1的值 num2 = arrTmp[1]; //字段num2的值 row1 = tb.insertRow(); cell1 = row1.insertCell(); cell1.innerText = num1; cell2 = row1.insertCell(); cell2.innerText = num2; } } function RemoveRow() { //保留第一行表头,其余数据均删除. var iRows = tb.rows. for(var i=0;i&iRows-1;i++) { tb.deleteRow(1); } } function MyShow() { //2秒自动刷新一次,2秒取得一次数据. timer = window.setInterval("GetResult()",2000); } &/script& &body & &p& &/p& &table width="47%" height="23" border="0" cellpadding="1" cellspacing="0" id="tb"& &tr& &td&num1&/td& &td&num2&/td& &/tr& &/table& Server.asp 后台读取数据 &% Language="JavaScript" %& &% function OpenDB(sdbname) { /* *--------------- OpenDB(sdbname) ----------------- * OpenDB(sdbname) * 功能:打开数据库sdbname,返回conn对象. * 参数:sdbname,字符串,数据库名称. * 实例:var conn = OpenDB("database.mdb"); * author:wanghr100(灰豆宝宝.net) * update: 8:18 *--------------- OpenDB(sdbname) ----------------- */ var connstr = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath(sdbname); var conn = Server.CreateObject("ADODB.Connection"); conn.Open(connstr);
} var sResult = new Array(); var oConn = OpenDB("data.mdb"); //特殊字符：+,%,&,=,?等的传输解决办法.客户端字符是经过escape编码的 //所以服务器端先要经过unescape解码. //Update: 12:22 var sql = "select num1,num2 from nums order by id"; var rs = oConn.Execute(sql); while(!rs.EOF) { //一条记录用"###"隔开.每列数据用""隔开. 这是以只有两个列数据的情况. sResult[sResult.length] = rs("num1").Value + "" + rs("num2").Value rs.MoveNext(); } //escape解决了XMLHTTP。中文处理的问题. Response.Write(escape(sResult.join("###"))); %& 数据库data.mdb 表 nums id,自动编号 num1,文本 num2,文本 测试数据 id num1 num2 1 20.70 20.810 2 10.5 20.5 3 12.3 300 4 132 323 5 563 56 6 20 10
用js+webservice实现无刷新,动态查询数据库阿 例子: 页面：
&INPUT type="button" value="Button" onclick="getdata()"&&br&
&span id="div1" class="list"&&/span&
&script language=javascript&
setInterval(getdata,1000); //动态定时调用
&/script& 脚本：
&SCRIPT ID="clientEventHandlersJS" LANGUAGE="javascript"&
function getdata()
var index=0;
docSubmit =new ActiveXObject("Microsoft.XMLDOM");
docSubmit.async =
docSubmit.load("http://localhost/WebApplication1/Service1.asmx/GetData?maxval=5");
docSubmit.loadXML(docSubmit.xml.replace(/&/g,"&").replace(/&/g,"&"));
nodeList=docSubmit.documentElement.getElementsByTagName("ds");
for (i=0;i&nodeList.i++)
s=s+nodeList(i).selectSingleNode("KeShimch").text+'&br&';
div1.innerHtml ="";
div1.innerHTML=s;
div1.style.visibility="visible";
注意： 我试了一下,问题在fromework1.0和1.1是有区别的, 在1.1的 machine.config （C:\WINNT\Microsoft.NET\Framework\v1.1.4322\CONFIG）,默认webservice去除了post,get方法 你可在你的 machine.config 中加上 或者 只在 webServices 项目的 Web.config 的&system.web&里加上： &webServices&
&protocols&
&add name="HttpPost" /&
&add name="HttpGet" /&
&/protocols& &/webServices& 否则，在ie地址栏输入 webServices 访问地址串时，提示：请求格式无法识别。 还有 docSubmit = new ActiveXObject("MSXML2.DOMDocument");
//1.0 换成 docSubmit =new ActiveXObject("Microsoft.XMLDOM");
//1.1 －－－－－－－－－－－－－－－－－－－－－－－－－－ web服务方法：
[WebMethod]
public string GetData(string maxval)
BaseClass.DbManagerSql dbm=new BaseClass.DbManagerSql();
string strSql="select * from s_KeShi where Keshidm&"+
DataSet ds=dbm.Query(strSql);
return ds.GetXml();
} 返回的xml数据：
&?xml version="1.0" encoding="utf-8" ?&
&string xmlns="http://tempuri.org/"& &NewDataSet&
&ds& &KeShidm&6&/KeShidm& &KeShimch&财务部&/KeShimch& &/ds&
&ds& &KeShidm&7&/KeShidm& &KeShimch&政工部&/KeShimch& &/ds& &ds& &KeShidm&8&/KeShidm& &KeShimch&安质部&/KeShimch& &/ds&
&ds& &KeShidm&9&/KeShidm& &KeShimch&电管部&/KeShimch& &/ds&
&ds& &KeShidm&10&/KeShidm& &KeShimch&运输公司&/KeShimch& &/ds&
&ds& &KeShidm&11&/KeShidm& &KeShimch&局长&/KeShimch& &/ds& &ds& &KeShidm&202&/KeShidm& &KeShimch&青宁变电站&/KeShimch&&/ds&
&/NewDataSet& &/string& 使用FusionCharts的报表工具，动态获取数据，想定时获取新的数据又刷新页面，使用了jquery但是每次都刷新页面。下面是我的代码，应该如何修改呀 &%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%& &!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& &html& &head& &title&FusionCharts v3 Documentation&/title& &script language="JavaScript" src="JSClass/FusionCharts.js"&&/script& &script type="text/javascript" src="js/jquery-1.4.2.min.js"&&/script& &script type="text/javascript"& $(document).ready(function () { setInterval(refreshMeetInfo, 5000); }); $(function refreshMeetInfo()
{ var queryStr={}; $.ajax({
type: "post",
url: "data.jsp",
data: queryStr,
dataType: "text",
success: callback
function callback(data){
var chart = new FusionCharts("Charts/MSColumn2D.swf", "chart1Id", "800", "600", "0", "0");
chart.setDataXML(data);
chart.render("chartDiv"); }
}); &/script& &/head& &body& &table width="70%" border="0" cellspacing="0" cellpadding="3" align="center"& &tr&
&td valign="top" class="text" align="center"&
&div id="chartdiv" align="center"&&/div& &/td& &/tr& &/table& &/body& &/html&
FusionCharts V3产生的图表自动进行刷新，内容刷新，不是整个swf区域刷新
/blog/774366
FusionCharts 的刷新
配置数据源的方式有很多种，这里举一个例子：
view plaincopy to clipboardprint?&html&
&META HTTP-EQUIV="pragma" CONTENT="no-cache"/&
&META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"/&
&META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb :57 GMT"/&
&META HTTP-EQUIV="expires" CONTENT="0"/&
&script language="JavaScript" src="../chart/JSClass/FusionCharts.js" mce_src="chart/JSClass/FusionCharts.js"&&/script&
&body bgcolor="#ffffff"&
&div id="chartdiv" style= "float:left"&&/div
&script type="text/javascript"&&!--
var myChart = new FusionCharts("../chart/Charts/Column3D.swf", "chartid", "360", "230","0","1");
myChart.setDataURL("DataDemo.xml" + "?t="+ new Date().getTime());
myChart.render("chartdiv");
// --&&/script&
&META HTTP-EQUIV="pragma" CONTENT="no-cache"/& &META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"/& &META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb :57 GMT"/& &META HTTP-EQUIV="expires" CONTENT="0"/&
&script language="JavaScript" src="../chart/JSClass/FusionCharts.js" mce_src="chart/JSClass/FusionCharts.js"&&/script&
&body bgcolor="#ffffff"&
&div id="chartdiv" style= "float:left"&&/div
&script type="text/javascript"&&!--
var myChart = new FusionCharts("../chart/Charts/Column3D.swf", "chartid", "360", "230","0","1");
myChart.setDataURL("DataDemo.xml" + "?t="+ new Date().getTime());
myChart.render("chartdiv");
// --&&/script&
Flash图表无法刷新，开始以为是脚本的bug，后来时间戳帮助我们解决了问题。 时间戳的强大功能，时间戳在许多时候我们可以巧妙的利用。
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有