使用AJAX技术实现网页无闪自动局部刷新

2016-02-19 18:26 9 1 收藏

下面图老师小编要跟大家分享使用AJAX技术实现网页无闪自动局部刷新,简单的过程中其实暗藏玄机,还是要细心学习,喜欢还请记得收藏哦!

【 tulaoshi.com - Web开发 】

实例解决问题:

希望实现用户在进入系统以后(整个session的时效之内),如果收到新邮件则发出声音提示。

实现思路:

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()

}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

function Checkmail()

{

xmlhttp.open("POST", "check_mail.jsp?uName=" username, false);

xmlhttp.onreadystatechange = updatePage;

xmlhttp.send();

}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

function updatePage() {

if (xmlhttp.readyState 4) {

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

test1.innerHTML="loading...";

}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

if (xmlhttp.readyState == 4) {

var response = xmlhttp.responseText;

if(response==1){//判断为假

test1.innerHTML=" ";

checkresult=1;

}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

else{//判断为真

test1.innerHTML="

alt=新邮件 src=img/tp024.gif /

";

checkresult=0;

}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

}

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

//

3.check_mail.jsp

4.首页结果显示

将 span id="test1" /span 插入指定位置。

来源:http://www.tulaoshi.com/n/20160219/1617660.html

延伸阅读
标签: Web开发
第一段是我们的XML数据源,也就是要绑定的数据,METADATA结点相当于表名, AUTHOR、GENERATOR、PAGETYPE、ABSTRACT相当于列名,下面的Table是用来显示数据的容器。<TABLE dataSrc="#xmlData" border=1>是指定Table的数据源,<span dataFld="AUTHOR">loading...</span>绑定字段名。 --------------------------------------------------...
标签: Web开发
首先我们今天要用到的是Ajax.NET Professional ,您可以从http://www.schwarz-interactive.de/ 获取关于AJAX.NET的相关信息。其次还需要知道XML数据岛的相关知识。下面我们先来看一个简单的绑定例子: 第一步先确定XML数据源 <xml ID="xmlData" name="xmlData"> <root> <METADATA> <AUTHOR>John Smith</AUTHOR...
标签: Web开发
Ajax技术的优势到底在哪里呢,不明白。看一个最简单的例子,假设用户注册的时候,判断用户输入的名字是否已经被占用,假设输入数字1:显示"OK"(表示正确,可以使用);输入其他字符:显示"Error" (表示错误,已经被占用)。 用ajax技术实现 代码: t.htm <script> function f(){ var req =new ActiveXObject("Microsoft.XMLHTTP...
标签: Web开发
!--#include file="command.asp" -- % Dim  CurPage CurPage=cint(Request("page")) If CurPage = empty or CurPage1 Then       CurPage = 1 End If Response.ContentType="application/xml" Response.Charset="gb2312"  Respo...
标签: Web开发
通过XMLHTTP发送请求,返回结果.   script language="JavaScript" function GetResult() ...{ /**//**//**//* *--------------- GetResult() ----------------- * GetResult() * 功能:通过XMLHTTP发送请求,返回结果. * 参数:str,字符串,发送条件. * 实例:GetResult(); *--------------- GetResult() ----------------- */ v...

经验教程

697

收藏

11
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部