使用AJAX技术实现网页无闪自动局部刷新
Div 部分刷新 利用iframe刷新div 利用AJAX刷新部分div
Div 部分刷新利用iframe刷新div利用AJAX刷新部分div一般的WEB页面,当用户访问时,会按需请求一个新页面,而这个新页面很大一部分的内容其实跟原页面是相同的,无非是某一行内容,或者某一小块内容要被刷新,这时候如果把整个页面再重新请求一遍,就很不划算,这时候我们可以使用一种部分刷新方法,就是使用HTML的iframe 标签。
iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。
这个标签的可用属性如下:其中我们需要注意的是一个src 属性,它指定了在这个iframe块中你要用于显示的原代码。
例如:<iframe src ="/index.html"><p>Your browser does not support iframes.</p></iframe>好,下面我们就可以用JAVASCRIPT改变iframe块的内容,来实现页面的部分刷新了,示例代码如下:1 <%@ Page Language="C#" AutoEventWireup="true" %>2 //...3 <html xmlns="/1999/xhtml" >4 <head runat="server">5 <title>Lesson 1 - Demo 1 - IFrame "Ajax"</title>6 <script language="javascript">7 function refresh()8 {9 document.getElementById('iframe').src =10"IFramePage.aspx?" + new Date();11 }12 </script>13 </head>14 <body style="font-family:Verdana; font-size:13px;">15 <form id="form1" runat="server">16 <div>17 <b>Page Load:</b>18 <span><%= DateTime.Now.ToLocalTime() %></span>19 </div>20 <div>21 <b>Current Time:</b>22 <span id="currentTime"></span>23 </div>24 <input type="button" value="Refresh" onclick="refresh()" />25 </form>26 <iframe id="iframe" src="IFramePage.aspx"></iframe>27 </body>28 </html>29在这个页面中,先显示一个Page Load:的时间,以及一个按钮,然后一个iframe块,当点击按钮的时候,我们在它的响应函数refresh()中改变iframe块的src属性,也就是页面地址(url参数变化也算地址变动)这样就会引起这个iframe重新被加载,那个参数中用了一个?new Date()型参数,这样保证了每次都是不同的参数,每次都要变,如果这儿是个固定值比如"123"那么只有第一次点的时候变,而后面就不变了。
JSP Ajax 实现Web页面的局部动态更新
JSP Ajax 实现Web页面的局部动态更新
在浏览网页时,往往因为查看局部信息,而导致整个网页都需要从服务器端重新加载一次。
传统的Web实现方式中,实现类似的效果必须进行整个页面的刷新。
但是借助Ajax技术,可以实现对页面中局部区域的动态刷新,使得用户能够以更好的方式获得最新的数据信息。
本实例演示使用Ajax技术局部动态更新数据。
练习要点:
创建MySQL数据库,名称为test。
数据库中创建表person,表字段信息如表9 -2所示:
创建数据库连接类,打开记事本创建DB.java,代码如下:
现在建立客户端程序。
打开记事本,新建一个名为index5.jsp的页面,代码如
创建一个JSP页面来处理客户端发送的请求,该文件实现删除功能。
打开记事本,新建一个名为index5_server.jsp的文件,代码如下所示:
下面代码判断客户端请求参数,如果不为空,则执行删除操作。
然后从数据库中取出数据,以XML格式返回给客户端。
把本实例部署到Tomcat服务器上后,打开index5.jsp页面,如图9-7所示。
图9-7 局部刷新
单击【删除】,可以看到整个页面并未刷新,只是局部更新。
页面显示如图9-8
所示:
图9-8 删除操作。
跟我学AJAX技术——实现无刷新形式的数据查询的Web应用示例(第一部分)
1.1跟我学AJAX技术——实现无刷新形式的数据查询的Web应用示例(第一部分)1.1.1构建出Web应用项目1、新建一个Web应用的Project项目的名称为AJAXWebApp,同时再添加一个Web组件,其Context的名称为AJAXWebApp。
(1)如下为创建过程的局部截图(2)将产生出下面的结果状态2、在该Web应用中添加一个index.jsp(searchInfo.jsp)页面(1)设置JSP页面的编码为中文编码(2)再添加index.jsp 页面(3)将产生出下面的内容并自动将页面的编码类型改变为我们的缺省编码类型3、在该Web应用中添加一个Servlet程序作为我们后台的处理(1)类名称为AJAXServlet,包名称为com.px1987.webajax.servlet(2)设置URL-Pattern为:/ajaxservlet(3)将产生出下面的状态(4)同时在web.xml中对它进行部署(5)编程该Servlet以响应客户端的Get方式的请求package com.px1987.webajax.servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.px1987.webajax.model.*;public class AJAXServlet extends HttpServlet{public AJAXServlet(){super();}public void destroy(){super.destroy(); // Just puts "destroy" string in log}public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{// request.setCharacterEncoding("gb2312");String cityName = request.getParameter("cityName");cityName = new String(cityName.getBytes("ISO-8859-1"), "gb2312");CreateXMLInterface createXML=new CreateXMLBean();//它代表我们的业务功能方法String xmtFileResult=createXML.createXMLText(cityName);response.setContentType("text/xml; charset=GBK");/**将Cache-Control 设为no-cache 将确保浏览器不会从缓存相同的URL(包括参数)返回的应答。
ajxs局部刷新
$("input[name='checkbox']").each(function (){
if(this.checked){
strIds +=this.value+",";//得到的是多个id值,拼成字符串传到action
复制代ห้องสมุดไป่ตู้ 代码如下:
<td align="center">
<s:if test="messageState == 0">
<img src="${ctx}/images/04.png" id="r${message.messageID}"/>
</s:if>
<s:else>
var str=data.str;//接收返回的数据
for(var p in str){ //遍历接受的数组对象
var x="#r"+str[p];//获取要改变的记录的图标id
$(x).attr("src","${ctx}/images/04.png");
作者: 字体:[增加 减小] 类型:转载 时间:2014-02-11 我要评论
本篇文章只要是对JQuery的Ajax请求实现局部刷新的简单实例进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
请求的ajax路径传递的参数(data)会到action中被一个同样名字的变量(附带set get方法)接收,返回的data是一个JQuery的数组对象,在被调用的action中涉及到的数据变量会对象,都会封装到data中最终返回给页面。
信息系 Ajax网页应用程序中的关键技术局部刷新 毕业论文(设计)
ASP .NET AJAX在一个Ajax网页应用程序中的关键技术是局部刷新。
伴随着局部刷新,整个网页不需要回发,浏览器也不需要刷新。
取而代之的是,当触发事件时,网页通过访问web服务器获取信息。
因为http请求在后台执行,所以网页能持续响应。
(假如你觉得请求需要一段时间,那么你可以使用某些进度条,这个是由你自己决定的。
)当页面接收到响应结果时,仅更新网页中改变了的部分,如图1所示图1 普通的服务器端页面与Ajax包含了一个便利的控件,该控件通过使用局部更新让你可以制作一个有后台逻辑的普通页面并确保其以无闪烁的Ajax风格刷新自己。
(译注:也就是说,通过局部更新可以让你在刷新页面的时候没有闪烁)。
该控件就是第 1 页(共8 页)UpdatePanel,最基本的原理就是你将你的网页分割成一个或多个独立的区域,每个被包裹在一个不可见的UpdatePanel中。
当一个放置于UpdatePanel中的控件的事件被触发,并且该事件通常会引起整页回传时,UpdatePanel会截断该事件并且使用异步回调来代替。
下面这个例子可以解释以上论述:1.用户点击UpdatePanel里的一个按钮。
2.UpdatePanel捕获到客户端点击, AJAX执行回调到服务器端,而不是把整个页面回传。
3.在服务器端,按照正常页面生命周期执行所有事件。
最后呈现html页面并返回到客户端。
AJAX为页面上的每个UpdatePanel接收html,客户端脚本开始刷新页面,使用新内容替换每个UpdatePanel中的原内容。
(如果UpdatePannel 中的内容未发生改变,则忽略)一个简单的UpdatePanel测试为了使用UpdatePanel,比较合理的做法是创建一个简单的测试页面。
以下的案例(图片2)使用了一个包含两个素材的简单页面:一张动态gif图片以及一个显示当前时间并包含一个刷新时间的按钮的灰色文本框。
当你单击刷新时间按钮,该页面从服务端获取当前时间并更新标签。
跟我学AJAX技术——如何应用AJAX实现无刷新查询功能的Web应用示例(第四部分)
1.1跟我学AJAX技术——如何应用AJAX实现无刷新查询功能的Web应用示例(第四部分)1.1.1利用JDom技术动态产生出一个XML文档,然后再向浏览器返送1、添加JDom的系统包将出现下面的状态2、添加一个JavaBean实现对XML的动态生成程序类名称为JDomXMLBean,程序包名称com.px1987.webajax.model,并且实现3、编程该JDomXMLBean程序的功能实现代码package com.px1987.webajax.model;import java.io.*;import org.jdom.*;import org.jdom.output.*;public class JDomXMLBean implements CreateXMLInterface { Document xmlDoc=null;public JDomXMLBean() {// TODO 自动生成构造函数存根}public String createXMLText(String inputCityName) {Element docRoot=new Element("message");xmlDoc = new Document(docRoot);Element dataOne = new Element("dataOne");dataOne.setText(inputCityName);dataOne.setAttribute("attributeName", "valueOne");docRoot.addContent(dataOne);Element dataTwo = new Element("dataTwo");dataTwo.setText(inputCityName);dataTwo.setAttribute("attributeName", "valueTwo");docRoot.addContent(dataTwo);return "";}public void outXMLData(PrintWriter out) throws IOException {XMLOutputter XMLOut = new XMLOutputter();XMLOut.setIndent(" "); //设置子元素向右缩多少个空格 XMLOut.setNewlines(true); //设置回行标志XMLOut.setEncoding("gb2312");XMLOut.output(xmlDoc,out);}}4、修改前面的SearchAction类中的代码为下面的内容package com.px1987.webajax.action;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.struts.action.Action;import org.apache.struts.action.ActionForm;import org.apache.struts.action.ActionForward;import org.apache.struts.action.ActionMapping;import com.px1987.webajax.model.*;import java.io.*;public class SearchAction extends Action{public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) {String cityName = request.getParameter("cityName");try{cityName = new String(cityName.getBytes("ISO-8859-1"), "gb2312");}catch (UnsupportedEncodingException e){// TODO 自动生成 catch 块e.printStackTrace();}JDomXMLBean createXML=new JDomXMLBean();createXML.createXMLText(cityName); //它代表我们的业务功能方法response.setContentType("text/xml; charset=gb2312");response.setHeader("Cache-Control", "no-cache");PrintWriter out;try{out = response.getWriter();createXML.outXMLData(out);out.close();}catch (IOException e){// TODO 自动生成 catch 块e.printStackTrace();}return null;}}5、再执行本应用(http://127.0.0.1:8080/StrutsAJAXWebApp/index.jsp)。
Ajax实现自动刷新页面
所有开发环境:Eclipse4.2mySQL5.5Tomcat6.0(先把数据库驱动程序加到tomcat\lib下)建立的数据库中的表dbname=”person” table=”stuscore”表如下:前提先建好数据库person 建表代码:# Host: localhost (Version: 5.5.20)# Date: 2012-10-16 07:04:12# Generator: MySQL-Front 5.2 (Build 3.32)/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;/*!40101 SET NAMES utf8 */;/*!40101 SET @OLD_SQL_MODE=@@SQL_MODE */;/*!40101 SET SQL_MODE='STRICT_TRANS_TABLES,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION' */; /*!40111 SET @OLD_SQL_NOTES=@@SQL_NOTES */;/*!40103 SET SQL_NOTES='ON' */;/*!40014 SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS */;/*!40014 SET UNIQUE_CHECKS=0 */;/*!40014 SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS */;/*!40014 SET FOREIGN_KEY_CHECKS=0 */;## Source for table "stuscore"#DROP TABLE IF EXISTS `stuscore`;CREATE TABLE `stuscore` (`Id` int(11) NOT NULL AUTO_INCREMENT,`name` varchar(255) DEFAULT NULL,`grade` varchar(255) DEFAULT NULL,`score` varchar(255) DEFAULT NULL,`state` int(255) DEFAULT NULL,PRIMARY KEY (`Id`)) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;## Data for table "stuscore"#/*!40000 ALTER TABLE `stuscore` DISABLE KEYS */;INSERT INTO `stuscore` VALUES (1,'杜淳','200401','94.50000',1),(2,'马苏','200401','96.70000',1),(3,'李晨','200401','95.40000',1),(4,'立方','200402','89.70000',1);/*!40000 ALTER TABLE `stuscore` ENABLE KEYS */;/*!40014 SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS */;/*!40014 SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS */;/*!40111 SET SQL_NOTES=@OLD_SQL_NOTES */;/*!40101 SET SQL_MODE=@OLD_SQL_MODE */;/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;本次工程结构如下:其中AutoRefresh.jsp的代码如下:<%@page language="java"contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"><title>Insert title here</title><script type="text/javascript">var XMLHttpReq;function createXMLHttpRequest(){if(window.XMLHttpRequest){XMLHttpReq=new XMLHttpRequest();}else if(window.ActiveXObject){try{XMLHttpReq=newActiveXObject("Msxml2.XMLHTTP");}catch(e){try{XMLHttpReq=newActiveXObject("Microsoft.XMLHTTP");}catch(e){}}}}function sendRequest(){createXMLHttpRequest();var url="auto";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(){varnum=XMLHttpReq.responseXML.getElementsByTagName( "num")[0].firstChild.nodeValue;document.getElementById("name").innerHTML="你的新信息数目为";document.getElementById("num").innerHTML=num;}</script></head><body onload=sendRequest()><table style="BORDER-COLLAPSE:collapse" borderColor=#111111cellSpacing=0cellPadding=0width=200 bgColor=#f5efe7border=0><TR><TD align=middle height=4colspan="2"></TD></TR><TR><TD align=middle bgColor=#dbc2b0height=19colspan="2"> <B>消息提示</B></TD></TR><tr><td height="20"id="name"></td></tr><tr><td height="20"id="num"align="center"></td></tr></table></body></html>建立servlet程序:AutoRefreshAction.java代码:package com.cong;import java.io.IOException;import java.io.PrintWriter;import java.sql.Connection;import java.sql.ResultSet;import java.sql.SQLException;import java.sql.Statement;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;//import org.apache.tomcat.dbcp.dbcp.ConnectionFactory;/*** Servlet implementation class AutoRefreshAction*/public class AutoRefreshAction extends HttpServlet { private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public AutoRefreshAction() {super();// TODO Auto-generated constructor stub }/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubresponse.setContentType("text/xml;charset=utf-8");response.setHeader("Cache-Control", "no-cache");PrintWriter out=response.getWriter();out.println("<response>");ConnectionFactory factory=new ConnectionFactory();Connection con=factory.getConnection();Statement st=null;ResultSet rs=null;String strSql=null;strSql="select count(*) from stuscore where state=0 order by id desc";try{st=con.createStatement();rs=st.executeQuery(strSql);if(rs.next()){out.println("<num>"+rs.getString(1)+"</num>");}}catch(SQLException e){e.printStackTrace();}out.println("</response>");out.close();}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stub}}ConnectionFactory.java代码:package com.cong;import java.sql.Connection;import java.sql.DriverManager;public class ConnectionFactory {public final static Stringurl="jdbc:mysql://localhost:3306/person";public final static String user="root";public final static String password="congli"; Connection getConnection(){try{Class.forName("com.mysql.jdbc.Driver");return (Connection) DriverManager.getConnection(url,user,password);}catch(Exception e){e.printStackTrace();}return null;}}Web.xml文件代码:<?xml version="1.0"encoding="UTF-8"?><web-appxmlns:xsi="/2001/XMLSchema-instance" xmlns="/xml/ns/javaee"xmlns:web="/xml/ns/javaee/web-app_2_ 5.xsd"xsi:schemaLocation="/xml/ns/javaee /xml/ns/javaee/web-app_2_5.xsd"id="WebApp_ID"version="2.5"><display-name>ajaxproject</display-name><welcome-file-list><!-- <welcome-file>index.html</welcome-file><welcome-file>index.htm</welcome-file><welcome-file>index.jsp</welcome-file><welcome-file>default.html</welcome-file><welcome-file>default.htm</welcome-file>--><welcome-file>AutoRefresh.jsp</welcome-file></welcome-file-list><servlet><description></description><display-name>AutoRefreshAction</display-name><servlet-name>auto</servlet-name><servlet-class>com.cong.AutoRefreshAction</servlet-class> </servlet><servlet-mapping><servlet-name>auto</servlet-name><url-pattern>/auto</url-pattern></servlet-mapping></web-app>运行结果:然后你在数据库更改state的值变为零,就会看到结果:。
基于ASP NET的Web应用开发单元8任务2:利用AJAX实现局部刷新
二、基本知识与技能—ScriptManager控件
• 脚本控制器ScriptManager是AJAX程序运行的基础。它 用来处理页面上所有组件以及页面局部更新,生成相关客 户端代理脚本以便能够在JavaScript中访问Web Servic e等。 • 在支持 AJAX的页面中,有且只能有 一个ScriptManager控件来管理 AJAX相关的 控件和脚本。在AJAX应用中,ScriptManger控件基本 不需要配置就能够使用。因为ScriptManger控件通常需 要同其他AJAX控件搭配使用,在AJAX应用程序中,Scri ptManger控件就相当于一个总指挥官,这个总指挥官只 是进行指挥,而不进行实际的操作。
七、子任务2的实施
<div align="center" style="background-color: #00FFFF"> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always"> <ContentTemplate> UpdateMode:Always 局部可更新区域一的更新时间: <%=DateTime.Now.ToString() %> <asp:Button ID="Button2" runat="server" Text="更新局部区域一(异步回发)" /> </ContentTemplate> </asp:UpdatePanel> </div> </div> <div align="center" style="background-color: #FFFF00"> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> UpdateMode:Conditional 局部可更新区域二的更新时间: <%=DateTime.Now.ToString() %><asp:Button ID="Button3" runat="server" Text="更 新局部区域二(异步回发)" /> </ContentTemplate> </asp:UpdatePanel> </div> UpdateModel.aspx代码 </form> </body>
ajax+jsp局部页面刷新
<td vAlign=center align=middle>
<table height=33 cellSpacing=1 cellPadding=0 width=860 align=center border=0>
<tr>
<td vAlign=center >
<font color="red" >${loginmessage } </font><form name="logform" action="/login.do" method="post">
stmt = conn.createStatement(
java.sql.ResultSet.TYPE_SCROLL_INSENSITIVE,
java.sql.ResultSet.CONCUR_READ_ONLY);
rs = stmt.executeQuery(sql);
} catch (SQLException ex) {
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
function callback(){
if(xmlHttp.readyState==4){
show();
setTimeout("validate()",3600);
ajax的自动刷新页面实验
<script type="text/javascript"> var xmlHttp; function createXMLHttpRequest(){ if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function doStart() { createXMLHttpRequest(); var url = "DynamicUpdateServlet?task=reset"; xmlHttp.open("GET", url, true); xmlHttp. onreadystatechange = startCallback; xmlHttp.send(null); } function startCallback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { setTimeout("pollServer()", 5000); refreshTime(); } } } function pollServer() { createXMLHttpRequest(); var url = "DynamicUpdateServlet?task=foo"; xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = pollCallback; xmlHttp.send(null); } function refreshTime(){ var time_span = document.getElementById("time"); var time_val = time_span.innerHTML;
Ajax实现局部刷新的方法实例
Ajax实现局部刷新的⽅法实例⽬录前⾔⼀、 Ajax是什么?⼆、实现⽅式:1.原⽣的JS实现⽅式(了解)2.JQeury实现⽅式⼩栗⼦总结前⾔最近复习了⼀下jQuery的⼀些内容,特此整理⼀下⼀些能⽤的得到的知识点,以前才学jQuery的时候压根就没有注意到那么多的细节,另外最近⼀直都在整理前端的⼀些⼯作中学到的⼩经验,⼤概还会有⼗篇左右的内容,就会慢慢开始整理后端,框架,以及数据库的⼀些⼩知识点⼀、 Ajax是什么?概念: ASynchronous JavaScript And XML 异步的JavaScript 和 XML1、异步和同步:客户端和服务器端相互通信的基础上-> 客户端必须等待服务器端的响应。
在等待的期间客户端不能做其他操作。
->客户端不需要等待服务器端的响应。
在服务器处理请求的过程中,客户端可以进⾏其他的操作2、Ajax 是⼀种在⽆需重新加载整个⽹页的情况下,能够更新部分⽹页的技术。
->通过在后台与服务器进⾏少量数据交换,Ajax 可以使⽹页实现异步更新。
这意味着可以在不重新加载整个⽹页的情况下,对⽹页的某部分进⾏更新。
-> 传统的⽹页(不使⽤ Ajax)如果需要更新内容,必须重载整个⽹页页⾯。
⼆、实现⽅式:1.原⽣的JS实现⽅式(了解)javascript代码如下(⽰例)://javascript代码var xmlhttp;//1.创建核⼼对象if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp = new XMLHttpRequest();} else {// code for IE6, IE5xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}//2. 建⽴连接/* 参数:1. 请求⽅式:GET、POST* get⽅式,请求参数在URL后边拼接。
Ajax实现页面无刷,数据每秒更新一次
自己做的获取数据库里的最新记录,每秒更新一次数据,我也是刚刚才接触Ajax,可能还有不完善的地方,希望对大家有所帮助。
表结构:username varchar(10)userPwd varchar(10)由于只是做测试,表比较简单,也没有设主建…..Jsp部分:<%@page language="java"import="java.util.*"pageEncoding="UTF-8"%> <%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";%><!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><base href="<%=basePath%>"><title>My JSP 'index.jsp' starting page</title><meta http-equiv="pragma"content="no-cache"><meta http-equiv="cache-control"content="no-cache"><meta http-equiv="expires"content="0"><meta http-equiv="keywords"content="keyword1,keyword2,keyword3"><meta http-equiv="description"content="This is my page"><script type="text/javascript">//主要JS代码如下:var xmlHttpRequest;function createXmlHttpRequest(){//alert(window.ActiveXObject);if(window.XMLHttpRequest){xmlHttpRequest =new XMLHttpRequest();}else if(window.ActiveXObject){// code for IE5 and IE6 xmlHttpRequest =new ActiveXObject("Microsoft.XMLHTTP");}}function search(){var url="<%=path%>/servlet/TestServlet";//alert(url);createXmlHttpRequest();xmlHttpRequest.onreadystatechange=callback;xmlHttpRequest.open("POST",url,true);xmlHttpRequest.send(null);}function callback(){if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){ var result=xmlHttpRequest.responseText;td1.innerHTML=result;setTimeout(search,1000);//定时每秒请求一次}}</script></head><body onload="search()"><table id="tb1"><tr><td id="td1"></td></tr></table></body></html>后台:package com.servlet;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.dao.TestDAO;import com.entity.Test;public class TestServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setCharacterEncoding("UTF-8");PrintWriter out=response.getWriter();TestDAO testDao=new TestDAO();ArrayList testList=testDao.findAll();for(int i=0;i<testList.size();i++){Test test=(Test) testList.get(i);out.println("<table><tbody><tr><td>"+test.getUserName()+"</td><td>"+test.getUserPwd() +"</td></tr></tbody></table>");}}}。
跟我学AJAX技术——如何应用AJAX实现无刷新查询功能的Web应用示例(第三部分)
1.1跟我学AJAX技术——如何应用AJAX实现无刷新查询功能的Web应用示例(第三部分)1.1.1对前面的XML响应加以改进以表格的形式显示输出1、在页面中增加一个parseXMLResponseInTable的JavaScript方法function parseXMLResponseInTable(){var dataArray = httpRequest.responseXML.getElementsByTagName("data"); //<data> var dataArrayLen = dataArray.length;var insertData = "<table style='width:250px; border: solid 1px #000'>"+"<tr><th>XML的处理结果</th></tr>";for (var i=0; i<dataArrayLen; i++){if(dataArray[i].tagName){insertData =insertData+"<tr>";insertData =insertData+"<td>" + dataArray[i].tagName + "</td>";insertData =insertData+"<td>" + dataArray[i].firstChild.data + "</td>";insertData =insertData+"</tr>";}}insertData =insertData+"</table>";//使用HTML标签来更新一个标签元素mdiv = document.getElementById("showResultMessage");mdiv.innerHTML = insertData;}对上面的代码进行说明:(1)"dataArray"作为所有<data>节点的数组(不是节点数据,只是节点)。
Ajax动态网页技术:局部更新部分网页的原理与过程(附代码)
Ajax动态网页技术:局部更新部分网页的原理与过程(附代码)Ajax 即“Asynchronous Javascript And XML”(异步JavaScript 和XML),是指一种创建交互式网页应用的网页开发技术。
是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
种用于创建快速动态网页的技术。
传统的网页(不使用Ajax)如果需要更新内容,必须重载整个网页页面。
而Ajax 可以通过在后台与服务器进行少量数据交换,使网页实现异步更新。
这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
ajax是一个粘合javascript、xml、、xhtml、dom、xmlhttprequest、css 等技术的一个粘合剂;ajax服务端语言无关的技术. 即可以使用在php、java、.net、asp等网站;ajax可以给客户端返回文本、xml 、json等格式数据;ajax是flash、java applet、框架、iframe等无刷新数据交换技术的一种。
传统动态网页技术(未引入Ajax技术)的浏览器与服务器交互时,请求和响应整个网页,其中包括完全没有变动过的数据、图片、JavaScript等,显然,这是一种很不经济和有效率的操作方式,有时会出新如刷新操作时的冷却及等待响应的假死现象,影响速度、观感和用户体验,特别是当两端资源有限及带宽不够时。
Ajax技术则不同,只请求和响应需要更新的局部,浏览器在接收到数据后,可以使用Javascript通过DHTML 或DOM(Document Object Model)模式来更新特定字段。
使用ajax与服务器通信的的步骤:1 客户端(浏览器)创建一个XMLHttpRequest对象(浏览器之间会有语法差异);var XHR = newActiveXObjcet('Msxml2.XMLHTTP');(IE);var XHR = new XMLHttpRequest();(非IE);2 客户端(浏览器)传送XMLHttpRequestt对象3 服务端(服务器端)接收ajax的请求,做相应处理(操作数据库)4 服务端(服务器端)返回结果给客户端(浏览器)5 客户端(浏览器)局部刷新当前页面附源代码:var XHR = null;function startRequest{XHR = new XMLHttpRequest(); //非IEXHR.open('GET','poetry.txt'.true); //连接方式与请求内容XHR.onreadystatechange = handleStateChange;//事件响应XHR.send(null);//以post方式传送数据时,需要指定需要传送的参数}functionhandleStateChange(){if(XHR.readyState ==4)//判断request是否执行完毕{if(XHR.status == 200) //判断request 是否执行成功document.getElementById('span1).innerHTML =XHR.responseText;//如果是返回的XML文件,使用responseXML属性elsedocument.getElementById('span1).innerHTML = '文件开启错误!';}}-End-。
实现AJAX异步调用和局部刷新的基本步骤
实现AJAX异步调⽤和局部刷新的基本步骤⽬录引⾔1、创建XMLHttpRequest对象2、创建HTTP请求3、设置响应HTTP请求状态变化的函数4、设置获取服务器返回数据的语句5、发送HTTP请求6、局部更新7、完整的AJAX实例总结引⾔要完整实现⼀个AJAX异步调⽤和局部刷新,通常需要以下⼏个步骤:(1)创建XMLHttpRequest对象,也就是创建⼀个异步调⽤对象.(2)创建⼀个新的HTTP请求,并指定该HTTP请求的⽅法、URL及验证信息.(3)设置响应HTTP请求状态变化的函数.(4)发送HTTP请求.(5)获取异步调⽤返回的数据.(6)使⽤JavaScript和DOM实现局部刷新.1、创建XMLHttpRequest对象不同的浏览器使⽤的异步调⽤对象也有所不同,在IE浏览器中异步调⽤使⽤的是XMLHTTP组件中的XMLHttpRequest对象,⽽在Netscape、Firefox浏览器中则直接使⽤XMLHttpRequest组件。
因此,在不同浏览器中创建XMLHttpRequest对象的⽅式都有所不同.在IE浏览器中创建XMLHttpRequest对象的⽅式如下所⽰:var xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");在Netscape浏览器中创建XMLHttpRequest对象的⽅式如下所⽰:var xmlHttpRequest = new XMLHttpRequest();由于⽆法确定⽤户使⽤的是什么浏览器,所以在创建XMLHttpRequest对象时,最好将以上两种⽅法都加上.如以下代码所⽰:<html><head><title>创建XMLHttpRequest对象</title><script language = "javascript" type = "text/javascript"><!--var xmlHttpRequest; //定义⼀个变量,⽤于存放XMLHttpRequest对象function createXMLHttpRequest() //创建XMLHttpRequest对象的⽅法{if(window.ActiveXObject) //判断是否是IE浏览器{xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); //创建IE浏览器中的XMLHttpRequest对象}else if(window.XMLHttpRequest) //判断是否是Netscape等其他⽀持XMLHttpRequest组件的浏览器{xmlHttpRequest = new XMLHttpRequest(); //创建其他浏览器上的XMLHttpRequest对象}}--></script>createXMLHttpRequst(); //调⽤创建对象的⽅法</head><body></body></html>"if(window.ActiveXObject)"⽤来判断是否使⽤IE浏览器.其中ActiveXOject并不是Windows对象的标准属性,⽽是IE浏览器中专有的属性,可以⽤于判断浏览器是否⽀持ActiveX控件.通常只有IE浏览器或以IE浏览器为核⼼的浏览器才能⽀持Active控件."else if(window.XMLHttpRequest)"是为了防⽌⼀些浏览器既不⽀持ActiveX控件,也不⽀持XMLHttpRequest组件⽽进⾏的判断.其中XMLHttpRequest也不是window对象的标准属性,但可以⽤来判断浏览器是否⽀持XMLHttpRequest组件.如果浏览器既不⽀持ActiveX控件,也不⽀持XMLHttpRequest组件,那么就不会对xmlHttpRequest变量赋值.2、创建HTTP请求创建了XMLHttpRequest对象之后,必须为XMLHttpRequest对象创建HTTP请求,⽤于说明XMLHttpRequest对象要从哪⾥获取数据.通常可以是⽹站中的数据,也可以是本地中其他⽂件中的数据.创建HTTP请求可以使⽤XMLHttpRequest对象的open()⽅法,其语法代码如下所⽰:XMLHttpRequest.open(method,URL,flag,name,password)代码中的参数解释如下所⽰:method:该参数⽤于指定HTTP的请求⽅法,⼀共有get、post、head、put、delete五种⽅法,常⽤的⽅法为get和post。
跟我学AJAX技术——如何应用AJAX实现无刷新查询功能的Web应用示例(第一部分)
1.1跟我学AJAX技术——如何应用AJAX实现无刷新查询功能的Web应用示例(第一部分)1.1.1构建出本示例的Web应用项目1、新建一个Web应用的Project项目的名称为StrutsAJAXWebApp,同时再添加一个Web组件,其Context的名称为StrutsAJAXWebApp。
2、将产生出下面的状态3、添加Struts框架相关的系统包文件4、在该Web应用中添加一个index.jsp页面(1)再添加index.jsp 页面(2)设计该页面的内容<%@ page language="java" pageEncoding="gb2312"%><%@ taglib uri="/tags-bean" prefix="bean" %> <%@ taglib uri="/tags-html" prefix="html" %><%@ taglib uri="/tags-tiles" prefix="tiles" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html:html lang="true"><head><html:base /><title>index.jsp</title><script language="javascript" src="webajax.js"></script><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--></head><body><html:form action="/searchCity.do" method="post" ><table border="0"><tr><td>请输入您的查询的城市名称:</td><td><html:text property="cityNameInputID" /></td></tr><tr><td colspan="2" align="center"><html:button property="sendButton" value="异步发送"onclick="javascript:sendData();" /> <html:submit property="submitButton" value="同步发送" /></td></tr></table></html:form><div id="showResultMessage"></div></body></html:html>注意:上面的带有id的div标签的主要作用是实现对显示的内容进行定位。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
我们在网页制作的过程中经常会遇到及时刷新数据的问题,如果使用 的方法,会造成整个屏幕不断闪烁刷新的效果,这会降低用户的操作满意度。
所以我们需要一种可以实现无闪自动刷新数据的方法来解决以上问题。
实例解决问题:
希望实现用户在进入系统以后(整个session的时效之内),如果收到新邮件则发出声音提示。
checkresult=0;
}
}
}
// -->
3.check_mail.jsp
<%@ page contentType="text/html; charset=GBK" %>
<%@ page errorPage="error/login_error.jsp"%>
test1.innerHTML=" ";
checkresult=1;
}
else{//判断为真
test1.innerHTML="<ccid_file alt=新邮件 values="img/tp024"
alt=新邮件 src=img/tp024.gif />
<EMBED src='music/nudge.wma' hidden=true autostart=true loop=false>";
实现思路:
1.首页部分:< body onload="init('');"> // load时调用init(user);
2.js部分:用XMLHTTP实现页面局部刷新,调用check_mail.jsp对后台数据库进行检索判断并返回结果。
<!--
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
var checkresult=null;
var username =null;
function init(user){
username=user;
window.setInterval('Checkmail()',5000);//每隔5秒自动调用Checkmail()
}
function Checkmail()
<%@ page import="myweb.*" %>
<%@ page import="java.sql.*" %>
<%
String user=request.getParameter("uName");
Connection conn=null;
try{
conn=DBConnection.getConnection();
response.getWriter().print(0);
}else{
response.getWriter().print(1);
}
}finally{
if(conn!=null) conn.close();
}
%>
4.首页结果显示
将< span id="test1" > < /span >插入指定位置。
{
xmlhttp.open("POST", "check_mail.jsp?uName="+username, false);
xmlhttp.onreadystatechange = updatePage;
xmlhttp.send();
}
function updatePage() {
if (xmlhttp.readyState < 4) {
test1.innerHTML="loading...";
}
if (xmlhttp.readyState == 4) {
var response = xmlhttp.responseText;
if(response==1){//判断为假
PreparedStatement pStat=conn.divpareStatement("
select * from message where r_name='"+user+"' and status=0");
ResultSet rs=pStat.executeQuery();
if(rs.next()){//有记录