使用AJAX技術(shù)實(shí)現(xiàn)網(wǎng)頁(yè)無(wú)閃自動(dòng)局部刷新_AJAX教程
推薦:Web2.0歲月使用AJAX技術(shù)的十大理由 保守來(lái)說(shuō),AJAX在現(xiàn)在是熱得不能再熱的技術(shù)。沒(méi)有人能否認(rèn),它擁有大批的支持者。在CNN上,它從二月份的一個(gè)不被看好的詞語(yǔ)到十月份成長(zhǎng)成一個(gè)初具雛形的技術(shù)。所以,有必要要看看為什么
實(shí)例解決問(wèn)題:
希望實(shí)現(xiàn)用戶在進(jìn)入系統(tǒng)以后(整個(gè)session的時(shí)效之內(nèi)),如果收到新郵件則發(fā)出聲音
實(shí)現(xiàn)思路:
1.首頁(yè)部分:< body onload="init('<%=ses_userBean.getUsername()%>');"> // load時(shí)調(diào)用init(user);
2.js部分:用XMLHTTP實(shí)現(xiàn)頁(yè)面局部刷新,調(diào)用check_mail.jsp對(duì)后臺(tái)
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
var checkresult=null;
var username =null;
function init(user){
username=user;
window.setInterval('Checkmail()',5000);//每隔5秒自動(dòng)調(diào)用Checkmail()
}
function Checkmail()
{
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){//判斷為假
test1.innerHTML=" ";
checkresult=1;
}
else{//判斷為真
test1.innerHTML="
alt=新郵件 src=img/tp024.gif />
checkresult=0;
}
}
}
//
3.check_mail.jsp
<%@ page contentType="text/html; charset=GBK" %>
<%@ page errorPage="error/login_error.jsp"%>
<%@ page import="myweb.*" %>
<%@ page import="
java .sql.*" %><%
String user=request.getParameter("uName");
Connection conn=null;
try{
conn=DBConnection.getConnection();
PreparedStatement pStat=conn.divpareStatement("
select * from message where r_name='" user "' and status=0");
ResultSet rs=pStat.executeQuery();
if(rs.next()){//有記錄
response.getWriter().print(0);
}else{
response.getWriter().print(1);
}
}finally{
if(conn!=null) conn.close();
}
%>
4.首頁(yè)結(jié)果顯示
將< span id="test1" > < /span >插入指定位置。
分享:AJAX和傳統(tǒng)的ASP無(wú)刷新技術(shù)比較以下為引用的內(nèi)容: 兩者都是無(wú)刷新提取服務(wù)器(數(shù)據(jù)庫(kù))數(shù)據(jù)并實(shí)時(shí)顯示在客戶段,那為什么現(xiàn)在都要用 ajax呢,還要考慮中文編碼等麻煩問(wèn)題。ajax到底
- Ajax中瀏覽器的緩存問(wèn)題解決方法
- AJAX和WebService實(shí)現(xiàn)省市縣三級(jí)聯(lián)動(dòng)具體代碼
- ajax 登錄功能簡(jiǎn)單實(shí)現(xiàn)(未連接數(shù)據(jù)庫(kù))
- AJAX和WebService實(shí)現(xiàn)郵箱驗(yàn)證(無(wú)刷新驗(yàn)證郵件地址是否合法)
- AJAX和三層架構(gòu)實(shí)現(xiàn)分頁(yè)功能具體思路及代碼
- 使用AJAX返回WebService里的集合具體實(shí)現(xiàn)
- AJAX獲取服務(wù)器當(dāng)前時(shí)間及時(shí)間格式輸出處理
- ajax傳遞多個(gè)參數(shù)具體實(shí)現(xiàn)
- ajax傳遞一個(gè)參數(shù)具體實(shí)現(xiàn)
- 滑輪滾動(dòng)到頁(yè)面底部ajax加載數(shù)據(jù)配合jsonp實(shí)現(xiàn)探討
- jQery ajax——load()方法示例介紹
- jQuery+Ajax實(shí)現(xiàn)表格數(shù)據(jù)不同列標(biāo)題排序(為表格注入活力)
AJAX教程Rss訂閱編程教程搜索
AJAX教程推薦
- 掌握 Ajax,第 1 部分 Ajax 簡(jiǎn)介
- 基于AJAX技術(shù)實(shí)現(xiàn)Struts校驗(yàn)框架
- 怎樣使用JavaScript和Ajax發(fā)出異步請(qǐng)求
- AJAX入門XMLHttpRequest慨述
- 解讀Ajax如何實(shí)現(xiàn)頁(yè)面loading效果!
- 使用AJAX返回WebService里的集合具體實(shí)現(xiàn)
- AJAX、AJAX實(shí)例及AJAX源代碼(asp)
- 站長(zhǎng)推薦:Ajax技術(shù)概述與現(xiàn)狀應(yīng)用
- 如何結(jié)合MS AJAX將js文件編譯到動(dòng)態(tài)鏈接庫(kù)
- 如何用AJAX實(shí)現(xiàn)網(wǎng)頁(yè)無(wú)刷新功能
猜你也喜歡看這些
- 相關(guān)鏈接:
復(fù)制本頁(yè)鏈接| 搜索使用AJAX技術(shù)實(shí)現(xiàn)網(wǎng)頁(yè)無(wú)閃自動(dòng)局部刷新
- 教程說(shuō)明:
AJAX教程-使用AJAX技術(shù)實(shí)現(xiàn)網(wǎng)頁(yè)無(wú)閃自動(dòng)局部刷新
。