Ajax如何实现局部刷新

dyengying 2009-03-30 04:03:05
先说问题:相当是一个文字在线直播的框体刷新(代码已经在下面的JSP代码中用红色标注),就是想做这部分的局部刷新。问题是js中不知道test1.innerHTML中应该怎么写。怎样才能像代码中红色标识的那样,循环的把sql检索得到的每一条数据都显示在页面上。请高手指点。
<script language="javascript">
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
var checkresult=null;
var username =null;
function init(){
window.setInterval('Checkdate()',5000);//每隔5秒自动调用Checkmail()
}
function Checkdate()
{
xmlhttp.open("POST", "check_date.jsp", false);
xmlhttp.onreadystatechange = updatePage;
xmlhttp.send();
}
function updatePage() {

if (xmlhttp.readyState == 4) {
var response = xmlhttp.responseText;
if(response==1){//判断为假
test1.innerHTML=" ";
checkresult=1;
}
else{//判断为真
test1.innerHTML=""; //""内不知道应该放些什么东西,jsp代码下面给出
checkresult=0;
}
}
}


jsp代码(代码太乱,主要是红色标识的那部分,后面的没有做整理):
<div class="morebd1z">
<div class="bd11r">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="543" border="0" align="center" cellpadding="0" cellspacing="0" height="166">
<tr>
<td colspan="2" width="388" align="center"><strong>活动名称:${activityLiveInfo.activity_name}</strong></td>
</tr>
<tr>
<td width="155"><img src="${activityLiveInfo.activity_live_photo}" border="0" width="140" heigh="120"></td>
<td valign="top">
<table width="100%">
<span id="test1" >
<logic:iterate id="activityInfo" name="activityInfoDetail" offset="0" >
<tr>
<td align="left" class="STYLE2">
•${activityInfo.activity_live_content}
</td>
</tr>
</logic:iterate>
</span>
</table>
</td>
</tr>
</table>
<td> 
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td colspan="2"><table width="80%" border="0" align="center" cellpadding="0"
cellspacing="0">
<form id="seeForm" method="post" action="${pageContext.request.contextPath}/pinglun/pinlun.do?opt=findByCommentary_id">
<tr>
<td height="30" align="left" valign="middle">
<span class="STYLE2">总共有${commentCount}个人提出评论     <input
type="button" name="Baoming" onclick=turn() value="查看评论">
</span>
</td>
<input type="hidden" name="commentary_id" id= "commentaryid" value ="${activityLiveInfo.activity_id}"/>
<input type="hidden" name="commentary_type" id= "commentarytype" value ="002"/>
<input type="hidden" name="commentTitle" id= "commentTitle1" value ="${activityLiveInfo.activity_name}"/>
</tr>
</form>
</table></td>
</tr>
<tr>
<td colspan="2">
<table width="80%" border="0" align="center" cellpadding="0"
cellspacing="0">
<form name="province" method="post" action="../pinglun/pinlun.do?opt=save">
<tr>
<td align="center" valign="middle">
<textarea name="activity_content" cols="65" rows="10"></textarea>
</td>
</tr>
<tr>
<td height="40" align="center" valign="middle">
<input type="hidden" name="commentary_id" id= "commentary_id" value ="${activityLiveInfo.activity_id}"/>
<input type="hidden" name="commentary_type" id= "commentary_type" value ="002"/>
<input type="hidden" name="activity_name" id= "activity_name" value ="${activityLiveInfo.activity_name}"/>
<input type="hidden" name="create_id" id= "create_id" value ="01"/>
<input type="hidden" name="commentTitle" id= "commentTitle1" value ="${activityLiveInfo.activity_name}"/>

<input onClick="return check();" type="submit" name="Submit"
value="提交">
    
<input type="reset" name="Submit2" value="重置">
</td>
</tr>
</form>
</table>
</td>
</tr>
</table>
</div>
</div>

...全文
2814 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
Zhen (Evan) Wang 2011-10-18
  • 打赏
  • 举报
回复
mark
dnpyy 2009-04-01
  • 打赏
  • 举报
回复
我把解决方法私信给你发过去了,呵呵!看看吧
dyengying 2009-03-31
  • 打赏
  • 举报
回复
RS技术的一个具体例子
在前面的帖子中,我介绍了RS的基本工作原理,显然如果将RS技术运用在一个
网站的设计中将会有很多非凡的作用(尤其是它的那个最大的优点,可以在不刷新
页面的情况下调用服务端的代码)。正是因为这个特点,你就可以象在编写一个
传统的C/S模式的程序一样,对数据库的数据进行处理了(我想大家一定很想知道具体应该如何来实现了,下面将给出一个具体的例子,调试这个破程序几乎快把我给累死,呵呵。)
从前面的描述可以看到,要使用RS技术就需要客户端和服务端满足下面两个条件:
1。客户端只需要支持Java applet即可
2。而服务端只需要支持ASP即可
换句话说,就是RS技术是完全独立与浏览器的(当然浏览器至少需要满足支持Java
和JavaScript),你可以在IE中使用,也可以完全在
NC中使用,这也是区别与RDS技术的一个显著特点。
在能够灵活运用RS技术前,先要说明一个问题,就是前面也曾经提到过的“异步调用”
的问题。也正是因为有异步调用,才能够实现你只刷新页面的某一部分而不用刷新
整个页面。
由于它的这个特点,你可以让服务端来实现在你浏览页面的同时
对你输入数据的合法性检查(当然这可以是一系列很复杂的合法性检查,例如需要
将用户输入的数据和数据库内已有的数据进行对比等,这个可不是客户端的JS能够解决的)
然后当服务端返回检查结果后,你再进行相应的操作(例如弹出一个对话框告诉用户
输入出错等等)
异步调用时的语法如下:
RSExecute(serverURL, functionname, param_list)
第一个参数是你想调用的asp页面的完整的URL路径
第二个参数是你想调用函数的名称
后面的就是该函数需要的输入参数了
如果你想调用的函数需要两个输入参数的话,就是这样的写法:
RSExecute(serverURL, functionname, f_arg_1, f_arg_2)
当进行调用时有两种写法,
一种是有返回结果的调用方式:
objResult = RSExecute(serverURL, functionname, f_arg_1, f_arg_2);
另外一种则是没有返回结果的调用方式:
RSExecute(url, func_name, f_arg_1, f_arg_2, CallbackFunction);
这种调用方式要特别的注意,其中的CallbackFunction是客户端的一个JS函数
它表示一但RS执行完毕服务端上的调用,就会马上调用这个函数,并把结果返回到这个
函数中去。
一个典型的CallbackFunction函数应该是这样的结构:
function CallbackFunction(objResult) {
//你自己的处理过程
}
其中唯一的输入参数objResult就是RS调用的返回值.
下面我们假设这样一种情况:
用户在浏览器中输入了用户的e-mail地址,然后用户离开了e-mail地址输入框
进入接下来的输入过程,这个时候就是RS该上场了,它根据用户输入的地址在
服务端的数据库中查询这个地址,就可以判断出这个用户是否已经存在,然后
把结果返回给客户端,在客户端再使用DHTML技术在一个叫"ShowResult"的输入框
里面提示用户以前输入的信息。
function CallbackFunc(objResult) {
// 提示用户的信息
window[objResult.context].value = objResult.return_value;
}
而RSExecute()应该这么调用
RSExecute(serverURL, functionname, f_arg_1, CallbackFunc, "ShowResult");
不说了,不说了,上面罗嗦了这么多,我想大家也都看得头大了,下面还是
让具体的代码来发言把:
(请在使用代码前在你的服务器上建立一个叫NW的系统DSN文件,该文件使用了
Northworld即中文ACCESS97自带的示例数据库)
下面的例子是这么进行的,default.htm中分为两祯,在
main.html页面中使用了RS技术,大家可以注意到在main.html中没有使用到submit
所以如果你在该页面中直接敲回车键的话什么都不会出现,你必须通过鼠标单击
那个"获取信息"按扭来使用这个局部页面刷新技术。在单击完该按扭后,页面会有
一段小小的延迟(这段时间内java applet在后台建立了和服务端的连接)
然后马上页面回复正常的鼠标,你可以在该页面中继续进行其他的操作。
而不必象普通页面刷新时,你只有等待数据。
而info.asp大家一眼就能够看明白,其实就是一个很简单的处理字符串的程序。
如果大家要是对DHTML技术熟悉的话,完全可以在客户端完成这些操作。
至于EmpData.asp就是服务端处理数据的程序了。
好了,其中的好处大家可以自己去
体会。

特别注意,不要改变太多代码,不然很容易出错,毕竟是在使用JavaScript编程

Default.htm文件代码如下:
<HTML>
<HEAD>
<TITLE>RS技术的实现例子</TITLE>
</HEAD>
<FRAMESET id=fset rows="70%,30%">
<FRAME name=main src="main.html">
<FRAME name=info src="info.asp">
</FRAMESET>
</HTML>

Maim.html文件代码如下
<HTML>
<HEAD>
<TITLE>RS技术的实现例子</TITLE>
</HEAD>
<BODY>
<script language="JavaScript" src="http://YourServer/_ScriptLibrary/rs.htm"></script>
<script language="JavaScript">
RSEnableRemoteScripting("http://YourServer/_ScriptLibrary");
</script>
<h1>雇员信息</h1>
<hr>
<form name=MyForm>
请输入你想查询的名字:
<br><input type=text name="empLastName" size=40>
<input type=button name=btnExecute style="width=150"
value="获取信息"
onclick="execAsynch(empLastName.value)">
</form>
<hr>

<SCRIPT LANGUAGE="javascript">
var serverURL = "http://YourServer";
var pageURL = "/batman/EmpData.asp";

function refreshPage(co)
{
if (co.status != 0) {
alert("发生异常错误n" +
message);
}
strText = co.return_value;
top.info.location = "info.asp?info=" + escape(strText);
}
function execAsynch(empLastName)
{
RSExecute(serverURL+pageURL, "GetEmpInfoAsArray",
empLastName, refreshPage);
}
</SCRIPT>
</BODY>
</HTML>

info.asp文件代码
<HTML>
<BODY>
<%
Response.Write Request.ServerVariables("REMOTE_USER")

strText = Request.QueryString("info")
If strText = "" Then Response.End
arrData = split(strText, "|")
arrLabels = split("职工,头衔,城市,雇佣日期", ",")
%>
<table border=0>
<%
for i=0 to 3
Response.Write "<tr>"
Response.Write "<td><b>" & arrLabels(i) & "</b></td>"
Response.Write "<td><i>" & arrData(i) & "</i></td>"
next
%>
</table>
</BODY>
</HTML>

EmpData.asp文件
<%@ LANGUAGE=VBSCRIPT %>
<% RSDispatch %>

<SCRIPT RUNAT=SERVER Language=javascript>
<!--#INCLUDE VIRTUAL="/_ScriptLibrary/RS.ASP"-->

function Description()
{
this.GetEmpInfoAsArray = DoGetData;
}
public_description = new Description();


function DoGetData(empName)
{
sql = "select * from 雇员 where [名字]='" + empName + "'";
rst = new ActiveXObject("ADODB.Recordset");
rst.CursorLocation = 3;

rst.Open(sql, "NW");
i = 0;
strText = "";

if (rst.RecordCount == 1) {
strText += rst.Fields("雇员ID").Value + " - " +
rst.Fields("尊称").Value + " " +
rst.Fields("姓氏").Value + " " +
rst.Fields("名字").Value;
strText += "|";
strText += rst.Fields("头衔").Value;
strText += "|";
strText += rst.Fields("城市").Value + " " +
rst.Fields("地区").Value + ", " +
rst.Fields("国家").Value;
strText += "|";
d = new Date(rst.Fields("雇用日期").Value);
strText += (1+d.getMonth()) + "/" + d.getDate() + "/" + d.getYear();
}
return strText;
}
</SCRIPT>
dyengying 2009-03-31
  • 打赏
  • 举报
回复
[Quote=引用 6 楼 niu1105 的回复:]
AJAX QQ群 78514534
.NET c# QQ群 20235451
[/Quote]
不能上qq
dyengying 2009-03-31
  • 打赏
  • 举报
回复
http://topic.csdn.net/u/20080122/11/c4b262d7-a881-4acc-86e4-8bd8445cc55c.html
loranland 2009-03-30
  • 打赏
  • 举报
回复
不熟 js 的话,可以在后台处理时直接 response.sendRedirect 跳转到另一个jsp里,
那个jsp的页面是 你的红色部分。

<table width="100%">
<span id="test1" >
<logic:iterate id="activityInfo" name="activityInfoDetail" offset="0" >
<tr>
<td align="left" class="STYLE2">
•${activityInfo.activity_live_content}
</td>
</tr>
</logic:iterate>
</span>
</table>
</td>
</tr>
</table>


然后就是innerHTML= responseText 
dyengying 2009-03-30
  • 打赏
  • 举报
回复
dyengying 2009-03-30
  • 打赏
  • 举报
回复
继续求解
my145794 2009-03-30
  • 打赏
  • 举报
回复
test1.innerHTML="<table width="100%"> 
<tr>
<td align="left" class="STYLE2">
•${activityInfo.activity_live_content}
</td>
</tr>
</table>";


<div id=test1>
有可能使用到拆串参考http://topic.csdn.net/u/20090121/13/36193e9c-a206-4b93-91b6-300884a4cdb8.html

lihan6415151528 2009-03-30
  • 打赏
  • 举报
回复
后台处理之后返回的数据,前台灵活运用js处理即可,这是我个人的见解

52,782

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧