Computer, Electron and Technology

CSS标准化网页布局与重构

Posted by gavinkwoe

刚刚在BLUEIDEA上看到的,到时有空就去了,哈,学习学习嘛. :)

活动时间:11月25日(星期六) 下午 14:00-15:30
活动主题:CSS标准化网页布局与重构
活动地点:中关村图书大厦(左岸公社) 五层多功能厅

主讲:李超(CSS网站布局实录作者)

这次的活动是上次网站设计专场讲座的延续,由于上次CSS网站布局实录的作者外地出差,没能参加,因此CSS部分没有讲解,这次出版社特地安排把CSS部分的活动做完,到时候会有一个半小时全部与大家一起交流CSS的内容

CSS方面的很多东西都有教程和图书,到时候应该不会太多废话,会找一些书中没有的东西,CSS的一些背景和网站设计中使用CSS的方法,思路,主要是思路,设计思路和实现思路,等一些较思考性的内容,并与大家一起交流一下,欢迎参加和拍砖~

主题

• 什么是Web标准?
• Web客户端表现层技术的起源与发展
• 表现(Design)与内容(Content)分离的页面技术
• (CSS网站布局技术)
• Web标准与用户体验(UE)设计
• 部分CSS布局案例

※什么是Web标准？
Web标准是网站开发中的一系列标准的集合。每一个标准对应网站开发中的每一个环节，如HTML用于表现信息结构，CSS用于表现信息的展示方式，Javascript用于表现信息的简单动态处理等
无论是HTML，还是XHTML，还是CSS，javascript,都是Web标准其中之一

※Web客户端表现层技术的起源与发展
Web的基本架构与主要功能
Web客户端表现技术的作用
HTML与JavaScript
Gif动画
Css技术
Quicktime、ActiveX控件
Flash

Web客户端表现层技术的作用
客户端表现层技术的最终目的
客户端表现层技术的最终目的是为用户提供最优质的信息，使用户拥有最好的用户体验(User Experience)

css技术
CSS是一种专注于对信息的视觉表现进行控制的技术。CSS的目标是用来取代HTML中的“设计”部分，使HTML专注于信息整理，而CSS来专注于信息的视觉表现
优秀的CSS与HTML设计使内容与表现完全分离，以更好的结构来展示信息，使得信息易于展现并易于修改

Quicktime、ActiveX控件
网络趋向于多媒体形式的展示、通过Quicktime、ActiveX实现在网页中的视频与音乐播放。

Flash
目前最优秀的互动表现技术、丰富用户体验
通过FLASH开发环境或编程实现与用户的实时交互
丰富的媒体支持及动画制作
是目前为品牌用户建立线上推广、为用户提供优秀交互界面的强大工具

※表现(Design)与内容(Content)分离的页面技术

表现(Design)与内容(Content)分离的页面技术
什么是表现与内容？
为什么要实现表现与内容的分离？
XHTML与CSS的协同作战
高效开发
易于维护
其它方面优势
现阶段的问题

什么是表现(Design)与内容(Content)？
内容是指具体的信息，仅仅表示信息正文及各部分的名称，如标题、作者、正文、图片
表现是指信息的展示形式，如标题使用16号黑体，正文使用12号宋体、图片采用文绕图间距10px的排列方式等

什么是表现(Design)与内容(Content)？
使用传统的HTML来表现(Design)
设计方式复杂
控制区域较多
代码繁杂易读性差

※表现与内容分离的技术
设计简单
易于控制
代码简单
易于修改

什么是表现(Design)与内容(Content)？
DIV元素的掌握是表现与内容分离的基础

为什么要实现表现与内容的分离？
分离使得网站代码可维护性提高
分离使代码重用得到可能，大幅提高开发效率
重用使得代码量可以成倍减少，减轻服务器负担使得降低宽带成本成为可能
加快浏览器解析速度使用户阅读更快捷迅速

为什么要实现表现与内容的分离？
分离技术使我们在制作网站的时候能够充分对网站统一性、可用性进行思考与设计，提高网站可用性，改善用户体验

XHTML与CSS的协同作战
推荐使用XHTML+CSS的方式来对网站进行编码
我们的应用级设计对象是用户,但代码级的设计目标是机器
使用Dreamweave MX 2004或后续版本进行可视化开发

高效开发
Macromedia.com
不同排版模式的高效重用

易于维护
Macromedia.com
良好的规划与组织是维护的关键
多个CSS协调工作、层次清晰

Macromedia.com
对信息区域的合理设计是维护的关键

其它方面优势
分离使得设计人员、程序人员更好的独立工作
分离使内容转换到其它平台的成本更低
…

现阶段的问题
浏览器对CSS支持的不完善
相同浏览器的不同版本、不同操作系统下显示不同
不同浏览器对CSS的支持是不同的

※Web标准与用户体验(UE)设计

Web标准与用户体验(UE)设计
网站与用户体验（UE）的关系
Web标准帮助我们对用户体验进行思考
用户体验的几个思考过程
案例

网站与用户体验（UE）的关系
用户体验是什么？
What is User Experneice?
网站是一个“自服务式”的产品
通过改善用户体验使网站所有者受益

Web标准
帮助我们对用户体验进行思考
Web标准设计的难点在于对网站的信息结构进行合理分配，归纳，设计
设计合理的网站层次
设计合理的导航系统
设计合理的版式结构
…

只有合理的网站信息结构的设计，才能让Web标准所支持的分离式结构有用武之地

用户体验的思考过程
与用户一起走一篇

用户体验的思考过程
与用户一起做一篇

用户体验的思考过程
让用户感受细节

※案例
2006 CSS Award Winner

※CSS玩家交流

—–
PING:
BLOG NAME: 打包机
TITLE: 打包机2
IP: 221.0.56.225
URL: http://www.jnxrbz.com/212.htm
DATE: 05/19/2007 20:42:56
文章好,已被打包机用
—–
PING:
BLOG NAME: 升降机液压升降机升降平台
TITLE: 升降机液压升降机
IP: 60.208.187.18
URL: http://www.jiyangheli.com/products.htm
DATE: 05/20/2007 22:30:14
文章好,已被升降机/升降平台/液压升降机引用
—–
PING:
BLOG NAME: 灌装机
TITLE: 1灌装机
IP: 60.208.192.45
URL: http://www.jnxrbz.com/204.htm
DATE: 05/24/2007 03:19:13
好,已被灌装机引用
—–

PHP & memcached

Posted by gavinkwoe

一、memcached 简介

在很多场合，我们都会听到 memcached 这个名字，但很多同学只是听过，并没有用过或实际了解过，只知道它是一个很不错的东东。这里简单介绍一下，memcached 是高效、快速的分布式内存对象缓存系统，主要用于加速 WEB 动态应用程序。

二、memcached 安装

首先是下载 memcached 了，目前最新版本是 1.1.12，直接从官方网站即可下载到 memcached-1.1.12.tar.gz。除此之外，memcached 用到了 libevent，我下载的是 libevent-1.1a.tar.gz。

接下来是分别将 libevent-1.1a.tar.gz 和 memcached-1.1.12.tar.gz 解开包、编译、安装：

# tar -xzf libevent-1.1a.tar.gz# cd libevent-1.1a# ./configure --prefix=/usr# make# make install# cd ..# tar -xzf memcached-1.1.12.tar.gz# cd memcached-1.1.12# ./configure --prefix=/usr# make# make install

安装完成之后，memcached 应该在 /usr/bin/memcached。

三、运行 memcached 守护程序

运行 memcached 守护程序很简单，只需一个命令行即可，不需要修改任何配置文件（也没有配置文件给你修改）：

/usr/bin/memcached -d -m 128 -l 192.168.1.1 -p 11211 -u httpd

参数解释：

-d 以守护程序（daemon）方式运行 memcached；-m 设置 memcached 可以使用的内存大小，单位为 M；-l 设置监听的 IP 地址，如果是本机的话，通常可以不设置此参数；-p 设置监听的端口，默认为 11211，所以也可以不设置此参数；-u 指定用户，如果当前为 root 的话，需要使用此参数指定用户。

当然，还有其它参数可以用，man memcached 一下就可以看到了。

四、memcached 的工作原理

首先 memcached 是以守护程序方式运行于一个或多个服务器中，随时接受客户端的连接操作，客户端可以由各种语言编写，目前已知的客户端 API 包括 Perl/PHP/Python/Ruby/Java/C#/C 等等。PHP 等客户端在与 memcached 服务建立连接之后，接下来的事情就是存取对象了，每个被存取的对象都有一个唯一的标识符 key，存取操作均通过这个 key 进行，保存到 memcached 中的对象实际上是放置内存中的，并不是保存在 cache 文件中的，这也是为什么 memcached 能够如此高效快速的原因。注意，这些对象并不是持久的，服务停止之后，里边的数据就会丢失。

三、PHP 如何作为 memcached 客户端

有两种方法可以使 PHP 作为 memcached 客户端，调用 memcached 的服务进行对象存取操作。

第一种，PHP 有一个叫做 memcache 的扩展，Linux 下编译时需要带上 –enable-memcache[=DIR] 选项，Window 下则在 php.ini 中去掉 php_memcache.dll 前边的注释符，使其可用。

除此之外，还有一种方法，可以避开扩展、重新编译所带来的麻烦，那就是直接使用 php-memcached-client。

本文选用第二种方式，虽然效率会比扩展库稍差一些，但问题不大。

四、PHP memcached 应用示例

首先下载 memcached-client.php，在下载了 memcached-client.php 之后，就可以通过这个文件中的类“memcached”对 memcached 服务进行操作了。其实代码调用非常简单，主要会用到的方法有 add()、get()、replace() 和 delete()，方法说明如下：

add ($key, $val, $exp = 0)
往 memcached 中写入对象，$key 是对象的唯一标识符，$val 是写入的对象数据，$exp 为过期时间，单位为秒，默认为不限时间；

get ($key)
从 memcached 中获取对象数据，通过对象的唯一标识符 $key 获取；

replace ($key, $value, $exp=0)
使用 $value 替换 memcached 中标识符为 $key 的对象内容，参数与 add() 方法一样，只有 $key 对象存在的情况下才会起作用；

delete ($key, $time = 0)
删除 memcached 中标识符为 $key 的对象，$time 为可选参数，表示删除之前需要等待多长时间。

下面是一段简单的测试代码，代码中对标识符为 ‘mykey’ 的对象数据进行存取操作：

<pre><?php//  包含 memcached 类文件require_once(‘memcached-client.php’);//  选项设置$options = array(    ’servers’ => array(‘192.168.1.1:11211′), //memcached 服务的地址、端口，可用多个数组元素表示多个 memcached 服务    ‘debug’ => true,  //是否打开 debug    ‘compress_threshold’ => 10240,  //超过多少字节的数据时进行压缩    ‘persistant’ => false  //是否使用持久连接    );//  创建 memcached 对象实例$mc = new memcached($options);//  设置此脚本使用的唯一标识符$key = ‘mykey’;//  往 memcached 中写入对象$mc->add($key, ’some random strings’);$val = $mc->get($key);echo “n”.str_pad(‘$mc->add() ’, 60, ‘_’).“n”;var_dump($val);//  替换已写入的对象数据值$mc->replace($key, array(’some’=>‘haha’, ‘array’=>‘xxx’));$val = $mc->get($key);echo “n”.str_pad(‘$mc->replace() ’, 60, ‘_’).“n”;var_dump($val);//  删除 memcached 中的对象$mc->delete($key);$val = $mc->get($key);echo “n”.str_pad(‘$mc->delete() ’, 60, ‘_’).“n”;var_dump($val);?></pre>

是不是很简单，在实际应用中，通常会把数据库查询的结果集保存到 memcached 中，下次访问时直接从 memcached 中获取，而不再做数据库查询操作，这样可以在很大程度上减轻数据库的负担。通常会将 SQL 语句 md5() 之后的值作为唯一标识符 key。下边是一个利用 memcached 来缓存数据库查询结果集的示例（此代码片段紧接上边的示例代码）：

<?php$sql = ‘SELECT * FROM users’;$key = md5($sql);   //memcached 对象标识符if ( !($datas = $mc->get($key)) ) {    //  在 memcached 中未获取到缓存数据，则使用数据库查询获取记录集。    echo “n”.str_pad(‘Read datas from MySQL.’, 60, ‘_’).“n”;    $conn = mysql_connect(‘localhost’, ‘test’, ‘test’);    mysql_select_db(‘test’);    $result = mysql_query($sql);    while ($row = mysql_fetch_object($result))        $datas[] = $row;    //  将数据库中获取到的结果集数据保存到 memcached 中，以供下次访问时使用。    $mc->add($key, $datas);} else {    echo “n”.str_pad(‘Read datas from memcached.’, 60, ‘_’).“n”;}var_dump($datas);?>

可以看出，使用 memcached 之后，可以减少数据库连接、查询操作，数据库负载下来了，脚本的运行速度也提高了。

之前我曾经写过一篇名为《PHP 实现多服务器共享 SESSION 数据》文章，文中的 SESSION 是使用数据库保存的，在并发访问量大的时候，服务器的负载会很大，经常会超出 MySQL 最大连接数，利用 memcached，我们可以很好地解决这个问题，工作原理如下：

用户访问网页时，查看 memcached 中是否有当前用户的 SESSION 数据，使用 session_id() 作为唯一标识符；如果数据存在，则直接返回，如果不存在，再进行数据库连接，获取 SESSION 数据，并将此数据保存到 memcached 中，供下次使用；
当前的 PHP 运行结束（或使用了 session_write_close()）时，会调用 My_Sess::write() 方法，将数据写入数据库，这样的话，每次仍然会有数据库操作，对于这个方法，也需要进行优化。使用一个全局变量，记录用户进入页面时的 SESSION 数据，然后在 write() 方法内比较此数据与想要写入的 SESSION 数据是否相同，不同才进行数据库连接、写入数据库，同时将 memcached 中对应的对象删除，如果相同的话，则表示 SESSION 数据未改变，那么就可以不做任何操作，直接返回了；
那么用户 SESSION 过期时间怎么解决呢？记得 memcached 的 add() 方法有个过期时间参数 $exp 吗？把这个参数值设置成小于 SESSION 最大存活时间即可。另外别忘了给那些一直在线的用户延续 SESSION 时长，这个可以在 write() 方法中解决，通过判断时间，符合条件则更新数据库数据。

五、相关资源

肖理达 (KrazyNio AT hotmail.com), 2006.04. 06, 转载请注明出处

转载自:http://nio.infor96.com/php-memcached/

如何在 PHP4 上应用 SimpleXML 扩展

Posted by gavinkwoe

因为工作需要,对 XML 操作采用了 PHP5 里面的 SimpleXML 扩展,但是在准备上线前了解到前端服务器暂时无法升级到 PHP5 那因就需要在小范围内修改,以便程序支持 PHP4 所以在 GG 上搜到了这个 Parser 类,很不错,和 SimpleXML 很像,只做少量修改就可以使原程序支持 PHP4.看一下他的 Demo 大家就应该会使用了. http://www.phppal.com/xml/doc.php

Tim Bray 又有惊人之语：PHP比Java更具有伸缩性

Posted by gavinkwoe

在 CSDN 上看到的,原文在Tim bray的blog ：comparison intrinsic qualities of Java, Rails, and PHP 中（http://www.tbray.org/ongoing/When/200x/2006/11/10/Comparing-Frameworks）

Tim首先明确了它这个观点的适用的范围：Web应用程序。对于那些基于浏览器的，从数据库显示一些信息，然后能够更新数据库的这种应用程序。

1 伸缩性

Java 开发了EBay ，而 PHP 开发了 Wikipedia 和 Yahoo! Finance. 它们的伸缩性都足够好。

2 开发速度

3 工具支持

Java是最大的赢家，Rails有TextMate，PHP有Zend

4 可维护性

一个好的应用程序需要面向对象，MVC架构，代码可读，代码的数量越少越好。

Tim认为这是PHP的痛脚，虽然PHP完全可以写出上面的代码，但是PHPer通常不这么做。大多数PHP程序是意大利面式的代码裹着意大利面式的SQL和意大利面式的HTML。（笑死人了）

Tim最后说，不要问它PHP，Rails,Java那个好，它依赖于你对项目进行的选择。最近几年PHP和Rails教会了我们开发的速度是多么的重要。在一切的开发中，维护才是最重要的。

InfoQ对Tim进行了访问：

InfoQ: 为什么Rails比Java更具有可维护性?

主要是因为代码少。事实是Ruby强制使用MVC模式，其模板机制和ORM，以及测试和程序代码耦合的太紧密了。请记住，我们到现在还搞不清，Rails对于那些不适用于CRUD形式的程序到底有什么用。

InfoQ: 为什么PHP比Java更具有伸缩性？

不是这个意思，而是在web应用领域，它易于伸缩（没有中间件或服务要共享）。

InfoQ: 那一种特性在你的比较中最为重要？

可维护性。

Tim 继续在其blog中解释了可维护性：

在这个疯狂的Web2.0的世界里，能够快速的构建系统非常重要。面对投资和开发需求，你要在最短的时间交付系统。但是真正做过企业开发的聪明的程序员和经理们都知道。开发最大的成本是从你产品交付的那一刻，才刚刚开始。

JavaScript 加载 XML 文件二 (For Mozilla and IE)

Posted by dengwei

In my article, "Read and Display Server-Side XML with JavaScript", I discussed the manipulation of XML files using JavaScript in Microsoft Internet Explorer. In this article, I’ll explain how to read and use XML file data using JavaScript in Mozilla. We will see how to display tag values, tag attribute values, and more.

Henceforth, I won’t explicitly mention Mozilla in this article, because we will be dealing with Mozilla only, which includes Netscape 6.x, 7.x. I’ll let you know specifically when I’m referring to Microsoft Internet Explorer (MSIE, or simply IE), however.

The Sample XML File

I’ll use the same XML file that I used in my last article, so it’s easier for those who have already dealt with that file to understand. Consider the following XML file:

<?xml version="1.0" ?> <company> <employee id="001" sex="M" age="20">Premshree Pillai</employee> <employee id="002" sex="M" age="24">Kumar Singh</employee> <employee id="003" sex="M" age="21">Ranjit Kapoor</employee> <turnover> <year id="2000">100,000</year> <year id="2001">140,000</year> <year id="2002">200,000</year> </turnover> </company>

As you can see, the above XML file shows a company’s employees’ details, with the name as the tag <employee>’s main (or node) value; other details such as an employee’s id, sex and age are given as attributes id, sex and age within the same tag. The file also shows the company’s turnover, with the turnover figure as the tag <turnover>’s node value, and the year as an attribute year within the same tag.

In the sections that follow, we’ll manipulate the above XML file, so that it makes sense to us.

XML and JavaScript

Before we actually get into reading and further manipulating the XML file, it’s important to know whether the visitor is using Mozilla or some other browser.

Test for Mozilla

Obviously, you will not be coding your XML-based JavaScript application for one particular browser, when you can so easily extend support for other browsers. Yet, the way you code your application will depend on which browser the visitor is using.

To test for Mozilla, we can use a simple variable as follows:

var moz = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != ‘undefined’);

The above variable can be used as a boolean variable:

if(moz) { // Mozilla!! } else { // Something else… }

Load the XML File

Once we’ve identified the browser, it’s time to load the XML file:

var xmlDoc=document.implementation.createDocument("", "doc", null) xmlDoc.load("someXMLFile.xml"); xmlDoc.onload = someProcessingFunction;

The first line in the above code creates an instance of the xmlDoc object; the second line loads the XML file we want (someXMLFile.xml, in this case); the third line is used to further process, or manipulate, the XML file we’ve just loaded.

Now, it would be better to create a different function to load the XML file:

var xmlDoc; function importXML(file) { xmlDoc=document.implementation.createDocument("", "doc", null) xmlDoc.load(file); xmlDoc.onload = readXML; }

Most of the manipulation techniques used for Mozilla will also work with IE. However, the XML file is loaded differently in each, so let’s look at a function that will load an XML file in Mozilla as well as IE:


var xmlDoc; 
function importXML(file) { 
 var xmlDoc; 
 var moz = (typeof document.implementation != ‘undefined’) && (typeof 
document.implementation.createDocument != ‘undefined’); 
 var ie = (typeof window.ActiveXObject != ‘undefined’); 

 if (moz) { 
   xmlDoc = document.implementation.createDocument("", "", null) 
   xmlDoc.onload = readXML; 
 } else if (ie) { 
   xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); 
   xmlDoc.async = false; 
   while(xmlDoc.readyState != 4) {}; 
 } 
 xmlDoc.load(file); 
}
The above function can be used to load an XML file for both Mozilla and IE. Now, to load a XML file, the function must be called as: 
importXML("YourXMLFile.xml");
Note that the variable ie is used to test for IE. IE uses an ActiveX Object to load an XML file using the Microsoft.XMLDOM object. In the following section, we’ll explore a few methods we can use to access the XML file data. 
getElementsByTagName()
The getElementsByTagName method is the most commonly used method available in the XML DOM (Document Object Model) object. As the function’s name suggests, this function returns all the elements (or tags) with the given name within the specified element. Basically, it returns an object collection. For example:
var xmlFile = xmlDoc.getElementsByTagName("company");
In the above code, an object collection containing all the <company> elements in the document is stored in the variable xmlFile. Note that the argument you pass to getElementsByTagName() is case-sensitive, i.e. getElementsByTagName("company") is different from getElementsByTagName("ComPanY"). 



Find the Number of Elements of a Tag
In the XML file illustrated at the beginning of this article, we see exactly one <company> tag. The object collection returned by getElementsByTagName() has a length method that gives the number of elements in the collection. For example, to find the number of <company> tags, the following code is used: 
var noOfCompanyTags = xmlDoc.getElementsByTagName("company").length;
Displaying the variable noOfCompanyTags using document.write() will display 1. 
Display the Content of a Tag

Again referring to the XML file, suppose we want to display the name of the first employee. Now, the <employee> tag is within the <company> tag; so, first we need to get the collection of all the <company> tags, and through this tag get a collection of all <employee> tags. Let’s take a look at how to display the name step by step: 
var companies = xmlDoc.getElementsByTagName("company");
The above code returns an object collection for the <company> tag to the companies variable. Note that companies is an array. 
var employees = companies[0].getElementsByTagName("employee");
The above code returns an object collection for the <employee> tag to the employees variable, again in an array. Note the index used in the company variable; this is used because we need to access only the first element of the array. There may only be one <company> tag, but it’s still an array, so we use the index 0 to get the element. 
To display the name of the first employee, we use the following code: 
document.write(employees[0].firstChild.nodeValue);
The above code will display Premshree Pillai. As is clear, employees is a 3-element array. So, to display the name of the second employee, the code would be:
document.write(employees[1].firstChild.nodeValue);
The above code will display Kumar Singh. All the above steps we used to display the employee name (Premshree Pillai) can be integrated into a single code snippet as follows: 
document.write(xmlDoc.getElementsByTagName("company")[0].getElementsByTagName("employee")[0] 
.firstChild.nodeValue);

Access Tag Attributes

Storing information in XML files in the form of attributes is very common. Consequently, it is important that we are able to access attributes in XML files. In our example XML file, we have stored various employee details, including id, sex, and age, in the <employee> tag. To extract the age of the first employee, we could use the following code: 
document.write(employees[0].getAttribute("age"));
The above code will output 20. The code used the getAttribute() method on the employees[0] object. Alternatively, we could use the following code to obtain the same result: 
document.write(xmlDoc.getElementsByTagName("company")[0].getElementsByTagName("employee")[0] 
.getAttribute("age"));
Now, suppose you want to display the details of all employees (id, sex, age) in a tabular form. To do this, we must loop through all the <employee> tags. Following is the entire code to do this (excluding the code that loads the file): 
var companies=xmlDoc.getElementsByTagName("company"); 
var employees=companies[0].getElementsByTagName("employee"); 
document.write(’<table border="1">’); 
document.write(’<tr><th>id</th><th>Sex</th><th>Age</th></tr>’); 
for(var i=0; i<employees.length; i++) { 
 document.write(’<tr>’); 
 document.write(’<td>’ + employees[i].getAttribute("id") + ‘</td>’); 
 document.write(’<td>’ + employees[i].getAttribute("sex") + ‘</td>’); 
 document.write(’<td>’ + employees[i].getAttribute("age") + ‘</td>’); 
 document.write(’</tr>’); 
} 
document.write(’<table>’);
The output of the above code in Mozilla looks like this: 




Is it Possible to Write to an XML File?
No, it’s not possible to write to an XML file using client-side JavaScript. You can manipulate all the contents of an external XML file and use it for display purposes in your client-side JavaScript application, but it is not possible, for instance, to take input from the user, and make changes to the XML file using JavaScript. 
Conclusion
We now know how to test for Mozilla, load an XML document using JavaScript, and manipulate the contents of an XML file using JavaScript in Mozilla. Using XML and client-side JavaScript, several simple applications can be created: 

you could use XML files to store small databases, then use JavaScript to display the data according to your needs 
you could create something like a news “ticker”, where you store the news items in a XML file and your JavaScript reads the contents of the file and ticks the news items on the screen 

 
These are just a few examples where XML and client-side JavaScript could be used. I hope this article has given you an introductory idea of using XML and client-side JavaScript in Mozilla.

Javascript 加载本地 XML 文件

Posted by dengwei

之前自己写的两个小函数.

* @file : localxml.js
* @date : 2006-05-09
* @auth : dengwei

*/

// 查找对象
function findobj(s)
{
return document.getElementById(s);
}

this.async(false);

  try
  {
   oDoc.load(sFilename);
  }
  catch (e)
  {
   // no such file
   return;
  }
}

this.getNode = function(sXpath)
{
  var iRetval = "";
  var iValue = oDoc.selectSingleNode(sXpath);

  if (iValue)
  {
   iRetval = iValue.text;
  }
  return iRetval;
}

this.selectNodes = function(sXpath)
{
  return oDoc.selectNodes(sXpath);
}

this.readyState = function()
{
  return oDoc.readyState;
}

this.loaded = function()
{
  if( this.readyState() == 4 )
  {
   return true;
  }
  return false;
}

this.onchange = function(sFunction)
{
  oDoc.onreadystatechange = eval(sFunction);
}

this.async = function(bType)
{
  oDoc.async = bType
}
}

MP4 改版

Posted by dengwei

我们组之前做的 MP4 要改版了,自己赶紧抓了张图.

scriptaculous学习笔记

Posted by dengwei

scriptaculous学习笔记(三)

Slider滑动杆
滑动杆是通过两个Div嵌套而成的。一个是滑动槽，一个是滑动杆。将这两个div注册为滑动杆就可以了。

</div>

new Control.Slider(’handle1′,’track1′,{

sliderValue:0.5,

onSlide:function(v){$(’debug1′).innerHTML=’slide: ‘+v},

onChange:function(v){$(’debug1′).innerHTML=’changed! ‘+v}});

</script>

程序通过new Control.Slider( )来注册滑动杆。第一个id是滑动杆，可以以[‘id1’,’id2’,…]的方式来注册多个滑动杆

第二个id是滑动槽。

后面花括号{}中的参数：

sliderValue:滑动杆初始值,当有多个滑动杆的时候，用 [v1,v2,…]的方式指定多个缺省值

range: $R(2,15) 滑动槽的值的上下限范围。默认是0~1

axis: ‘vertical’, 可以获得一个上下拖动的滑动杆.缺省为水平.

restricted:true, 多个滑杆时,初始值大的滑杆与初始值小的滑杆不能互相倒置大小.

values: [1,2,3…] 滑动槽的多个预设值。滑杆只能滑动到其中的某个值。

onSlide:function(v) 事件：滑动时触发。V是滑杆当前值。

onChange:function(v) 事件：值改变时触发。V是滑杆当前值。

滑杆区域：(多个滑杆之间围成的上下界区域)

spans:['span7-1','span7-2'],

startSpan:’span7-start’,

endSpan:’span7-end’,

这个地方还没有仔细看，不是非常明白。

注意：当存在多个滑杆时,滑动槽设为relative,滑动杆应设为display:absolute;left:0 ;top:0;

scriptaculous学习笔记(二)

Effect效果对象
下拉效果&上拉效果

aaaaaaa<p>bbbbbbbbbbbbbbbbb<p>ccccccccccccc<p>

</div>

<a href="#" onclick="Effect.BlindDown(’d1′,{});; return false;">BlindDown()</a>

<p>

<a href="#" onclick="Effect.BlindUp(’d1′,{});; return false;">BlindUp()</a>

Effect.BlindDown(’d1′,{})函数的花括号里面{}可以跟参数：

duration:1.0; 这个数字表示动作持续时间。

delay: 0.5 延迟0.5秒再启动效果

如果想让一个Div开始的时候隐藏，点击下拉的时候才拉下，那么只需要将此Div的属性设为：display: none

上滚&下滚效果
这一组函数:

Effect.SlideUp(’d1′,{});

Effect.SlideDown(’d1′,{});

这组函数效果与Blind那一组基本一样，效果粗看起来差不多……我也是细心比较才发现的。原来Blind这一对内容是不会随着上拉或下拉而动的。而Slide中的内容会被拉上或拉下。

变色闪动效果
Effect.Highlight(’d1′,{duration:1.5})

此元素将会改变几次颜色并最终返回原来的颜色。

渐变显示效果
Effect.Appear(‘d1’,{})

原来的元素初始CSS为display:none,用此效果后渐渐显示，渐变的alpha滤镜效果。

膨胀消失效果
Effect.Puff(‘d1’,{})

消失后可以使用Element.show(’d1′) 再次将元素显示出来。

渐渐消失效果
Effect.Fade(’d1′)

渐渐显示效果
Effect.Appear(’test_img’)

震动效果
Effect.Shake(‘d1’,{})

此元素将会左右震动

闪烁效果
Effect.Pulsate(’d1′,{})

此函数通过alpha滤镜来进行闪烁。

长大效果
Effect.Grow("d1",

{duration:5.0, direction: ‘bottom-right’, opacityTransition: Effect.Transitions.linear});

其中:direction 是指的元素从什么方向进入。

如果不指定后面的参数，元素缺省是从下面的中间开始变大。没有alpha效果。

萎缩效果
Effect.Shrink(“d1”,{})

长大效果Grow()的相反效果。

Toggle各种效果
汉语里面不知道怎么翻译Toggle，大体意思是：当某物打开的时候触发就关闭，而关闭的时候触发就打开的一种像”乒乓开关”的行为。这种行为在做页面时特别有用。

Effect.toggle(’d2′,’BLIND’)

Effect.toggle(’d2′,’appear’)

Effect.toggle(’d2′,’slide’)

…

似乎所有这种有着相反效果的函数都可以在这里设置Toggle, ’BLIND’中的效果名大小写不敏感。

取消效果函数
这几个函数真是乏善可陈……唯一要提的就是关于中止这几个动画过程的函数：cancel()

例如：

effect1=new Effect.SlideUp(‘d1’,{duration:10.0});

想要在这10秒钟中止动画过程： effect1.cancel()

效果队列
这个神秘的queue属性，还有待进一步学习……

function startTimeline() {

// 3x highlight in front

for(var i=0; i<3; i++)

new Effect.Highlight(’d3′, { duration: 1.0, queue: ‘front’ });

// insert scale at very beginning

new Effect.Scale(’d1′, 75, { scaleContent: true, duration: 1.0, queue: ‘front’ });

// parallel implied, delay 0.5 sec

new Effect.Highlight(’d1′, { delay: 0.5 });

// puff at end

new Effect.Puff(’d2′, { duration: 4.0, queue: ‘end’ });

}

scriptaculous学习笔记(一)

这两篇文章是我昨天一天的成果。scriptaculous真的是一个很好的类库，不过国内的资料似乎很少(起码我没有搜索到)，正好是在学习这个咚咚，写个笔记来记录一下吧。
准备
包含库文件：

可排序对象
例子：
以下代码将创建一个列表，并且可以拖动排序，每次移动户都将触发一个可以返回列表顺序的函数，并且已经序列化，可以通过Ajax传给服务器端。

//建立列表：

</ul>

//开始建立可排序组件

// <![CDATA[

Sortable.create('x',

{overlap:'horizontal',

ghosting:true,

constraint:false,

onUpdate:function(sortable){alert(Sortable.serialize(sortable))},

onChange:function(element){$('state').innerHTML = Sortable.serialize(element.parentNode)}

});

这样一个可以排序的列表就作好啦~~恭喜~!

讲解：

其中，Sortable.create()的作用是将这个id=”x”的<UL>转化为可排序控件。第一个参数’x’便是此控件的ID。花括号{ }内的属性列表是一些预置属性和各种动作的触发函数：

各个属性的意义：

l overlap : horizontal | vertical指明了列表是水平方向还是垂直方向排列。(在constraint属性中会和此属性有关)

l ghosting: true | false这个属性指明了拖动行时是否会在原来位置显示虚影占位。

l constraint: 'vertical' | 'horizontal' | false 这个属性指明了是否会被约束拖动方向。

l onUpdate:function(sortable){} ：update事件将会在完成一次排序行为时(拖动后鼠标松开时)被触发。”sortable”参数中将会传入被绑定的<UL>对象。

l onChange:function(element){} ：此事件将会在鼠标拖动时被触发，每移动一下都将触发此事件。注意：此事件传入的element参数是<UL>下被拖动的<LI>而非整个<UL>

构造函数中的参数列表:

参数名初始值说明

element: element

tag: 'li', // assumes li children,标签内可被拖动的子标签名

dropOnEmpty: false, ??

tree: false, // fixme: unimplemented ??

overlap: 'vertical', // one of 'vertical', 'horizontal'

constraint: 'vertical', // one of 'vertical', 'horizontal', false

handle: false, // or a CSS class ,CSS样式是此handle指定样式的标签部分可拖动如为false则整体可拖.

only: false, ???

hoverclass: null, //被拖入位置的CSS

ghosting: false, //显示残影占位

format: null, //???

onChange: Prototype.emptyFunction,

onUpdate: Prototype.emptyFunction

dropOnEmpty: true //or false 指定此<UL>等可排序区域可否接受其他<UL>中的元素

containment: ["list1","list2"] 当dropOnEmpty设为true,在此参数中设置可接受的列表id

除了构造函数,其余的常用方法：

l Sortable.serialize(sortable) 静态方法。返回一个当前sortable对象的按照排序顺序先后排列序号的字符串：如x[]=1& x[]=2& x[]=3，每一个<Li>的序号通过<li id="item_1">1</li>的下滑线后面的数字指定。下滑线前面的单词在一组排序中应使用一个相同的前缀。不同的组，前缀应该不同。

l Sortable .destroy(sortable) 静态方法。撤销此对象的排序属性。

常见问题:
当我们给<UL>外面加上DIV，比如<div style=”overflow-y:scroll;height:100px;”>

我们会发现页面一团糟了，UL溢出了DIV, 页面乱七八糟。

不用急，在Div的Style中加入 “position:relative;”就解决了<UL>不听指挥的问题。

现在再用一下，拖动有点问题……我们会发现定位不准确了，这是因为没有考虑到滚动条的偏移量。

我们在Sortable的构造函数前加上一句：

Position.includeScrollOffsets = true;

此问题便会迎刃而解~~！哈。

解决 AJAX 跨域方案二(Rewrite)

Posted by dengwei

AJAX的跨域问题，一直是一个另广大程序员深为头痛的问题，虽然解决的方法很多，但是，都不太理想。
比如PHP里面，可以用file_get_contents类似的函数，将远程页面的HTML代码取回来，再交给AJAX来处理。但此类通过服务器中转的方法，效率上，实在是不敢恭维，对服务器也会造成比较大的压力。
最近在看Apache相关的模块介绍的时候，发现了一个好东东，实验了一下，还真的似乎能解决这个问题，就是使用Apache自带的2个Mod，完成代理服务这个艰巨的使命。这样，完全可以骗过JavaScript，爽啊。
首先你要启用这2个模块，需要在httpd.conf文件中，去掉这2个模块前面的注释符号。

程序代码

LoadModule rewrite_module modules/mod_rewrite.so
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

然后，需要添加Rewrite规则，比如:

程序代码

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^/proxy/(.*)$ http://$1 [P,L]
</IfModule>

需要日志的话，可以加上:

程序代码

RewriteLogLevel 9
RewriteLog logs/rewrite.log

好了，现在试试http://localhost/proxy/www.163.com看看，嘿嘿！

解决 AJAX 跨域方案一(PHP Proxy)

Posted by dengwei

在工作中需要用到 AJAX 跨域技术，并且在各个外部服务器上修改 httpd.conf 代价太大，所以先用 PHP Proxy 来解决。以下是 Yahoo! 的解决方法。

Why You Need a Proxy

All modern web browsers impose a security restriction on network connections, which includes calls to XMLHttpRequest. This restriction prevents a script or application from making a connection to any web server other than the one the web page originally came from (Internet Explorer will allow cross-domain requests if the option has been enabled in the preferences). If both your web application and the XML data that application uses come directly from the same server, then you do not run into this restriction.

If, however, you serve your web application from one web server and you make web service data requests to another server — for example, to the Yahoo! Web Services — then the browser prevents the connection from being opened at all. Bummer.

There are a number of solutions to this problem but the most commonly-used one is to install a proxy on your web server. Instead of making your XMLHttpRequest calls directly to the web service, you make your calls to your web server proxy. The proxy then passes the call onto the web service and in return passes the data back to your client application. Because the connection is made to your server, and the data comes back from your server, the browser has nothing to complain about.

For security reasons it’s a good idea for any proxy you install on your web server should be limited in use. An open proxy that passes on connections to any web site URL is open to abuse. Although it is difficult to limit the connections to your proxy from only your application, you can prevent the proxy from making connections to servers other than those you specify. Hard code the URL to connect to in the proxy itself or provide limited options. This makes the proxy less open and less useful to users other than your client application.

PHP Proxy for Yahoo! Web Services

For the Yahoo! Developer Network JavaScript Developer Center we have provided sample code for a simple web proxy, written in PHP, that takes requests for the Yahoo! Search APIs. You can install this proxy on your own web server in any convenient location (your web server must be set up to run PHP).

The proxy encodes the Yahoo! Web services site URL in a global variable called HOSTNAME. ou will need to modify this variable to refer to the Yahoo! Web Services API you’ll be using. This is the domain used by the Yahoo! Search web services; other domains include Yahoo! Local (http://api.local.yahoo.com) and Yahoo! Travel (http://api.travel.yahoo.com).

define ('HOSTNAME', 'http://api.search.yahoo.com/');

To use the PHP web proxy in your client application, the URL for the request in the JavaScript code includes the path for the Yahoo! Web Services request, minus the domain name. The domain name is added by the proxy itself on the server side. This code snippet comes from a more complete XMLHttpRequest code sample on our JavaScript Developer Center.

// The web services request minus the domain name var path = ‘VideoSearchService/V1/videoSearch?appid=YahooDemo&query=madonna&results=2′;

// The full path to the PHP proxy var url = ‘http://localhost/php_proxy_simple.php?yws_path=’ + encodeURIComponent(path); … // core xmlhttp code xmlhttp.open(’GET’, url, true);

Note that although this example uses an HTTP GET request, the sample PHP web proxy also supports POST.

You could modify the proxy to do post-processing of the data you get from the request on the server side, for example, to strip out only the elements you’re interested in or the parse the XML into a format you can more comfortably handle in JavaScript.

For More Information

For more information on JavaScript, XMLHttpRequest, Yahoo! Web Services APIs and other JavaScript development topics, see The Yahoo! Developer Network JavaScript Developer Center.

« Previous Entries Next Entries »

Computer, Electron and Technology

Search Box

Buzz

Categories

Meta

Blogroll

RSS Feed

Popular Tags

CSS标准化网页布局与重构

PHP & memcached

如何在 PHP4 上应用 SimpleXML 扩展

Tim Bray 又有惊人之语：PHP比Java更具有伸缩性

JavaScript 加载 XML 文件二 (For Mozilla and IE)

The Sample XML File

XML and JavaScript

Conclusion

Javascript 加载本地 XML 文件

MP4 改版

scriptaculous学习笔记

解决 AJAX 跨域方案二(Rewrite)

解决 AJAX 跨域方案一(PHP Proxy)

Why You Need a Proxy

PHP Proxy for Yahoo! Web Services

Other Solutions

For More Information

Latest Post

Monthly Archives

Recent comments