作者TonyQ (^^)
看板Ajax
标题Re: [问题] 不换页更新图片资讯
时间Wed Dec 30 11:04:36 2009
※ 引述《chocho1981 (o(.```.)o)》之铭言：
: 标题: Re: [问题] 不换页更新图片资讯
: 时间: Tue Dec 29 23:46:32 2009
:
: ※ 引述《chocho1981 (o(.```.)o)》之铭言：
: : 我想请问一下这样的效果要怎麽做
: : 我目前有一个网页 里面有一张小图片 旁边一个按钮
: : 目前的情况是
: : 按钮按下==> ASP网页 ==> 资料库 ==> ASP网页 ==> 图片效果
: : (更改图片 (存入资料库) (读取图片 (显示图片)
: : X、Y座标) 新的座标) 新的座标)
: :
: : 我这网页是一个类似大富翁的游戏
: : 但是每次按下按钮 整个网页就要重新读取一次
: : 有没有办法使用AJAX
: : 让按钮按下後 只更新图片的座标就好 (同时要修改资料库的值)
1F：→ TonyQ:其实我更不解的是为什麽一个 request 每次都要扯ajax XD12/29 23:51
2F：→ chocho1981:因为不想要玩大富翁的时候整张地图在那边reload12/30 00:26
AJAX不是用来「使用」的，他是一种「设计模式」，
也就是符合某一种特定的流程就称之为ajax ，被用来「使用」的是 request 。
(请注意一下ajax用的iframe或 XMLHttp
Request )
我说的是既然你都描述流程的状况下，描述需求比讲一句ajax来得重要很多。
你这篇文章的原始问题看起来是七零八落的，
你要更新图片的座标，那你的资料来源是怎麽要来，
原本页面要更新的是哪些项目，这些资料没有你是要别人怎麽回。 XD
都没有也没关系，来个现在运行的页面也会知道，什麽都没有当然就无从帮起。
:
: 不好意思 再请教一个问题
:
: 我目前是已经可以成功的做出我之前想要的程序了
:
: 只是又有个问题
:
: 当初我在做那个大富翁游戏时 按下按钮後
:
: 会纪录下先前的座标 和之後的座标
:
: 然後用 javascript 做出一个移动的效果
:
: 当初是这样弄的
:
: <1>
: <body onLoad="process()">
:
: <2>
:
: <SCRIPT LANGUAGE="JavaScript">
type="text/javascript" //这不会有影响
:
: function process() {
: setInterval("showTimer();",10);
: }
:
: var i=0;
:
: function showTimer() {
:
: if (<%=rs5("locX")-session("locX")%>>=i){
: document.getElementById('move_pic').style.left=<%=session("locX")%>+i
: i+=2;
: }
: if (<%=rs5("locY")-session("locY")%>>=i){
: document.getElementById('move_pic').style.top=<%=session("locY")%>+i;
: i+=2;
: }
: if (<%=rs5("locX")-session("locX")%><=i*-1){
: document.getElementById('move_pic').style.left=<%=session("locX")%>-i;
: i+=2;
: }
: if (<%=rs5("locY")-session("locY")%><=i*-1){
: document.getElementById('move_pic').style.top=<%=session("locY")%>-i;
: i+=2;
: }
: ==============================================================================
:
: 节录程式码如上
:
: 原本是可以作用的
:
: 但是使用ajax的方法读取这样的程式码
:
: 却发现一点效果也没有
:
: 我自己是在猜想是不是用了ajax读取
:
: 所以 <body onLoad="process()"> 这段变成无效了？
:
: 请教一下是因为这样吗？ 还是有可能是其他我没发现的问题？
:
: 如果真是这样的话 可以有什麽解决方式呢？
:
: --
:
※ 发信站: 批踢踢实业坊(ptt.cc)
: ◆ From: 210.240.131.71
: → TonyQ:你怎麽读取 , 读取了什麽 这两点要说啊... 12/29 23:53
:
: <script language=javascript>
: <!--
: function httpget(xUrl, method, sendData) {
:
/* 前略... /*
: xmlhttp.open(method, xUrl, false);
^^^^^^
(这样的作法严谨来说不算ajax , 因为 AJAX 是指非同步的传输. )
/* 後略 */
:
: }
:
: function getContent(objname, cid)
: {
: var obj = document.getElementById(objname);
: if(obj)
: {
: obj.innerHTML = httpget("chk.asp", "GET", "");
你这里的 response 不给 ,
谁晓得你传回什麽跟要怎麽处理...
: }
:
: }
:
: function postContent(objname, postdata)
: {
: var obj = document.getElementById(objname);
: if(obj)
: {
: obj.innerHTML = httpget("chk.asp", "POST", postdata);
: }
:
: }
:
:
: -->
: </script>
:
: 程式码主要如上列所示
:
: 再配上一个按钮 和一个DIV标签
:
: <input type="button" value"GO" name="B3" onclick="postContent('div1','B3=1');">
:
: <div id=div1> </div>
:
: 按钮按下後去将资料送到chk.asp去作处理
:
: 更新资料库後 一样由chk.asp这个网页秀出资料库中更新过後的数据
:
: 大致上是这样~"~
:
: ※ 编辑: chocho1981 来自: 210.240.131.69 (12/30 00:08)
: → emn178:用ajax没有reload的话 body onload就只会执行一次 12/30 00:04
: → chocho1981:所以使用ajax就没办法用JS做动画效果了吗 QQ? 12/30 00:27
: 推 buganini:当然不是啊 你要找其他触发点 或用setTimeout之类的 12/30 02:39
: → emn178:showTimer中的变数应该由JavaScript去给定,才能配合AJAX使 12/30 09:25
: → emn178:用,然後在AJAX request结束後去呼叫process就行了 12/30 09:26
上面的推文跟三楼其实都已经讲到关键点 .
如果我是你 , 我会改写函式
var rsX="<%=rs5("locX")%>";
var rsY="<%=rs5("locY")%>";
var sessionX="<%=session("locX")%>";
var sessionY="<%=session("locY")%>";
function showTimer(){
if (rsX-sessionX>=i){
document.getElementById('move_pic').style.left=sessionX+i;
i+=2;
}
if (rsY-sessionY>=i){
document.getElementById('move_pic').style.top=sessionY+i;
i+=2;
}
if (rsX-sessionX<=i*-1){
document.getElementById('move_pic').style.left=sessionX-i;
i+=2;
}
if (rsY-sessionY<=i*-1){
document.getElementById('move_pic').style.top=sessionY-i;
i+=2;
}
}
到时候你 requrest 回来的东西 , 中间插个
<input type="hidden" id="rsX" value="xx" />
<input type="hidden" id="rsY" value="xx" />
<input type="hidden" id="sessionX" value="xx" />
<input type="hidden" id="sessionY" value="xx" />
function getContent(objname, cid)
{
var obj = document.getElementById(objname);
if(obj)
{
obj.innerHTML = httpget("chk.asp", "GET", "");
rsX=document.getElementById("rsX").value;
rsY=document.getElementById("rsY").value;
sessionX=document.getElementById("sessionX").value;
sessionY=document.getElementById("sessionY").value;
}
}
//类似这样的处理流程 , 至於 rsX跟rsY sessionX sessionY ,
//这些value要怎麽填, 自己再想想看. XD
//其实异动不大的状况下用json做回传 , 应该是蛮理想的 ,
//有兴趣再自己去看看相关的文吧...
坦白讲 , 我觉得要写到这样 , 那都不如我来帮你写程式了,
我自己来写code几分钟内就写得完了...打这篇文章要花我几十分钟 ,
所以这类型的文章才会说很难解释 , 浪费时间嘛...
如果没办法知道自己 request送了什麽、弄不清楚ajax流程中时间轴 ,
不能掌握自己回传的response , 不能随时掌握页面dom中元素的状况 ,
特别是没办法了解资料来源跟如何取得资料 ,
这样就算要教 , 也无从教起啊 ,就好像要教不会乘法的人算面积一样 .
--
What do you want to have ? / What do you have?
从书本中，你可以发现我的各种兴趣。
从ＣＤ中，你可以了解我所喜欢的偶像明星。
或许从文字你很难以了解一个人，但从物品可以。
My PPolis , My past. http://ppolis.tw/user/Tony
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 74.207.224.18
※ 编辑: TonyQ 来自: 74.207.224.18 (12/30 11:07)
3F：推 sjrom:呵，教得懂的话就可以让别人省N个钟头了..推佛心教学. 12/30 13:36
4F：推 cassatte:我猜原PO看不懂 12/30 22:09
5F：→ TonyQ:不至於吧 , 都说觉得不难了... 12/30 22:55