1.仍然调用刚才的页面，输出错误提示，并把<input>中 value的值改为刚才用户输入的值。这应该是最好的方法，但缺点是要在这个页面的<input>的VALUE进行处理，比较麻烦。

2.还有很多懒人像我一样，遇到验证不通过，直接输出一个出错提示页面，并在页面中加入JavaScript的代码：

这个代码是返回上一页的代码，返回后，除了密码类型的所有数据均会保留在网页中，这算是比较友好了。

但有很多朋友反应使用JS的返回后，网页上并没有数据的缓存，有时候却又有，真让人捉摸不定。前几天我在开发的时候也碰到了这个问题，上网Google许久未果，只好又从自己的代码分析入手。这时候，一句 session_start(); 引起了我的注意。session_start(); 是开启 $_SESSION 会话的函数，开启SESSION后，似乎是每次访问一个网页都要重新调用一次网页。我把这句话去掉以后，问题就解决了。如果遇到网页数据不能缓存的，不妨去掉SESSION试试

jQuery主要提供了AJAX，CSS操作，控制DOM等功能。无论你是要使用AJAX连接服务器与客户端，还是控制页面上某个按钮（输入框的属性），获取输入框的值，隐藏或显示某个DIV，各种动画效果，jQuery绝对是不二选择。

好了，就简单说说如何使用jQuery吧。

首先要下载jQuery文件，目前jQuery最新版本为1.2.6，jQuery官方已经有经过压缩版的JS文件，可以直接用于产品的使用，这个包大概在30KB左右，用于网络传输丝毫不会影响网页的载入速度。此外，jQuery还提供了没有编译的源代码，想知道jQuery工作原理的不妨下载来看看，不过我是没多大兴趣了，我只是用jQuery来做我的产品。

使用任何一门脚本语言一定不能少了它的文档，没有文档就无从下手，遇到问题就要不停地Google。jQuery似乎对国际化的支持不够完善，官方也没有提供其他语言的文档，而国内已经有人翻译了一个比较完善的文档点此下载 。

要使用jQuery，首先在HTML文件中调用jQuery文件，调用这个文件就跟调用别的JS文件一样的：

现在你就可以在页面里随心所欲地使用jQuery提供的功能了。先来一个最简单的应用：

这是一个简单的例子，用于在文档载入成功以后弹出提醒“LOADED”。jQuery中所有功能都要用美元符号开头，如果有一个要绑定一个DOM控件，就可以在括号后输入这个DOM，比如要控制一个DIV，ID为“page”,就是使用$(‘#page’)，控制一个SPAN，CLASS为“entry”，在jQuery中就是使用$(‘.entry’)，如果控制所有的A链接，直接使用$(‘a’)。这与CSS的语法规则有点类似。

隐藏、显示、高度、宽度

在某些AJAX情况下，我们可能会把所有的内容都放入在一个网页中，比如没登陆的时候提示的登录框，通过AJAX登陆成功后提示登陆信息等，这必然要用到一些隐藏、显示的方法。以往用Javascript就要 DOM.style.display=none，显示就要用 DOM.style.display=block ，这样的代码显得冗长，用jQuery就容易多了。在AJAX过程中显示Loading信息：

这个Loading的风格可以是背景用Filter:alpha模糊，这样用户就不能点击页面中的任何东西了，防止重复提交。要做这个Loading信息，首先在页面HTML中输入一个DIV,ID为 loading，容器内放上一个合适的Loading文字或图标。为了兼容更多浏览器，需要即时对#loading赋予当前页面的高度和宽度，保证loading能覆盖整个页面。

这个代码能做一个层，长宽为页面的最大值，z-index层是最上面，把下面的内容透明覆盖（模糊处理），而且鼠标只能在上一层活动，而不能触摸到页面。（该CSS可能不符合CSS语法规范）

$(‘#loading’).show();是一个让#loading显示的代码，同样，有显示就有隐藏，隐藏使用$(‘#loading’).hide();，此外，还可以在show(),hide()里面加入参数，使它发生动作时更为美观。比如$(‘#loading’).show(’slow’);，是让#loading慢慢地显示出来，更多的参数请参考文档。

需要注意的是，如果使用AJAX，在触发AJAX事件时使用$(‘#loading’).show(’slow’);，在AJAX结束时就不要再使用$(‘#loading’).hide(’slow’);因为slow是一个比较慢的过程（可能需要0.5秒），而AJAX是一个异步调用的过程，这样的结果导致了$(‘#loading’).show(’slow’);和$(‘#loading’).hide(’slow’);几乎是同时进行，可能会导致Javascript发生错误或效果无法显示。

$(‘#loading’).height(‘100px’);这个代码能够把一个高度的数值赋予一个控件，如果没有数值 var heightvalue = $(‘#loading’).height(); ，则是返回一个控件的高度。$(‘#loading’).height($(document).height());就是把整个页面的高度赋值给#loading，使#loading的高度为整个页面的高度，width的用法也是一样的。

关于这个Loading的效果，可以去 http://beta.neekey.com 看看。

CSS

有时候我们需要在页面中即时改变CSS的值（比如对某个出错的信息加粗、红色显示），可以用$(‘#box’).css(‘name’,'value’);的方法来做。现在有个DIV，ID为“box”，里面有一些文字“账号密码输入错误”，这时候需要对这个BOX进行一些处理：

其他信息请参考文档。

AJAX

AJAX是jQuery里面比较重要的应用。jQuery的AJAX分为几个函数，适应不同任务的要求，有完整版的$.ajax(); （类似于PHP中用fsockopen函数），有普通的$.post(); ,$.get(); （类似于PHP中的file_get_contents()函数，fsockopen的阉割版），还有调用Script的 $.getScript();（类似于PHP中的include()语句） 具体需要看你需要用于什么用途了。（以上的比喻可能不是很恰当，仅作为理解使用）

一个完整的AJAX范例

这个代码中除了用到基本版的AJAX调用，后面的注释写得比较完整了。这里用到了$(‘#email’).value()，是调用一个ID为email的值，请在页面中做一个input输入框，ID为“email”，AJAX时就能获取#email的值并进行AJAX调用了。

除了value()还有 html() text() attr()等获取值的方法， html()是获取整个HTML，如果有个DIV,ID为“page”，同时这个层里还嵌套着数个层，调用$(‘#page’).html()时，会把里面包括HTML TAG在内的所有的字符全部调用，而text()方法只调用文本，也就是去除HTML标记后的内容，attr用于调用某个属性，比如一个 input，有ID为“email” ，CLASS为“input1” ，调用$(‘#email’).attr(‘class’) 会返回CLASS的值“input”。

此外，html() text()还像 css() 一样，拥有赋值的功能，使用方法也类似，attr就要用$(‘#email’).attr(‘class’,'NewValue’) 的方法来赋值了。

返回AJAX中，dataType不能胡乱填写，如果以XML形式返回信息就应该填写xml，同时服务端也最好输出header()的Content-Type为XML，如果只是调用某个HTML页面并把它输入到网页中，填写html就可以了。

更多的AJAX方法请参考文档。

注意：很多使用方法需要在文档加载完成以后调用，特别是把JS文件放在头部的尤其应该注意这个问题，浏览器解释时按照从上到下的顺序解释，如果在刚载入JS就做某个命令如 $(‘#box’).css(‘name’,'value’)，此时文档上还不存在#box，这样会导致JS错误，所以需要把这个命令放到$.ready({…});中去 （jQuery规定$.ready({…});等同于$(document).ready({…});，因为只有document有ready的方法。），另外，把它放入到一个函数中，通过页面上某个动作来激活函数也是一个不错的办法。

第一篇到此结束，该文章本人的拙作，在某些术语方面可能不是十分准确，请以文档为准，如果有错欢迎纠正。下一篇什么时候写，看看反响是否热烈

先介绍一下Google Ajax Search，这是Google面向小型网站、博客推出的搜索服务，它在你的网站上内置搜索框，用AJAX方式调用结果显示在你的网站上，此过程不用访问Google的网页，增快了搜索的速度，提供更好的访客体验。

现在开始说一下如何使用吧。首先要注册一个Google Ajax Search的KEY，挺容易的，输入你的网址，如http://photozero.net ，打个勾赞成服务条款就会得到一个KEY，这个KEY只能用于这个域名下的网页调用。

接下来是把一个Javascript文件嵌入你的博客中。在博客后台打开“主题”-》“编辑主题”，找到“header.php” 这个文件编辑。把类似于

的代码放在

之间。

这是第一步，在你的博客里面引用Google的AJAX搜索的文件。如果担心载入速度受到影响，可以把这个JS文件放在最后载入也是没有问题的。

第二步；在合适的位置放置搜索结果的标记。当用户进行搜索后，这个结果显示在你的博客的某个位置。我的建议是放置在Header之后，博客文章开始之前。我在要放的结果放一个

第三步，在合适的位置放置搜索框，如我的是在侧边栏，编辑“sidebar.php” ，在合适的位置放上标记：

第四步，也是最重要的一步，对搜索进行配置。Google Ajax Search（文档）提供了包括网页搜索、博客搜索、视频搜索、图片搜索等多项搜索服务，还可以限定结果网站（如 photozero.net ，限定在 photozero.net 里面搜索结果），相当于“站内搜索”。这一步也是比较麻烦的，如果懂得JavaScript还好说，不懂得就照例画葫芦。下面是示范代码。这是一个类似于标签式的排列方式，另一种是由上至下的排列，比较难看了点。

好了，把上面的代码放入网页的任意位置，就可以看到像我的博客一样的效果了。此外，还有人为这个写了插件，好像就叫Google Ajax Search，但似乎很久没更新了，我也没去试用，如果贪图方便的朋友请上官方插件目录搜索一下。

    HighSlide：符合CSS标准、适合包括IE5.0,FF1.5以上的大多数主流浏览器。当鼠标靠近缩略图片时，会在图片上显示“Click to enlarge”，提示你点击图片

    点击后，会载入完整图片：

    HighSlide不但对图片有效果，对文本框之类的同样有效果，希望为你的网站提供更好浏览效果的话不妨一试，当然，最好有点JavaScript和CSS的功底。HighSlide是基于CreativeCommons协议的代码，非商业用户可以免费使用。

    LightBox同样是一款非常不错的插件。相比HighSlide，LightBox更有那种Slide滑动的效果。但LightBox只支持对图片特效而不支持文本框之类的。LightBox是免费使用的。

    Piclens也是一款不错的相册插件、还能支持3D浏览功能，真有VISTA的感觉。但如果要完全体验PicLens的3D效果还需要下载他们的客户端插件。

    类似的插件还有 Slimbox，Thickbox，Lightview，jQuery Lightbox Plugin 等。

    使用这样的插件让访客在浏览你的相册的时候不再是单调的体验了，而且你不但可以将这个效果放在相册里，放在自己的个人网页简历上不是倍添色彩？

    WP的发布页面默认是富文本编辑工具TinyMCE，但是它需要的JS文件太多，功能偏弱，还不及DISCUZ的编辑器，查看发布页面的源文件发现，它载入了数十个JS文件，这就是为什么我们打开它需要很久时间，特别是国外的空间。真希望WP能更换一个更为简易的编辑器，虽然也有这样的插件。

    WP收购了那个提供头像服务的Gravatar公司，并在新版本中原生支持它，但它的访问速度还有待加快，并且，希望更多的博客程序和BSP一起加入进来，而不仅仅是WP博客。

    WP的备份功能也需要提高，DISCUZ在这点上做得不错，虽然有个插件能很好地完成这个工作，自己手动也能做，但毕竟不如官方的快捷。

    还有一点就是增加对WAP的支持了，目前WAP网民在快速增长，我们不能浪费这部分资源。

如图，一个常见的网页效果，像QQ书签，百度收藏均使用这种效果，在用户未登录时，“弹”出一个登录框，输入帐号密码后通过AJAX激活后去除该框即可。这个框不是在浏览器之外弹出的，也不是漂浮的，所以也不会被各种浏览器拦截。怎么实现呢？实际上是先创建一个底下的层，长和宽均为全屏，再使用CSS的FLITER的ALPHA滤镜效果，使背景模糊，并且不可选，再在此上创建一个登录框即可。

1.准备好一个网页模板，建议是符合XHTML4.0的，如果没有，也可以到 www.freecsstemplates.org 下载一个。

2.

在页面最尾部的</body>前加上

<div id=mask style=display:none > </div>
//请自行加上引号以符合XHTML标准 ,中间最好加一个空格的HTML转义字符，以免某些浏览器当容器的内容是空的时候不会显示。这是一个背景模糊的隐藏层,另外，默认是隐藏的，可以在页面载入的时候用JS ，像<body onload=check();> 这样来激活

在CSS中创建

#mask{position:absolute;z-index:2;top:0px;left:0px; right:0; bottom:0;background-color:#999999;filter:alpha(opacity=50);-moz-opacity:0.50;opacity:0.50;}
//请注意，这里没有定义这个层的长和宽，因为直接定义 100%可能会不兼容某些浏览器,所以要在后面使用JS获取屏幕宽度和高度后再赋值。位置是相对的才行哦！

现在来创建登录框的部分

<div id=loginform style=display:none>
<table>
<tr><td>
    <form>
    <input />
    ……
    </form>
</td>
</tr>
</table>
</div>

//这是登陆框的主题部分，建议在这个容器以内使用TABLE以便定位，否则某些浏览器会变形。

再添加loginform的CSS定义：

#loginform{position:absolute;z-index:4;width:600px;height:360px; background-color:#F5FFE0;border:1px solid #A5CF3D;}

//这里面的长，宽，可以先预设，同样，相对于顶部和左部的距离也最好用JS来设置。

现在来设置一下JavaScript

<script>
function check(){
//请自行根据情况设置条件，或者也可以用 <a onlick=check();>Check</a>这样来使用，那就不需要判断条件了。
if 条件 {
 $(‘mask’).style.height=document.body.clientHeight + ‘px’;
 $(‘mask’).style.width=document.body.clientWidth + ‘px’;
 $(‘mask’).style.display=’block’;
//设置模糊层的宽和高，并让它显示出来，需要在后面加上 ‘px’，否则Firefox浏览器会出错
 $(‘loginform’).style.top=(document.body.clientHeight -350)/2 + ‘px’;
 $(‘loginform’).style.left=(document.body.clientWidth -600)/2 + ‘px’;
 $(‘loginform’).style.display=’block’;
//设置弹出框距离顶部和左部的距离，也可以固定为 xxx px，并让它显示出来

}
}

function close1(){
 $(‘loginform’).style.display=’none’;
 $(‘mask’).style.display=’none’;
}
//如果要关闭这个层只要让他们设置为隐藏就可以了。

</script>

下次有空再把部分代码贴出来讲解。