新写了个“Web2.0”站点

Posted on |

最近放假刚好有点时间，帮朋友做了个图片站。因为纯兴趣所致，所以抛弃了不少以前积累的代码框架，玩了玩现在比较流行的web2.0设计。都是很简单的技术，但是的确给浏览者带来很好的体验。这里做一下小结。

php实现ajax示例

Ajax称作异步javascript和xml,具体工作原理就是利用XMLHttpRequest这个浏览器内建JS对象,把用户的操作传递到后台脚本,然后后台脚本把数据在用XML传递到这个对象中来做处理,最终显示到浏览器上.这么做的最大优点就是可以不用刷新页面,直接操纵DOM这个HTML框架来改变页面的现实,这样一方面减少了浏览器和服务器之间的数据传输(因为只需要用XML把必要的数据丢回来),当然相应的用户体验很好(因为速度快,页面也不用刷新).

相应的特点就是大幅度的使用div这个标签和css来组织页面结构,因为要操作DOM框架中的HTML元素,getElementById()这个函数估计是用得最频繁的,div既简洁又容易组织,看起来很好使.

下边写一个利用ajax进行页面交互的简单例子：

  • main.js 使用XMLHttpRequest对象来接收query.php?xxx请求丢过来的XML并解析，同时异步塞到front.html的DOM结构里边，这块是ajax的核心
  • query.php 后台脚本，由main.js中的request(url)调用，然后把一份XML丢给main.js处理
  • front.html 前端html页面，里边有一些带id的div或者其他html元素，main.js中的requestAction()将解析该html，异步显示后台脚本的请求结果

几个主要的js函数如下：

function request(url) {
    oReq = false;
    if (window.XMLHttpRequest) { // check browser
        oReq = new XMLHttpRequest();// check XML mime-type header :)
        if (oReq.overrideMimeType) {// if XML mime-type header is missing...
            oReq.overrideMimeType('text/xml');// correct it.
        }
    } else if (window.ActiveXObject) { // if IE?
        try {
            oReq = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                oReq = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }

    if (!oReq) {// init XML request
        alert('Giving up :( Cannot create an XMLHTTP instance');
        return false;
    }
    oReq.onreadystatechange = requestAction; // event handle when readyState changed.
    oReq.open('POST', url, true);
    oReq.send();
}

function requestAction() {
    if (http_request.readyState < 4) {// transforing...
        document.getElementById("loading").style.display = "";
        document.getElementById("loading").innerHTML = "Loading...";
    }else{
        document.getElementById("loading").style.display = "none";
    }
    if (http_request.readyState == 4) {// transfored.

        if (http_request.status == 200) {
            var xmlRoot = http_request.responseXML; // use XML format
            var xmlNode = xmldoc.documentElement;
            var xmlElements = xmldoc.getElementsByTagName("elem");
            var count = book.getElementsByTagName("count")[0].childNodes[0].nodeValue;

            var content="";
            for(var i=0; i < xmlelements.length();i++){
                content += getValue(xmlNode,"content",i);
            }
            document.getElementById("content").innerHTML = content;
            //...
        } else {
            alert('There was a problem with the request.');
        }
    }
}

function getValue(node,name,i){
    var value;
    if(root.getElementsByTagName(name)[i].childNodes[0]){
        value = root.getElementsByTagName(name)[i].childNodes[0].nodeValue;
    }else{
        value = '';
    }
    return value;
}

几个ajax框架

列举几个Prototype、moofx、lightbox等，其中prototype是个基础库，搭配json来处理dom，一方面简化了代码，一方面避免了一些安全问题。后者在javascript hijacking这篇文章中有称述。

几个php框架

CodeIgniter 我觉得是入门最快的一个php框架，理由它提供了俩视频讲解，呵呵。不过发觉框架只提供前端应用，后台该如何操作还没有仔细研究 :P

如何使用mod_rewrite

用完之后才发觉apache的 mod_rewrite 实在很好用，一方面你可以直接用正则式直接在.htaccess配置中搞定url解析；当然也可以使用php对字符串操作的威力，把解析url的任务交给php，这样就是分析 $_SERVER[“REQUEST_STRING”]`，这个全局变量是用来获取URL请求的。后者是从wordpress中学来的 :P

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

javascript传递url中文乱码

当需URL中传递的参数包含中文的时候，建议还是完全用UTF-8编写站点最方便，因为javascript本身就是用UTF-8来处理多字节字符的，只需要加上一个encodeURI就ok了。如果用GBK的话，当php端接收到参数的时候需要使用iconv("UTF-8","GBK",$arg)转码一下才能正确显示。可是这样转来转去，如果中间再涉及到数据库的编码，准把自己绕晕了。

使用php生成css和js

把服务器脚本和css以及js整合到一起，实在是很好用。因为当friend url的时候，常常会搞乱css和js中的一些相对路径，于是使用php脚本来动态生成它们实在很方便。唯一值得注意的是，需要给浏览器提供正确的mime type：

  • 比如css：header("Content-Type: text/css");
  • 比如javascript: header("Content-Type: application/javascript"); 或者header("Content-Type:application/x-javascript");

使用cookie交互

当涉及到表单应用的时候，cookie是一个很好的保存临时和非安全数据的办法，并且可以减轻服务器端的压力。javascript中处理cookie还不是很方便，封装两个函数会方便很多。另外，再次建议使用utf-8编码，这样在firefox或者ie或者不同语言浏览器上，会避免很多麻烦。

function setCookie(c_name,value,expiredays) {
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" +encodeURI(value)+
        ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

function getCookie(c_name) {
    if (document.cookie.length>0) {
        c_start=document.cookie.indexOf(c_name + "=");
        if (c_start!=-1) {
            c_start=c_start + c_name.length+1;
            c_end=document.cookie.indexOf(";",c_start);
            if (c_end==-1) c_end=document.cookie.length;
            return decodeURI(document.cookie.substring(c_start,c_end));
        }
    }
    return "";
}

而在php中操作cookie会方便很多，cookie也是php和js交换数据的一种方式。