HTML5 修改浏览器url而不刷新页面

嘛,起因是黑子大叔在微博上的一条@信息,找起了这个的实现,看了一圈google的中文信息内似乎还没有怎么提到这个的内容,就发表上来。

详细效果就是类似于用Firefox4+/Chrome 5+/Safari 5+/Opera 11.5+登录新浪微博后看到的个人时间轴,在翻页时可以观察到这个效果,地址栏URL变动,但是页面没有刷新,用firebug观察也观察不到刷新整个页面,只有ajax请求的翻页数据。从先前的理解来说,URL的修改必然引起(请注意我不是在说通过锚点修改)浏览器重载页面,但利用HTML5新加入的history.pushState();history.replaceState();可以完全自己维护一个历史记录列表绕开历史记录完全由浏览器控制的机制,从而实现比锚点更加完美的一种页内更新的体验。

代码方面很简单,只要在需要修改url的地方插入一行:

window.history.pushState({"html":response.html,"pageTitle":response.pageTitle}, 'title', urlPath);
//三个参数,分别为:状态对象,标题(目前被浏览器忽略),地址

即可在历史记录里面产生一个新的历史记录(另一个replaceState方法参数完全相同,只是替代掉当前的状态)。
在体验上,非常接近于使用锚点(window.location = “#foo”;),但是mozilla的文档提出了以下三点好处:

  • 新的URL可以是和原始页面URL同域下的任何URL,如果用锚点,只能更新#后面的部分
  • 仅在需要时更新URL,锚点的历史记录在相同时不会创建(即当前已经是”#foo”的情况下,如果再将当前页面锚点设置为”#foo”,不会产生新的历史记录)
  • 可以记录下任意类型的数据,使用锚点的话将要自己维护一份历史数据列表或者把数据转码到一个字符串里

(翻译&描述的有点别扭,见笑了,不过其实应该自己也能体会到这些好处才是)

我自己实现的一个例子:
http://vifix.cn/atelier/demos/html5-update-browser-url-without-reloading-page

Read the rest of this entry >>

Arrive Hangzhou

应朋友之邀给一家航空杂志社《Arrive Hangzhou》做的官方网站,从设计到编码均为在下完成 – 。 – (虽然在对方boss要求下修改不少),采用WordPress实现。

欢迎大家关注 http://www.arrivehangzhou.com

利用Google Map API获取地址坐标

Google.com

朋友拜托改的一段PHP小代码,其实就是Google MAP API FAQ里面提到的例子稍作修改,原文例子还用到了MySQL作为存储因此扯了一堆MySQL和PHPMyAdmin,只是想简单查下的就显得没必要了。

修改 @ 2009-06-07 :

于是今天写了一个Javascript版本的:http://vifix.cn/atelier/address_to_coordinates/
,代码都在HTML里面了,感兴趣可以右键查看源码。

下面是PHP版本的代码:
Read the rest of this entry >>

一个PHP简易访问计数

source_php

嘛,受朋友所托写的,不是什么大不了的东西,贴上来就当给初学者参考吧
只有计数功能,利用session防止重复计数

注意只能运行在PHP5+上

代码见页内:

Read the rest of this entry >>

首页更新

vifix9

觉得先前的首页在载入效率上很有问题,于是干脆一鼓作气重新做了一个,总共消耗大概16个小时。并且加入了一些细节和效果和内容(主要是一些个人的作品)。嘛,今年过后也得找工作了,就当广告先做起来吧~

访问:http://vifix.cn

眼下似乎还有一些问题,慢慢进行调整了。

滚动和音效分别使用了这两个jQuery插件:jQuery.jScrollPane, jQuery.flashSound

PS: 搞这个东西时项目目录命名为vifix9(因为是09年),真有改成⑨的冲动……

PHP自动加载class文件的方案

PHP5中有一个很方便的__autoload的魔术函数,PHP Manual中的示例如下:

function __autoload($class_name) {
    require_once $class_name . '.php';
}
 
$obj  = new MyClass1();
$obj2 = new MyClass2();

算是很方便的一个函数,然而有一个缺陷就是没有名称空间,大量的class不得不放在一个目录下面,才可以用这个自动加载php的魔术函数,如果class文件要放在不同的目录里面,这个自动载入就无能为力了。为了解决这个问题,自己写了一个loadClass函数实现类似功能,代码如下:

function loadClass($tgt){
	$class = substr($tgt, strrpos($tgt, '.')+1);
	require_once(DIR_APP.str_replace('.','/',$tgt).'.php');
	return new $class();
}
 
$test = loadClass("model.test");
$test->myfunc();

DIR_APP/model/test.php:

class test{
	function myfunc(){
		echo "hello, world!~";
	}
}

如此一来,就可以方便的加载在不同的目录里面的(缺点就是要打完整的”名称空间”),并且应该在PHP4中也可以使用(虽然PHP5已经是大流)……

补充@2009-02-23 22:42

就此自动载入的问题咨询了一下某飞,给了两个采用spl_autoload的自动载入的实现(by flying~):

function loader($className) {
    $classPath = str_replace('_', DIRECTORY_SEPARATOR, $className);
    require $classPath . '.php';
}
 
spl_autoload_register('loader');
 
$user = new Model_User();
// load (inlcude paths):/Model/User.php

class的名称定义遵循PEAR标准用下划线_进行分隔
更加复杂点的支持多路径的”豪华版”(by flying~):
Read the rest of this entry >>

曾经将自己出卖给撒旦,现在皈依基督,又对人文主义有浓厚兴趣的某只?

好吧,标题其实说的是我自己 – v -

为什么这么说?见内文转载吧……

那么其实我觉得自己的想法应该更加接近不可知论 – v -

Read the rest of this entry >>

WordPress加上站点地图

花了些时间整合了Blog的一些标签和tag,看上去应该干净了不少。

同时修改了一下主题,加大宽度。虽然很喜欢现在用的主题,但是却已经很古老了,里面用的一些WordPress内部函数都已经不被推荐继续采用,因此也都改为新的函数。顺便在侧栏也加上了Tag Cloud。

然后加上了一个Sitemap页面,里面是全站链接。

Sitemap的做成记录:

Read the rest of this entry >>

SimpleXML真是个好东西

这两天写一个页面需要访问一个RSS并且读取rss内的的文章标题和文章的链接,就尝试了一下PHP5的新特性也就是这个SimpleXML,直接支持xpath获取,确实很方便啊 :

$file = file_get_contents("__YOUR__RSS__URL__HERE__");
 
$xml = new SimpleXMLElement($file);
 
$titles = $xml -> xpath("/rss/channel/item/title");
$links = $xml -> xpath("/rss/channel/item/link");

然后就对$titles和$links这两个数组进行操作即可。

在jetty中使用quercus以支持PHP应用

jetty是一个开源的java web服务器,适合用来架设小型的java web环境,其官方网站:http://www.mortbay.org/jetty/

quercus是一个PHP的纯java实现(目前quercus 3.1.6对应的php版本为5.2.0 —— 来自于在quercus中运行的phpinfo(); ),是一个servlet,可以在JEE应用服务器中运行PHP的应用,其官方网站为:http://quercus.caucho.com/
它已经被包含在另外一个Java EE应用服务器 – resin的3.0.17版本之后中,如果直接采用resin,也可以直接获得运行PHP应用的支持

最近在某飞的建议下,有考虑在VPS上面将JavaEE应用服务器和跑PHP的服务器合并成为一个,于是把自己的ubuntu 8.04当作沙箱,安装了jetty + quercus的环境,大致配置步骤如下:
Read the rest of this entry >>

Page 1 of 212