用jQuery实现Ajax快速入门教程

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响应成功以后显示一个提醒对话框。但是这样写的程序不漂亮。下面有更好的办法。

Pages: 1 2