Ajax,Asynchronous JavaScript and XML,异步JavaScript和xml。怎么发音呢?传说这是一个希腊文,Aias(Eye-yas),也许可以读作:EYE-yaks,爱牙科斯〜〜〜这两天看到一个教程,上直接念成阿甲克斯,也挺朗朗上口的。其实怎么读,无所谓的。
最近在开发糗微的过程中,不得不学习通过jQuery来实现Ajax。把这个学习过程记录下来,和大家分享。
这个教程使用语言:jQuery,难度:初学者;时间估计:20分钟。
什么是AJAX?
名词解释:XHR,是XML HTTP request的简称。我想大部分人在网上冲浪的时候都体会过Ajax
- 在GMAIL中,当你从收信箱转换至草稿箱,你会发现,网页的部分改变了,但是网页并没有整体刷新。你还在同一个页面上的感觉,地址栏的地址也没有发生任何变化。有人会问这是不是一个网页框架技术?我们观察原代码,找不到任何iframe的影子。
- 在Google Reader当中,你点击了一个feed,内容随之改变,但是并没有重定向网页的感觉。
- 在Google Maps当中,你扩大和缩小地图,地图变化了,但并没有整个的更新网页。
- 在live spaces当中评论别人的博客,留言提交上去了,网页并未发生大的变化。
对,你感觉不到你在与服务器交换数据的过程,这一过程全部放到后台异步完成。在之前,人们要实现与服务器交换数据,浏览器会这样做,首先产生一个访问请求,这时浏览器刷新成空白页,等待服务器的响应,接到响应之后,全新的呈现一个网页在浏览器上。这样就会看到一个明显的网页变换过程。而有一Ajax之后,网页的显示可能就不需要刷新和重定向了。如果你只是想修改部分的网页内容,而不是全部,这一技术无疑是你最想要的。这有点象动态网页技术DHTML+远程访问。这一技术的最大用处就是,当你与服务器交换数据时,不影响你对网页内其它内容的继续阅读与操作。
上手AJAX
jQuery对于Ajax的全局设置
对于一个静态内容的访问,也许我们希望浏览器缓存网页内容,以便下一次访问的时候能提高效率。但是因为Ajax的大部分应用都是数据库的访问,内容随时变化,这个时候我们不希望浏览器缓存网页内容。jQuery提供了一个全局使用的函数,$.ajaxSetup ();我们可以把自己需要的全局操作以参数的形式传进去就可以了。
1 2 3 | $.ajaxSetup({ cache: false }); |
1. load(): 远程调取html内容,并将其插入至指定的位置;
事实上,大部分的Ajax的应用都是实现这个过程,动态地在网页的某个位置加入一段互动显示效果。使用jQuery当中的load()函数可以很方便地实现这一过程。
基本实现
假设网页上有一个load按钮,它会响应鼠标click事件。我们需要写一段代码来具体如何响应这个click事件。最基本的,我们需要点击按钮后有一个等待的动画,消除人们的误会,让人看到正在响应鼠标单击事件,这时后台向服务器提交一个指定网页的请求。当网页内容返回以后,将这段网页内容加载至结果显示区域去。
1 2 3 4 5 6 7 8 9 10 | $.ajaxSetup ({ cache: false }); var ajax_load = "<img src='img/load.gif' alt='loading...' />"; // load() functions var loadUrl = "ajax/load.php"; $("#load_basic").click(function(){ $("#result").html(ajax_load).load(loadUrl); }); |
1-3行,让浏览器对内容不缓网页内容;
4行,定义一个动画地址,显示正在响应事件;
7行,定义访问请求的地址;
8行,$(“#load_bashic”)相当于getElementById(load_basic),获取网页当中id为load_basic的对象。定义它被点击后,id为result的对象首先显示4行当中定义的动画,同时提交7行定义的请求,当请求返回之后替换刚才显示的动画,显示在result对象当中。
只调用部分远程文件
上面的例子当中,会把返回的整个内容显示在result对象当中。如果这时我们并不希望显示返回内容的全部,而只是其中指定的部分呢?比如说,返回的内容是一段html格式的文件:
1 2 3 4 5 6 7 8 | <h4>nothing</h4> <h4>nothing</h4> <div id="picture"> <h4>a picture.</h4> <a href="http://blog.qiuworld.com"> <img src="http://www.qiuworld.com/images/c5.jpg"></img> </a> </div> |
我们只希望显示图层picture当中的内容。这个时候,我们可以使用load(url + “#DOM”)来实现这个想法:
8 9 10 11 12 | $("#load_basic").click(function(){ $("#result") .html(ajax_load) .load(loadUrl + " #picture"); }); |
通过Get方法提交数据
有时候,我们想通过Get方法向服务器提交一些数据,然后等待其响应结果。当然我们也可以使用上面的方法,修改提交地址,让它带有需要提交的数据就可以了。其实jQuery的load方法也是这么干的,只不过书写起来会比修改网页地址让人更容易懂:
8 9 10 11 12 | $("#load_basic").click(function(){ $("#result") .html(ajax_load) .load(loadUrl, "language=php&version=5"); }); |
对,我们只需要把需要提交的数据以load(url,”data”);的形式提交就可以了。
通过POST方法提交数据
知道POST和GET的区别吗?不知道,那就Google百度一下吧。方法是类似的,load(url,array);的形式就可以了。
8 9 10 11 12 | $("#load_basic").click(function(){ $("#result") .html(ajax_load) .load(loadUrl, {language: "php", version: 5}); }); |
注意这里的数组使用的是冒号,而不是=>的。
load当中使用回调函数
8 9 10 11 12 13 14 | $("#load_basic").click(function(){ $("#result") .html(ajax_load) .load(loadUrl, null, function(responseText){ alert("Response:\n"+responseText); }); }); |
这一方法可以实现当ajax响应成功以后显示一个提醒对话框。但是这样写的程序不漂亮。下面有更好的办法。