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对象当中。
[……]

继续阅读