无风的港湾

Ajax技术的实现主要依赖于xmlhttprequest，但我们在调用其来进行异步数据的传输时，由于xmlhttp是个短线过程（处理事件完成后就销毁）如果不对该对象进行包装处理的话，就不得不在需要调用的地方重新构建xmlhttprequest，每次调用都要写一大段的代码，实在不是个好办法。好在现在很多开源的ajax框架都提供了对xmlhttp封装的方案。这里以ajaxtags自带的prototype-1.4.0.js为母版，来看看如何将xmlhttp对象封装成一个可复用的方法。

在prototype.js中，首先定义了一个变量：Ajax
var Ajax = {
getTransport: function() {
return Try.these(
function() {return new ActiveXObject(‘Msxml2.XMLHTTP’)},
function() {return new ActiveXObject(‘Microsoft.XMLHTTP’)},
function() {return new XMLHttpRequest()}
) || false;
},

activeRequestCount: 0
}

变量返回了一个xmlhttprequest，可以看到，如果我们调用了Ajax.getTransport()，每次都会返回一个新的xmlhttprequest对象。
(更多…)

标签Tags：ajax, code, div, html, JavaScript&Ajax, js, url, xml, xmlhttp, 中文, 人, 代码, 初始值, 区别, 对象, 属性, 数据, 方法, 网络编程, 获取, 表单, 诫, 错误, 页面

onactivate 当对象设置为活动元素时触发。
onbeforeactivate 对象要被设置为当前元素前立即触发。
onbeforecut 当选中区从文档中删除之前在源对象触发。
onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即触发。
onbeforeeditfocus 在包含于可编辑元素内的对象进入用户界面激活状态前或可编辑容器变成控件选中区前触发。
onbeforepaste 在选中区从系统剪贴板粘贴到文档前在目标对象上触发。
onclick 在用户用鼠标左键单击对象时触发。
oncontextmenu 在用户使用鼠标右键单击客户区打开上下文菜单时触发。
oncontrolselect 当用户将要对该对象制作一个控件选中区时触发。
oncut 当对象或选中区从文档中删除并添加到系统剪贴板上时在源元素上触发。
ondblclick 当用户双击对象时触发。
ondeactivate 当 activeElement 从当前对象变为父文档其它对象时触发。
ondrag 当进行拖曳操作时在源对象上持续触发。
ondragend 当用户在拖曳操作结束后释放鼠标时在源对象上触发。
ondragenter 当用户拖曳对象到一个合法拖曳目标时在目标元素上触发。
ondragleave 当用户在拖曳操作过程中将鼠标移出合法拖曳目标时在目标对象上触发。
ondragover 当用户拖曳对象划过合法拖曳目标时持续在目标元素上触发。
ondragstart 当用户开始拖曳文本选中区或选中对象时在源对象上触发。
ondrop 当鼠标按钮在拖曳操作过程中释放时在目标对象上触发。
onfocusin 当元素将要被设置为焦点之前触发。
onfocusout 在移动焦点到其它元素之后立即触发于当前拥有焦点的元素上触发。
onhelp 当用户在浏览器为当前窗口时按 F1 键时触发。
onkeydown 当用户按下键盘按键时触发。
onkeypress 当用户按下字面键时触发。
onkeyup 当用户释放键盘按键时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmousemove 当用户将鼠标划过对象时触发。
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmouseover 当用户将鼠标指针移动到对象内时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。
onmousewheel 当鼠标滚轮按钮旋转时触发。
onmove 当对象移动时触发。
onmoveend 当对象停止移动时触发。
onmovestart 当对象开始移动时触发。
onpaste 当用户粘贴数据以便从系统剪贴板向文档传送数据时在目标对象上触发。
onpropertychange 当在对象上发生对象上发生属性更改时触发。
onreadystatechange 当对象状态变更时触发。
onresizeend 当用户更改完控件选中区中对象的尺寸时触发。
onresizestart 当用户开始更改控件选中区中对象的尺寸时触发。
onselectionchange 当文档的选中状态改变时触发。
onstop 当用户单击停止按钮或离开 Web 页面时触发。

标签Tags：ajax, JavaScript&Ajax, js, menu, seo, web, 大全, 容器, 对象, 属性, 数据, 浏览器, 系统, 网络编程, 页面, 鼠标

下面是我对一部分缺陷的看法：

为Ajax而Ajax(Using Ajax for the sake of Ajax.)

很同意这点，当一个技术本身的生存意义由于它自身的亮点而被抹杀，不知道是这个技术的幸运还是不幸。

干掉了back按钮(Breaking the back button)

back按钮是一个标准的web站点UI的重要功能。然后，后退按钮没法和js很好的合作……
gmail似乎作的很好？不过没去仔细看过gmail如何实现后退和js相容的，被这个mistake一提醒，也许这也是ue的一个切口哦。

点击的时候没有提供一个可视化的提示(Not giving immediate visual cues for clicking widgets)

……也许是我没看懂，觉得写这段的人自相矛盾。。他说没提供可视化提示，不过是拿gmail右上角的红色提示作为例子。 (更多…)

标签Tags：ajax, code, google, html, ie, javascript, js, PHP, web, 人, 代码, 兼容, 可用性, 应用程序, 收藏, 数据, 方法, 浏览器, 版本, 程序, 系统, 网络编程, 自身, 解决, 诫, 链接, 错误, 页面

<?php
# $Id: js.class.php,v 0.1 p $

// 禁止直接访问该页面
if (basename($HTTP_SERVER_VARS['PHP_SELF']) == "js.class.php") {
     header("HTTP/1.0 404 Not Found");
}

# Purpose 封装了一些常用的Javascript代码，以便在PHP中快速调用

class JS{
     function JS(){}

     #返回上页
     # @param $step 返回的层数 默认为1
     function Back($step = -1){
         $msg = "history.go(".$step.");";
         JS::_Write($msg);
         JS::FreeResource();
         exit;
     }

    # 弹出警告的窗口
    # @param $msg 警告信息
     function Alert($msg){
         $msg = "alert(\"".$msg."\");";
         JS::_Write($msg);
     }

    # 写js
    # @param $msg
     function _Write($msg) {
         echo "<script language=\"javascript\">\n";
         echo $msg;
         echo "\n</SCRIPT>";
     }

     # 刷新当前页
     function Reload(){
         $msg = "location.reload();";
         JS::FreeResource();
         JS::_Write($msg);
         exit;
     }

     #刷新弹出父页
     function ReloadOpener(){
         $msg = "if (opener)     opener.location.reload();";
         JS::_Write($msg);
     }

     #跳转到url
     #@param $url 目标页
     function Goto($url){
         $msg = "location.href = ‘$url’;";
         JS::FreeResource();
         JS::_Write($msg);
         exit;
     }

     #关闭窗口
     function Close(){
         $msg = "window.close()";
         JS::FreeResource();
         JS::_Write($msg);
         exit;
     }

     #提交表单
     #@param $frm 表单名
     function Submit($frm){
         $msg = $frm.".submit();";
         JS::_Write($msg);
     }

    #关闭数据库连接
    function FreeResource(){
         // 数据库连接标志
         global $conn;
         if (is_resource($conn))
             @mysql_close($conn);
     }
}
?>

标签Tags：class, javascript, JavaScript&Ajax, js, mysql, PHP, PHP, server, sql, url, 代码, 常用, 提交表单, 数据, 数据库, 类, 网络编程, 表, 表单, 连接, 页面

mysql my.cnf文件常见优化模块
[mysqld]
port = 3306
server-id = 1
socket = /tmp/mysql.sock

# 避免MySQL的外部锁定，减少出错几率增强稳定性。
skip-locking

# 禁止MySQL对外部连接进行DNS解析
skip-name-resolve

# 指定MySQL可能的连接数量
back_log = 256
(更多…)

标签Tags：cache, div, ie, mod, mysql, path, PHP, server, session, sql, 人, 代码, 兼容, 函数, 含义, 密码, 属性, 引入, 成功, 搜索, 操作系统, 数据, 数据库, 最快, 服务器构建&安全, 版本, 程序, 类, 系统, 表, 解决, 连接, 错误, 镜像, 页面

正则表达式匹配，其中：

* ~ 为区分大小写匹配
* ~* 为不区分大小写匹配
* !~和!~*分别为区分大小写不匹配及不区分大小写不匹配
文件及目录匹配，其中：

* -f和!-f用来判断是否存在文件
* -d和!-d用来判断是否存在目录
* -e和!-e用来判断是否存在文件或目录
* -x和!-x用来判断文件是否可执行
flag标记有：

* last 相当于Apache里的[L]标记，表示完成rewrite
* break 终止匹配, 不再匹配后面的规则
* redirect 返回302临时重定向 地址栏会显示跳转后的地址
* permanent 返回301永久重定向 地址栏会显示跳转后的地址
一些可用的全局变量有，可以用做条件判断(待补全) (更多…)

标签Tags：301, access, cookie, css, domain, html, ie, include, js, PHP, seo, server, sql, swf, web, 判断, 图片, 密码, 服务器构建&安全, 正则表达式, 浏览器, 网站, 自定义, 表, 重定向, 链接, 错误, 页面

规则1，减少HTTP请求

这是最重要的原则，如果14条规则里只能选一条，那就是它了。可以通过多种方法减少HTTP请求，例如合并图片，合并JS和CSS等等。这一点薄荷网有很多改进的余地，首先应该把现在的JS合并了。

规则2，使用内容发布网络

内容发布网络就是CDN了，但是CDN似乎挺贵的，目前还不适合薄荷网，不过可以考虑自己弄一个网通的静态资源服务器解决有中国特色的可恶的南北互通问题。

规则3，添加Expires头

这个没什么好说的，是个建网站的人都应该知道。目前薄荷网图片,css,js,flash过期时间设置了3年，可以说是永久了，：） Expires有个麻烦的地方是内容更新问题，Ruby on Rails这方面处理的非常棒，它是在文件名后面自动带了

资源文件的timestamp，完美解决。 (更多…)

标签Tags：ajax, css, flash, javascript, js, server, url, web, 中国特色, 人, 图片, 方法, 更新, 服务器构建&安全, 浏览器, 组件, 网站, 表, 解决, 设计, 重定向, 页面

欢迎来到无风的港湾~

标签Tags：网站, 页面

今天,在作一个网页特效的时候,
遇到了一个状况,
因為要作的功能是,卷动瀏览器的卷轴后,
广告图片会跟著滑动.
而这功能,在网路上已经有很多范例了,
所以特别挑了一个简短而且在IE跟Firefox上都可以用的来,
稍微修改一下,写个范例测试,没有问题就想说可以开始套了,
结果没想到将那个片段套在程式裡以后,却不会动…
所以只好重头debug了.
debug到后来才发现,
原本的测试网页中使用的document.body.scrollTop是正常的,
但是套用到php的页面时,
不管怎麼卷动,document.body.scrollTop都是0. (更多…)

标签Tags：code, firefox, google, html, ie, JavaScript&Ajax, PHP, 图片, 网站, 页面

获取页面元素的位置对我们很重要，如何获得元素位于页面的绝对位置呢？通过offsetLeft,offsetTop可以获得对象的左边距和上边距，但是不同浏览器因为对象处于的地位而会有些不同的解析，例如有些时候计算边距时没有把parent的边距计算进去，下面的函数将可以获得对象绝对的位置。

如下：
// get absolute Left position
//建立者:jiarry@hotmail.com
//返回对象位于窗口的绝对左边距离
function getAbsoluteLeft( ob ){
if(!ob){return null;}
  var obj = ob;
  var objLeft = obj .offsetLeft;
  while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
    objLeft += obj .offsetParent.offsetLeft;
    obj = obj .offsetParent;
  }
return objLeft ;
}

// get absolute TOP position
//建立者:jiarry@hotmail.com
//返回对象位于窗口的绝对上边距离
function getAbsoluteTop( ob ){
if(!ob){return null;}
var obj = ob;
var objTop = obj .offsetTop;
while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
  objTop += obj .offsetParent.offsetTop;
  obj = obj .offsetParent;
}
return objTop ;
}

获得页面的的宽高，左右边距有这些：
window.screen.width;
window.screen.height;
window.document.body.offsetWidth;
window.document.body.offsetHeight;
window.screen.availWidth;
window.screen.availHeight;
window.document.body.offsetWidth;
window.document.body.offsetHeight;
window.screen.availWidth;
window.screen.availHeight;
window.document.body.scrollWidth;
window.document.body.scrollHeight;
window.document.body.clientHeight;
window.document.body.clientWidth;

通过事件来获得鼠标位置主要有这些:
e.layerX;
e.layerY;
e.pageX;
e.pageY;
e.screenX;
e.screenY;
e.offsetX;
e.offsetY;
e.clientX;
e.clientY;

//获得对象相对于父级的位置
obj .offsetLeft;
obj .offsetTop;
obj .offsetWidth;
obj .offsetHeight;

(更多…)

标签Tags：JavaScript&Ajax, js, 对象, 绝对位置, 页面, 鼠标