Chinaunix首页 | 论坛 | 博客

.NET 多一点学习，多一点进步

首页　| 　博文目录　| 　关于我

liuming836

  • 博客访问： 41056
  • 博文数量： 17
  • 博客积分： 1400
  • 博客等级： 上尉
  • 技术积分： 200
  • 用 户 组： 普通用户
  • 注册时间： 2008-10-23 15:34
文章分类

全部博文（17）

文章存档

2011年（1）

2009年（15）

2008年（1）

我的朋友
最近访客
推荐博文
相关博文
Ajax应用（应用）FAQ

分类： 系统运维

2009-05-02 12:03:29

1.index.jsp
 

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page language="java"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>动态加载的FAQ</title>

<script src="getServerRenspose.js" type="text/javascript"></script>
<script type="text/javascript">
    var r="read_faq.jsp";
    var f="faqDetail";
    function clickLoad1(){
        loadFAQ(1,"read_faq.jsp","faqDetail");
    }
    function clickLoad2(){
        loadFAQ(2,"read_faq.jsp","faqDetail");
    }
    function clickLoad3(){
        loadFAQ(3,"read_faq.jsp","faqDetail");
    }
</script>

<link
    href="Style.css"
    rel=stylesheet
    type="text/css"
>
</head>
<body>
<div id="Lageout" class="OutDiv">
<h1>FAQ Problems</h1>
    <div class="TileLable">
    <a href="#" onclick="clickLoad1();return false;">Problem1</a>
    </div>
    <div id="faqDetail1" class="Content"></div>
    <div class="TileLable">
    <a href="#" onclick="clickLoad2();return false;">Problem2</a>
    </div>
    <div id="faqDetail2" class="Content"></div>
    <div class="TileLable">
    <a href="#" onclick="clickLoad3();return false;">Problem3</a>
    </div>
    <div id="faqDetail3" class="Content"></div>
</div>
</body>
</html>

2.read_faq.jsp

<%@ page contentType="text/plain; charset=UTF-8"%>
<%@ page language="java"%>
<%
out.clear();
String faqidStr=request.getParameter("faqId");
String faqDetail=null;
int faqid=0;
if(faqidStr!=null){
    faqid=Integer.parseInt(faqidStr);
    if(faqid==1){
        faqDetail="Problem1'Rsult";
    }
    if(faqid==2){
        faqDetail="Problem2'Rsult";
    }
    if(faqid==3){
        faqDetail="Problem3'Rsult";
    }
}
if(faqDetail!=null){
    out.println(faqDetail);
}
else{
    out.println("Error");
}
%>

3.getServerRenspose.js

var xmlHttp;
var currFaqId;
var divID;
//Create XMLHttpRequest Object
function createXmlHttp() {
    //window.XMLHttpRequest isExist?
    if (window.XMLHttpRequest) {
       xmlHttp = new XMLHttpRequest();//Browsers:FireFox、Opera

    } else {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//Browser:IE
    }
}
//getFAQ_Informations
function loadFAQ(faqId,topage,div) {
    currFaqId = faqId;    //remember Currently FAQ_ID
    divID=div;
    var currFaqDetail = getFaqDetailDiv(faqId);//get Currently List
    if (currFaqDetail.style.display == "none") {
    currFaqDetail.style.display = "block";//Div State is Block
        //FAQ isExist?;if null ,get Information from Server
    if (currFaqDetail.innerHTML == "") {
            createXmlHttp();//Create XmlHttpRequest Object
            xmlHttp.onreadystatechange = loadFAQCallback;
            xmlHttp.open("GET",topage+"?faqId="+ faqId, true);
            xmlHttp.send(null);
        }
    } else {
        currFaqDetail.style.display = "none";//div state is none
    }
}
//get FAQ Information
function loadFAQCallback() {
    if (xmlHttp.readyState == 4) {
        getFaqDetailDiv(currFaqId).innerHTML = xmlHttp.responseText;//FAQ into Div
    }
}
//get div
function getFaqDetailDiv(faqId) {
    return document.getElementById(divID + faqId);
}

4.Style.css

body{
        margin:0px;
        text-align:center;
    }
    .Content{
        display:none;
        border-top:solid;
        border-bottom:none;
        border-left:none;
        border-right:none;
        border-width:1px
    }
    .OutDiv{
        border-width:1px;
        border-style:solid;
        width:250px;
    }
    .TileLable{
        border-top:solid;
        border-bottom:none;
        border-left:none;
        border-right:none;
        border-width:1px
    }

5.最终效果
阅读(288) | 评论(0) | 转发(0) |
0

上一篇：Ajax应用（理论）

下一篇：Java连接Access数据库

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6