Ajax+Js局部刷新
通过 AJAX,JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象, JavaScript 可在不重载页面的情况与 Web 服务器交换数据。
AJAX 在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
实验中利用JSP+ajax来实现自动刷新页面,并读/写数据库中的数据。
下面介绍一下利用JSP+ajax来实现局部页面刷新的小例子:
处理ajax请求的jsp文件:ajax.jsp
<%@ page contentType="text/html; charset=gb2312" %> <%
//设置输出信息的格式及字符集
response.setContentType("text/xml; charset=UTF-8");
response.setHeader("Cache-Control","no-cache");
out.println("<response>"); for(int i=0;i<2;i++){
out.println("<name>"+(int)(Math.random()*10)+
"号传感器</name>");
out.println("<count>" +(int)(Math.random()*100)+ "</count>");
}
out.println("</response>");
out.close();
%>
发送ajax请求的jsp文件:zx.jsp
<head>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</head>
<script language="javascript"> var XMLHttpReq;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
//发送请求函数
function sendRequest() {
createXMLHttpRequest();
var url = "ajax.jsp";
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回,开始处理信息
DisplayHot();
setTimeout("sendRequest()", 1000);
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
function DisplayHot() {
var name = XMLHttpReq.responseXML.getElementsByTagName("name")[0].firstChild.nodeValue;
var count = XMLHttpReq.responseXML.getElementsByTagName("count")[0].firstChild.nodeValue;
document.getElementById("product").innerHTML = name;
document.getElementById("count").innerHTML = count;
} </script> <body onload =sendRequest()>
<table style="BORDER-COLLAPSE: collapse" borderColor=#111111 cellSpacing=0 cellPadding=0 width=200 bgColor=#f5efe7 border=0> <TR>
<TD align=middle bgColor=#dbc2b0 height=19 colspan="2"><B>无线传感网</B> </TD>
</TR>
<tr>
<td height="20"> 传感器:</td>
<td height="20" id="product"> </td>
</tr>
<tr>
<td height="20">传感器个数:</td>
<td height="20" id="count"> </td>
</tr>
</body>
</table>
效果如下(页面上的值自动变化):
Ajax+Js局部刷新的更多相关文章
- Ajax 异步局部刷新
Ajax 异步局部刷新 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页 ...
- asp.net mvc3 利用Ajax实现局部刷新
1.利用Ajax.ActionLink()方法 首先在_Layout.cshtml文件中加载 运行AJAX必要的Jquery <script src="@Url.Content(&qu ...
- jQuery+ajax实现局部刷新
在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load(),其他高级方法的使用以后再做详细笔记. 第一种: 当某几个页面 ...
- C# 利用ajax实现局部刷新
C#所有runat="server"的控件都会造成整个界面的刷新,如果想实现局部刷新,可以利用ajax. 需要加入的控件有ScriptManager和UpdatePanel,可以实 ...
- Ajax定时局部刷新
1.局部刷新一个地方 function refreshOnTime(){ $.ajax({ //配置 }); //7秒后重复执行该函数 setInterval('refreshOnTime', 700 ...
- [转载].NET ASP.NET 中web窗体(.aspx)利用ajax实现局部刷新
之前开发的一套系统中用到了大量的 checkboxList 控件,但是每次选定之后都会刷新整个页面,用户体验很差,百度了之后查到这篇文章,尝试了一下可以实现,所以转载了过来,记录一下,也给其他有相同困 ...
- js(三) ajax异步局部刷新技术底层代码实现
ajax 异步 javaScript and xml 开发五步骤: 1. 创建对象 XMLHttpRequest(chrome,firefox) ie... jquery 2. 找到连接, http的 ...
- ajax实现局部刷新
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- 使用php后台给自己做一个页面路由,配合ajax实现局部刷新。
今天就要放假了,把近来囤积的小玩意儿总结整理一下. 在请求一个html页面来嵌入到当前页会有一个问题,就是跟随请求过来的html他的样式表和脚本会失效.是因为文档加载的先后顺序等问题造成的.因此,加载 ...
随机推荐
- PowerDesigner 15学习笔记:十大模型及五大分类
个人认为PowerDesigner 最大的特点和优势就是1)提供了一整套的解决方案,面向了不同的人员提供不同的模型工具,比如有针对企业架构师的模型,有针对需求分析师的模型,有针对系统分析师和软件架构师 ...
- SQL Server 2008 R2 链接 Oracle 10g
首先sqlserver 链接oracle可以通过两个访问接口: “MSDAORA” 和“OraOLEDB.Oracle” 1.“MSDAORA”访问接口是由Microsoft OLE DB Provi ...
- Java的Graphics类进行绘图的方法详解
Graphics类提供基本绘图方法,Graphics2D类提供更强大的绘图能力. Graphics类提供基本的几何图形绘制方法,主要有:画线段.画矩形.画圆.画带颜色的图形.画椭圆.画圆弧.画多边形等 ...
- Egret入门(二)--windows下环境搭建
准备材料 安装Node.js TypeScript编辑器 HTTP服务器(可选) Chorme(可选) Egret 安装Node.js 打开www.nodejs.org 下载安装(全部next,全默认 ...
- Angular7运行机制--根据腾讯课堂米斯特吴 《Angular4从入门到实战》学习笔记分析完成
- Spring学习(1):侵入式与非侵入式,轻量级与重量级
一. 引言 在阅读spring相关资料,都会提到Spring是非侵入式编程模型,轻量级框架,那么就有必要了解下这些概念. 二. 侵入式与非侵入式 非侵入式:使用一个新的技术不会或者基本不改变原有代码结 ...
- eos TODO EOS区块链上EOSJS和scatter开发dApp
由于我一直在深入研究EOS dApp的开发,我看了不少好文章.在这里,我汇总了下做一些研究后得到的所有知识.在本文中,我将解释如何使用EOSJS和scatter.我假设你对智能合约以及如何在EOS区块 ...
- Fedora 28 UEFI模式安装过程记录
这次的折腾是个意外.不过还是要记录一下. 多次做启动盘,把U盘做坏了.将U盘用量产工具修复以后就能做启动盘了.从官网下了Fedora 28的镜像(与CentOS同属RedHat系,尽量与鸟哥一致),用 ...
- 7.hdfs工作流程及机制
1. hdfs基本工作流程 1. hdfs初始化目录结构 hdfs namenode -format 只是初始化了namenode的工作目录 而datanode的工作目录是在datanode启动后自己 ...
- 选题博客:北航iCourse课程信息平台
1. 用户调查 在选题的时候,我们面向北航所有本科在读本科生,发布了<北航信息平台用户调查>.此次问卷调查共回收有效问卷95份. 1.1 功能需求调查 调查其中一项是让同学们对平台功能进行 ...