InnerHTML 实现伪 AJax 效果

最近在折腾毕设,希望给开发中的项目增加 Ajax 效果,通过异步加载和视觉反馈,以增强用户体验。

在了解了 Ajax 的原理(果然了解一件事物最好的方式是去了解其运作原理,最好是自己复刻一遍)之后,联想到此前玩 GreaseMonkey 时了解到的 InnerHTML 的用法,自作聪明地琢磨了一个用 InnerHTML 实现 Ajax 效果的简单伪办法

事情是这样的。使用 Ajax,需要掌握 Javascript 编写技能,理解 XMLHttpRequest 对象,并且在与服务器的连接和响应确认上来回折腾。其实从功能实现层面来看,使用 Ajax 的目的无非在于:1)前台动态改变页面内容,以响应用户操作;2)后台处理数据,例如将某个值传递到数据库。

通过 InnerHTML ,稍加转换思路,完全可以另辟蹊径,通过以下淫荡技巧实现:

1)前台动态改变页面内容。这个对于 InnerHTML 而言再简单不过了。tablerowObject.innerHTML=$str 语句就是用来改变页面中某个元素的内部代码。如 document.getElementById(“div1″).innerHTML=”<strong>Hello World</strong>” 就是一个典型的实例。

2)后台处理数据。用 InnerHTML 同样可以实现,办法是 —— iframe!没错,用 InnerHTML 为页面新开一个 iframe(当然长宽调成0可使其隐藏而不显示在页面内),直接 src 到一个负责处理数据的带参数的页面,例如 do.php?action=add&message=aloha 。这个 do.php 负责接收参数并完成处理,比如将 aloha 这个字符串写进数据库。

编写一个简易版 Facebook 的 Like 按钮举例。通过上述方法,编写的思路是:

  • 1)前台用 InnerHTML 将 X people like 中的 X 加 1 (此处 X 可能需事先从数据库读取);
  • 2)InnerHTML 开个 iframe (地址形如 do.php?statue=12345&action=likeadd);
  • 3)编写 do.php,获取参数,最终将数据库中编号为 12345 的这条状态的 like 数量 +1 。

此方法的适用场合:系统架构不复杂,传递的参数不多,对安全性和稳定性的要求不高,以及懒得写 Ajax(比如糊弄毕设这档子事儿) …

三国杀下一代卡牌系统设计畅想

以下内容纯属受昨晚寝室卧谈之启发,就三国杀下一代系统设计展开无责任畅想,其中杂糅游戏王、万智牌等现行集换式卡牌元素与个人恶趣味。始发于微博,整理至博客,抛砖引玉,博君一乐。其实很多时候我们大可不必遵循他人既定的规则,而是大方创造自己的玩法。

新卡牌系统畅想①:【场地卡】对全场范围内指定国家/性别/血格/名称的武将产生作用;全场只能保留一张场地卡,新打出的场地卡替换旧卡;产生积极效果或消极效果。#举例# 【赤壁】效果:全场范围内魏将视作受到铁锁连环,且每回合受到一点火焰伤害。#再举例# 蜀道、岐山、茅庐、长坂坡……

新卡牌系统畅想②:【衍生物(Token)】在场地上制造视作武将的代币(距离+1);衍生物有自己的血格;衍生物可有特定效果。#举例#诸葛亮死后,在场上留下一个【锦囊衍生物/蜀/1血】;任何人战破锦囊衍生物视作获得一张无懈可击;只在场上存在魏延时,魏延代替锦囊衍生物被直接击破。

Continue reading 三国杀下一代卡牌系统设计畅想