比较简单的jquery教程 Easy Ajax with jQuery

======================================================

注：本文源代码点此下载

======================================================

ajax在改变着web应用,并且带来了一种前所未有的桌面应用程序之外的震撼。但是,在这些宣传的背后我们应该意识到,其实ajax不过是——(x)html,javascript以及xml,没什么新鲜的.在这个教程中,我将给你展示如何让简单的添加ajax到你的应用中去,并且教你如何使用一个流行的javascript库jquey进行ajax开发.
1. 什么是ajax
你以前可能听说过ajax,或者至少用过ajax的应用--比如gmail.简单的说,ajax就是使用javascript来异步地处理数据,而不是一下子重载整个页面.sitepoint上有个教程a good introduction to ajax.另外,ajax这个词出自jesse james garrett的这篇著名的文章.
不幸的是,关于ajax深入的实践教程可以说少之又少,还有就是ajax中使用的xmlhttprequest 类对初学网页开发的人来说有很大的难度.不过庆幸的是有一大批javascript库相继出现,为实现ajax提供了简单的方法.我们今天要用到的jquery就是其中之一.
2. 什么是jquery
jquery是一个成熟的javascript库,它提供许多其他库没有的特性.当然也得承认,它有19k之大,不想moo.fx那样只有3kb之轻.你可以在这里看到对许多javascript库性能以及其他方面的比较数据.
3. 先验知识
要学习此教程,你需要有基本的javascript只是,如果你懂c风格的语言,那么你可以对javascript很快上手.其实不过是大括号,函数声明以及可有可无的行末分号(对jquery来说;为必须).如果你想学习javascript,可以看这个教程. 另外,既然我们讨论的是web应用,基本的html只是自然是必不可少的.
4. jquery 101
让我们简单浏览一下jquery.要想使用jquery,首先你必须下载这个库.下载地址在这里(目前版本1.1.2).jquery的语法非常简单:找到,然后做.我们从文档中选择元素则使用$().这个符号就相当于 document.getelementbyid(),不过除了支持id外,它还支持css选择符以及一些xpath选择符. 而且,它可以返回一个元素的数组.好,也许举个例子可以更好的说明$()的功能.
我们想使用函数来操作我们的选择符.比如,把"hello world!" 添加到每个class为foo的div上去,然后设置颜色为红色,我们可以这样写代码:
$("div.foo").append("hello world!").css("color","red");
很简单啊!一般情况下,这需要两行代码来完成:
[复制此代码]code:
$("div.foo").append("hello world!");
$("div.foo").css("color","red");
jquery的链接方法可以是允许你连写你的代码,这点别的库恐怕没有.有很多jquery的函数不需要对象,也就是说独立工作,许多ajax相关的函数都这样.比如,我们将会使用的post函数,调用方式为$.post(parameters). 更多jquery函数信息可以来online documentation 或者 visualjquery.com.
5. 示例一:我们的第一个ajax程序
作为一个例子,我们将做一个交互概念生成器.简单的说就是让我们从列表中随机选择两个选项,然后组合成一个词组.这个例子中我们将使用web2.0特性的词语(像'mashup', 'folksonomy', 'media'等等),通常情况下我们从文本文件中获得这些选项.为节省用户用javascript下载每一个组合(或者至少每一个元素)的时间,我们将在服务器端快速生成它,并且使用jquery在客户端获取到它.jquery可以很好的和javascript结合使用,所以你将发现在代码中使用它将使工作变得十分容易.
服务器端代码(php):
简单起见,我们使用最简单的代码来做我们的概念生成器.不要担心他是如何工作的,注意看它是干什么的:输出一句话.注意,这段代码没有输出xml,他只是输入一个纯文本:
[复制此代码]code:
这里,我们使用 cache-control 头选项是因为ie总是为同一个地址建立缓存,甚至页面内容有变化时也是.很明显,这对我们的例子很不利,因为我们在每次加载的时候重新生成一句话.我们也可以使用jquery生成一个随机数加到地址的后边,不过这不像在服务器端这样处理比较简单.[译者著:其实作者在这里提供了ajax和ie cache冲突的两种解决方案.]
客户端代码(html)
可以开始编写前端代码了,然后我们就可以把ajax加进去了.我们需要做的仅仅是加一个按钮,好让用户点击一下获得一句新的语句,还有一个div标签,好让我们在从服务器端接收到语句的时候显示在div里面.我们将使用jquery选中这个div以及加载返回的那句话,我们可以使用div的id来引用它.如果需要,你可以加载这句话到不同的元素标签中,这可能需要使用class了.不过这里,我们仅仅需要使用id就够了.此页面body标签中的内容为:
一般说来,我们需要为这个按钮(就是这个id为generate的input)加上一个冗长的onsubmit 事件. 有时,我们用onsumit事件调用一个javascript函数. 但是在jquery里面,我们设置不需要修改任何html代码,我们可以简单的实现行为(事件处理)和结构(html代码)的分离.
客户端代码(jquery)
终于该使用jquery把我们的后台和前台结合到一起了.前面我提到我们可以使用jquery从dom中选择元素.首先,我们应该ixuanze这个按钮,并给它一个onclick事件响应.在这个事件代码中,我们可以选中div并且载入内容.下面是click事件响应的写法:
$("element expression").click(function(){
// code goes here
});
可能你已经知道,在css里选择一个元素的时候我们使用#来使用元素的id属性. 你可以在jquery里使用同样的语法.因此,要选择那个按钮,我们可以使用#generate. 注意,这种语法可以让我们把事件处理函数定义成匿名的.
mark wubben's javascript terminology page 提供了详细的关于匿名函数的解释,有兴趣可以参考.
我们将要使用jquery中一个比较高级的ajax函数:load(). 假设我们的代码保存为script.php.我们这样把它和我们的客户端整合起来:
$("#generate").click(function(){
$("#quote").load("script.php");
});
只有:3行代码!现在我们已经做了一个完整的ajax随机语句生成器了!不错!
问题是javascript代码并不是在一个浏览器加载完就执行的函数内.这样的话,这段代码就会试图去关联一个可能还没有被加载的元素.一般情况下我们使用window.load来处理这个问题,不过这种方法的局限性在于,window.load只在所有的东西(图片及其它)被加载完成后加载一次.我们对等待这些图片的加载可能毫无兴趣--我们只是需要去获得dom中的元素罢了.
幸运的是,jquery有一个 $(document).ready()函数,如其名,它在dom被加载完之后就被执行.
完整的代码
下面是完整的代码,使用 $(document).ready()以及一些简单的html和css:
[复制此代码]code:
loading...
name:
message:
你看到了,仅仅使用22行javascript代码,8行html以及大约50行php,我们就实现了一个完整的基于ajax的web聊天室应用程序.试一下吧,然后加入到你自己的网站上.创建你自己的ajax程序,使用这里的技术,或者你有自己的好点子.用这里的代码去做电信东西.如果你觉得使用xml很不爽,那你可以直接在你的应用程序中生成html,然后使用load来加载到客户端.如果你想的话,可以试试用功能强大的xml标签属性以及jquery的attr()函数.
现在你应该已经很惊讶于用jquery实现ajax的简单了吧!
[全文完]
本文来自: 脚本之家(www.jb51.net) 详细出处参考:http://www.jb51.net/article/12977_3.htm

======================================================

在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定
这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/