在实际Web页面中，有一些数据是需要实时反馈给浏览者的，但是完全刷新当前页面从而改变页面部分内容将会是很不友好的用户体验，并且浏览者也不容易发现哪些数据或内容是重新加载的。此时，使用Ajax技术定时向服务器发送改变页面内容请求，从而即可实现页面内容自动刷新的效果。
以下实例通过一个按钮点击事件来出发页面自动刷新效果，通常在实际开发中会使用onload事件取代。js代码中较多地使用了setTimeout()方法来定时执行特定的函数，通过响应信息的内容对DOM对象进行动态修改。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
var xhr;
function createXhr(){
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
} else {// code for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
}
function getStart(){
createXhr();
var url = "AutoRefresh?task=reset";
xhr.open("GET",url,true);
xhr.onreadystatechange = doCallback;
xhr.send(null);
}
function doCallback(){
if(xhr.readyState == 4){
if(xhr.status == 200){
setTimeout("respServer()", 5000);
refreshTime();
}
}
}
function respServer(){
createXhr();
var url = "AutoRefresh?task=ref";
xhr.open("GET",url,true);
xhr.onreadystatechange = refCallback;
xhr.send(null);
}
function refCallback(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var message = xhr.responseXML.getElementsByTagName("message")[0].firstChild.data;
if(message != "done"){
var new_row = createRow(message);
var table = document.getElementById("tab");
var t_body = table.getElementsByTagName("tbody").item(0);
var first_row = t_body.getElementsByTagName("tr").item(1);
t_body.insertBefore(new_row, first_row);
setTimeout("respServer()", 5000);
refreshTime();
}
}
}
}
function refreshTime(){
var time_span = document.getElementById("time");
var time_val = time_span.innerHTML;
var int_val = parseInt(time_val);
var new_val = int_val - 1;
if(new_val > 0 ){
setTimeout("refreshTime()", 1000);
time_span.innerHTML = new_val;
} else {
time_span.innerHTML = 5;
}
}
function createRow(message){
var row = document.createElement("tr");
var cell = document.createElement("td");
var data = document.createTextNode(message);
cell.appendChild(data);
row.appendChild(cell);
return row;
}
</script>
</head>
<body>
<h2>Auto fresh page</h2>
<input type="button" value="start" onclick="getStart();">
<p>
Page will refresh in <span id="time">5</span> seconds.
</p>
<table id="tab" align="left">
<tbody>
<tr><td></td></tr>
</tbody>
</table>
</body>
</html>
服务端代码较为简洁，仅仅是通过计数器的变化返回一些不同的信息。最终响应信息将使用XML格式进行传输，客户端需要将XML处理为DOM对象进行解析。
package com.any.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class AutoRefresh
*/
@WebServlet("/AutoRefresh")
public class AutoRefresh extends HttpServlet {
private static final long serialVersionUID = 1L;
private int counter = 1;
/**
* @see HttpServlet#HttpServlet()
*/
public AutoRefresh() {
super();
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String res = "";
String task = request.getParameter("task");
String message = "";
if(task.equals("reset")){
counter = 1;
} else {
switch(counter){
case 1:message="message 1";break;
case 2:message="message 2";break;
case 3:message="message 3";break;
case 4:message="message 4";break;
case 5:message="message 5";break;
case 6:message="message 6";break;
case 7:message="done";break;
}
counter++;
}
res = "<message>"+message+"</message>";
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
out.println("<response>");
out.println(res);
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
}
}
启动并进入当前页面后，点击start按钮即可发现页面在自动读取响应信息，并将信息展示在当前页面，整个页面也没有进行重新绘制。
另外，在实际应用中，我们会经常遇到开发一个进度条的情况。通常的做法是选择插件，本文将不依赖于任何插件，通过Ajax技术每隔1.5秒向服务器发送一次数据请求，返回当前任务进度，从而展示在页面上。客户端仅需要根据服务端返回任务进度数据的第一位来控制进度条中进度块的着色即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
var xhr;
var key;
var bar_color = 'gray';
var span_id="block";
var clear = " ";
function createXhr(){
if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
xhr=new XMLHttpRequest();
} else {// code for IE6, IE5
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
}
function go() {
createXhr();
checkDiv();
var url = "ProgressExam?task=create";
var button = document.getElementById("go");
button.disabled=true;
xhr.open("GET", url, true);
xhr.onreadystatechange = goCallback;
xhr.send(null);
}
function goCallback(){
if(xhr.readyState == 4){
if(xhr.status == 200){
setTimeout("respServer()", 1500);
}
}
}
function respServer(){
createXhr();
var url = "ProgressExam?task=ref&key="+key;
xhr.open("GET", url, true);
xhr.onreadystatechange = refCallback;
xhr.send(null);
}
function refCallback(){
if(xhr.readyState == 4){
if(xhr.status == 200){
var percent = xhr.responseXML.getElementsByTagName("percent")[0].firstChild.data;
var index = processResult(percent);
for(var i =1;i<=index;i++){
var elem = document.getElementById("block"+i);
elem.innerHTML = clear;
elem.style.backgroundColor = bar_color;
var next_cell = i+1;
if(next_cell>index&&next_cell<=9){
document.getElementById("block"+next_cell).innerHTML = percent + "%";
}
}
if(index<9){
setTimeout("respServer()",1500);
} else {
document.getElementById("complete").innerHTML = "complete!";
document.getElementById("go").disabled = false;
}
}
}
}
function processResult(percent){
var idx;
if(percent.length == 1){
idx = 1;
} else if(percent.length == 2){
idx = percent.substring(0,1);
} else {
idx = 9;
}
return idx;
}
function checkDiv(){
var progress_bar = document.getElementById("bar");
if(progress_bar.style.visibility == "visible"){
clearBar();
document.getElementById("complete").innerHTML = " ";
}else{
progress_bar.style.visibility = "visible";
}
}
function clearBar(){
for(var i = 1;i<10;i++){
var elem = document.getElementById("block"+i);
elem.innerHTML = clear;
elem.style.backgroundColor = "white";
}
}
</script>
</head>
<body>
<h2>Launch progress bar</h2>
<input type="button" value="start" id="go" onclick="go();">
<p>
<table align="center">
<tr><td>
<div id="bar" style="padding:2px;border:solid black 2px;visibility: hidden">
<span id="block1"> </span>
<span id="block2"> </span>
<span id="block3"> </span>
<span id="block4"> </span>
<span id="block5"> </span>
<span id="block6"> </span>
<span id="block7"> </span>
<span id="block8"> </span>
<span id="block9"> </span>
</div>
</td></tr>
<tr><td id="complete" align="center"></td></tr>
</table>
</p>
</body>
</html>
服务端的代码是一个虚拟任务，反应的是任务执行进度，仅仅需要向客户端反馈当前任务执行的进度百分比即可。
package com.any.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class ProgressExam
*/
@WebServlet("/ProgressExam")
public class ProgressExam extends HttpServlet {
private static final long serialVersionUID = 1L;
private int counter = 1;
/**
* @see HttpServlet#HttpServlet()
*/
public ProgressExam() {
super();
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String task = request.getParameter("task");
String res = "";
if(task.equals("create")){
res = "<key>1</key>";
counter = 1;
}else{
String percent = "";
switch(counter){
case 1:percent = "10";break;
case 2:percent = "21";break;
case 3:percent = "35";break;
case 4:percent = "52";break;
case 5:percent = "67";break;
case 6:percent = "75";break;
case 7:percent = "88";break;
case 8:percent = "100";break;
}
counter++;
res = "<percent>"+percent+"</percent>";
}
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
out.println("<response>");
out.println(res);
out.println("</response>");
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
相关推荐
jQuery AJAX File Upload 技术使得在不刷新页面的情况下实现文件上传成为可能，提高了用户体验。通过理解jQuery和AJAX的基本原理，以及HTML5的`FormData`对象，开发者可以构建高效、安全的文件上传功能。同时，关注...
7. **AJAX**：异步JavaScript和XML（AJAX）允许网页在不刷新整个页面的情况下更新部分内容，提高用户体验。例如，可以使用AJAX实现无刷新的搜索结果加载或动态加载更多的内容。 8. **Web组件**：Web组件是一组Web...
此外，JavaScript还可以实现Ajax异步数据交换，使网页能够在不刷新整个页面的情况下更新内容，这种技术常用于动态加载更多的内容或者实时更新数据。比如，社交媒体的无限滚动加载更多动态，或者是天气预报的实时更新...
Ajax功能使得页面无需刷新即可与服务器进行异步通信，增强了用户体验。 **jQuery UI** jQuery UI是基于jQuery的用户界面库，提供了丰富的可交互组件和设计模式。这些组件包括对话框（Dialog）、日期选择器...
1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒计时载入页面 1.11 ...
jQuery的$.ajax和$.get、$.post等函数简化了异步数据请求，实现局部刷新和动态加载。 9. **Ajax加载内容后执行（Ajax Callbacks）** success、complete、error回调函数可以在Ajax请求完成后执行相应的操作。 10....
1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错原因 1.9 当前网页调用其他网页 1.10 倒计时载入页面 1.11 ...
7. **Ajax交互**：JQuery的`$.ajax()`或`$.get()/$.post()`方法可以轻松实现异步数据请求，更新局部页面，实现无刷新操作，提升用户体验。 8. **拖放功能**：通过`draggable()`和`droppable()`方法，JQuery可以实现...
### JavaScript代码常用大全知识点解析 #### 一、验证类 **1.... - **1.1 整数验证** - 目的是确保输入的字符串仅包含整数。...- 实现页面的部分刷新或完全不刷新，通过 AJAX 或 iframe 实现异步数据加载。
HTML5手机版问卷是一种基于Web技术实现的移动端调查工具，它利用HTML5...开发者可以根据自己的需求对模板进行扩展和修改，例如添加自定义的表单控件、数据验证规则，或者通过Ajax实现无刷新提交，进一步提升用户体验。
同时，为了提高用户体验，可能还会使用AJAX技术异步加载数据，如歌单、歌曲信息等，使得页面在不刷新的情况下更新内容。 此外，考虑到现代网页的性能优化，开发者可能还运用了CSS预处理器（如Sass或Less）来编写更...
15. **Ajax异步请求**：无刷新更新页面内容，使用XMLHttpRequest或fetch API与服务器通信。理解请求状态、数据格式化和错误处理。 以上只是部分JavaScript网页特效及其涉及的技术点，实际资源中可能包含更多实例，...
4. **表单提交处理**：JavaScript可以防止表单的默认提交行为，通过`event.preventDefault()`阻止页面刷新，然后使用Ajax异步提交数据，这样用户在提交表单时仍能保持当前浏览状态。 5. **表单重置**：在用户完成...
1. **Ajax 技术**：Ajax（异步JavaScript和XML）是网页开发中的核心技术，允许页面在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。在 Smooth-Admin 中，Ajax 被用于实现无刷新的数据交互，提供更...
8、评论管理、ajax评论系统，无刷新提交数据。 会员管理系统 1、前台快速注册。 2、也可以由管理员在后台添加会员帐号后下发。 3、前台会员管理菜单任意扩展、会员注册资料也可以在模版中扩展。 4、会员组别...
当调用`refreshPro()`函数时，一个新的`ProgressBar`实例被创建，并与ID为`contain`的`<div>`关联，然后显示进度条。`finishProcessBar()`用于模拟任务完成，将进度条填满至100%，而`destroyProcessBar()`则用于移除...
内容更新了，虽然缓存还没过期，相关的页面同样自动更新。 16.不同栏目可绑定独立域名或二级域名 不需要服务器的支持，只要网站上能够绑定多个域名（几乎所有虚拟主机都支持），就可以在同一个虚拟主机上实现多个...
内容更新了，虽然缓存还没过期，相关的页面同样自动更新。 16.不同栏目可绑定独立域名或二级域名 不需要服务器的支持，只要网站上能够绑定多个域名（几乎所有虚拟主机都支持），就可以在同一个虚拟主机上实现多个...
实现实时更新，通常需要监听数据源的变化，并在数据变化时触发Tree组件的刷新事件。此外，还可以通过自定义TreeItemRenderer，实现更复杂的动态效果。 ### 23. iBatis的映射文件配置 iBatis（现称MyBatis）是一个...
响应式网页设计（Responsive Web Design，简称RWD）是一种让网站在不同尺寸和分辨率的设备上自动调整布局、内容和功能的方法。通过使用媒体查询（Media Queries）、流式布局（Fluid Grids）和弹性图片（Flexible ...