使用Ajax动态的显示时间
2015-11-29 11:50
232 查看
在最初学习Ajax的时候视频中有一个例子是动态的加载服务器端的时间显示在前台页面,当时不懂原理,看着视频敲了一样的代码,就是运行不出结果,现在在项目中遇到了客户的需求就是需要在前台页面动态的显示时间,刚开始被分配到这个任务的时候有点不知道从哪里下手,心里就感觉自己不会上网查资料做出来发现So Easy!而且还不是一种方法。下面来看以下的两种方法。
第一种:中规中矩的原始Ajax方法。
首先在要显示时间的地方使用任何可以显示文本的标签,本例中使用label
然后开始使用我们在学习Ajax时非常熟悉的XMLHttpRequest对象开始实现。
最后看一下Controller中的方法
第二种:使用JQuery封装好的Ajax
首先前台的要求不变,相应的位置上,任何可以显示文本的标签,这里使用span
然后在页面中引入JQuery,版本不限,只有封装了ajax,本例中的版本为1.8.0的
开始调用
Controller中的方法如下
小结
两种方法一个是原生态的,一个是JQuery-Ajax,相比后者的使用更加的简单,这也是JQuery作用的体现吧,但是本质上是没有区别的,重点都是要设置每1秒调用一次显示时间的方法。两种方法根据自己的实际情况进行选择。
第一种:中规中矩的原始Ajax方法。
首先在要显示时间的地方使用任何可以显示文本的标签,本例中使用label
<label id=lbl></label>
然后开始使用我们在学习Ajax时非常熟悉的XMLHttpRequest对象开始实现。
<script> function GetXmlHttp() //判断是否已经存在了XMLHttpRequest对象 { return window.XMLHttpRequest ? newXMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); } function GetRequest() { var url ="FHome/GetTime";//URL格式:Controller/方法 xmlHttp = GetXmlHttp(); //调用GetXMLHTTP方法,以获得XMLHttpRequest对象 xmlHttp.onreadystatechange =OnReadyStateChange;//调用回调方法 xmlHttp.open("GET",url, true); xmlHttp.send(""); } function OnReadyStateChange() { if(xmlHttp.readyState == 4) { document.getElementById("lbl").innerHTML =xmlHttp.responseText + "<br />更新间隔: " +interval + "ms"; } } var xmlHttp; varinterval = 1000; //重要的需要设计一个时间间隔 vartimer = window.setInterval(GetRequest, interval);//每1000ms调用一次显示时间的方法 </script>
最后看一下Controller中的方法
public ActionResult GetTime() { Response.Write(DateTime.Now); //获取现在的时间 Response.End(); return null; }
第二种:使用JQuery封装好的Ajax
首先前台的要求不变,相应的位置上,任何可以显示文本的标签,这里使用span
<spanid=time></span>
然后在页面中引入JQuery,版本不限,只有封装了ajax,本例中的版本为1.8.0的
<scriptsrc="../../Content/JqueryEasyUI/jquery-1.8.0.min.js"></script>
开始调用
<scripttype="text/javascript"> setInterval(GetTime, 1000); //每一秒钟调用一次 function GetTime() { $.ajax({ type:"post", contentType:"application/json", //接收到的数据要求格式 url:"FHome/GetTime1", //调用Controller中的方法返回时间 success:function (result) { //如果成功就显示时间 $('#time').text(result); }, error: function() { alert(“时间加载失败”); //失败给出提示 } }) } </script>
Controller中的方法如下
publicstring GetTime1() { return DateTime.Now.ToString(); }
小结
两种方法一个是原生态的,一个是JQuery-Ajax,相比后者的使用更加的简单,这也是JQuery作用的体现吧,但是本质上是没有区别的,重点都是要设置每1秒调用一次显示时间的方法。两种方法根据自己的实际情况进行选择。
相关文章推荐
- FZU 1921 栀子花开 (线段树单点更新)
- 安装和使用nmon监测hadoop集群性能
- jquery-easyui中表格的行编辑功能
- 用c语言进行“面向对象编程”------学习doubango源码心得------阿冬专栏!!!
- mysql备份脚本
- 使用外链的方式让易班的轻应用更漂亮
- CodeForces 171F ucyhf 第n个反素数
- 页面缓存-内存与文件的那些事
- Python机器学习库
- Java为什么需要保留基本数据类型
- Video4Linux 中文解析
- 20135203齐岳 信息安全系统设计基础第十二周实践总结
- C++ STL (1)set容器用法、操作详细介绍
- Linux进程状态解析之R、S、D、T、Z、X
- 【HDU5573 2015上海赛区B】【构造 二进制思想】Binary Tree 二叉树上走m层加减数使得最后权值恰为n
- windows 右健添加cmd快捷通道
- 算法竞赛入门经典习题集
- 【C#】用组件的Anchor属性解决最大化组件的缩放问题
- 内核是如何管理内存的
- HDU 5586 Sum (区间和最大)